Cara Membuat Link (URL) di Artikel ada IKON Panah dengan 3 Model

Tutorial: Tips & Trik Cara Membuat, Memasang dan Menampilkan Icon Panah di Dalam Postingan Blog

Salah satu pembaca setia kami menanyakan masalah tentang cara menampilkan ikon panah di dalam artikel blog; tepat ketika sebuah kata atau kalimat, dipasangkan (ditambahkan) sebuah tautan situs (Internal Link / Eksternal Link).

Pic: Kompi Ajaib

Setelah melakukan literatur (Googling), kami menemukan satu artikel tutorial yang membahas masalah ini, -- yang memang layak untuk di angkat dan dipublikasikan di situs web kami.

Cara Membuat Link (URL) di Artikel ada IKON Panah dengan 3 Model

Cara agar di dalam postingan yang terpasang link (URL) disertai ada logo panahnya, ada 3 style yang bisa kamu implementasikan di dalam template blogger.

Catatan: Tutorial ini hanya akan berfungsi apabila URL yang ditambahkan di dalam artikel, bersifat EXTERNAL LINK. Apabila tautan situs yang ditambahkan bersifat Internal Link, maka ikon tidak akan ditampilkan.

Simpan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.post-body a[target="_blank"]:after{
content: ' f08e';
font-family:FontAwesome;}
/*]]>*/
</style>

...di atas kode </head> kemudian simpan template blog.

Atau kamu juga bisa menggunakan kode di bawah ini:

.post-body a[target="_blank"]:after {
     font-family:'
     FontAwesome';
     content:"\f08e";
     font-weight:normal;
     font-size:80%;
     margin-left:4px;
}

...lalu paste (tempel) di atas kode ]]></b:skin> kemudian akhiri sesi ini dengan mengetuk Save Template.

Jika tutorial No. 1 dan 2 di atas tidak WORK pada tema blogger yang kamu gunakan, coba gunakan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*<![CDATA[*/
.post-body a[href^="http://"]:after,
.post-body a[href^="https://"]:after {
     content: '';
     background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23e8554e' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
     background-size: 14px 14px;
     width: 14px;
     height: 14px;
     display: inline-block;
     margin-left: 3px;
     vertical-align: -2px
}

.post-body .tr-caption-container a:after,
.post-body .separator a:after,
.post-body a[href^="http://www.example.com/"]:after,
.post-body a[href^="https://www.example.com/"]:after,
.post-body a[imageanchor*="1"]:after{
     content: '';
     background: 0 0;
     width: 0;
     height: 0;
     margin-left: 0
}
/*]]>*/
</style>
</b:if>

...di atas kode </head> kemudian Save Template.

Catatan: Pada tutorial No. 3 di atas, perhatikan URL dengan alamat https://www.example.com/. Ubah URL ini dengan alamat situs web kamu.

Oh iya... pastikan di dalam template blogger ada Font Awesome yang terpasang.

Nah itu dia cara agar ada ikon panah di link (URL) artikel dengan 3 tutorial (praktek) yang berbeda tapi tujuannya tetap sama. Ada hal yang ingin ditanyakan?

Source: https://www.kompiajaib.com/2015/10/membuat-external-link-icon-dengan-css.html

Labels: Tutorial Blogger

Thanks for reading Cara Membuat Link (URL) di Artikel ada IKON Panah dengan 3 Model. Please share this article.

Share this post