Cara Membuat Icon Font Awesome Muncul Di Setiap Link Eksternal Blog

Oke masih pada tutorial blogger, kali ini saya disini akan membahas sedikit tentang bagaimana cara memasang font awesome external link tepat di semua link keluaran pada postingan blog. Sebenarnya untuk membuat font awesome ini muncul di link pada blog sangat mudah kita hanya perlu menambahkan beberapa CSS yang dapat menampilkan icon tersebut pada postingan yang telah disisipkan sebuah tautan link.

Cara Membuat Icon Font Awesome Muncul Di Setiap Link Eksternal Blog

Apa tujuan memasang icon font awesome di semua link eksternal? tidak lain lagi tujuannya adalah mempercantik tampilan tautan url pada artikel blog. Ide menulis hal ini saya dapatkan ketika sedang blogwalking ke sebuah blog yakni kompiajaib yang dimana blog tersebut dimiliki oleh mas Adhy Suhardi.

Jika anda berminat untuk memasang icon font awesome external links di semua tautan link pada postingan blog, maka ikuti langkah tutorial pemasangan icon font awesome pada link tautan.


Cara Membuat Icon Font Awesome Tampil Di Setiap Link Eksternal Blog

Oke langkah pertama, pastinya kita login dan masuk ke dalam dashboard blogger anda. Lalu pilihlah menu Template > Edit HTML.
Langkah kedua, tambahkan kode CSS dibawah ini tepat diatas kode </head>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.post-body a:active{position:relative;top:1px;left:1px}
.blockquote,.blocktext,blockquote{position:relative;font-size:16px;display:block}
.post-body a[href^="http://"],.post-body a[href^="https://"]{font-weight:500;color:#e8554e}
.post-body a[href^="http://"]:after,.post-body a[href^="https://"]:after{content:'f08e';font-family:FontAwesome;color:#e8554e;margin-left:5px}
.post-body .gist .gist-meta a[href^="https://"]:after,.post-body .separator a:after,.post-body a[href^="http://www.mediababe.net/"]:after,.post-body a[href^="https://twitter.com/intent/tweet"]:after,.post-body a.btn[href^="http://"]:after,.post-body a.btn[href^="https://"]:after{content:'';margin-left:0}
/*]]>*/
</style>
</b:if>

Langkah ketiga simpan template anda. Dan lihat hasilnya pada postingan blog.

Demikianlah cara memasang ikon font awesome tampil pada teks yang disisipkan tautan link, semoga bermanfaat guys.


Gambar Gravatar
"Seseorang Informan yang baru belajar"

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *