Cara Membuat Ikon Link External Otomatis Menggunakan Font Awesome

Selamat pagi sobat blogger, Kali ini saya akan mencoba posting tentang Cara Membuat ikon link external otomatis menggunakan font awesome di postingan. Ikon link external ini selain menandai link di postingan juga bisa mempercantik tampilan postingan blog.

Untuk Membuat ikon Eksternal link otomatis dengan menggunakan tambahan font awesome akan terlihat lebih menarik dan tentunya akan lebih mudah untuk mengetahui kalo itu adalah external link (anchor text). Biasanya eksternal link hanya mempunyai beda dengan teks biasa adalah warna saja yaitu warna biru atau apalah sesuai warna pada CSS di template. Tapi dengan menggunakan font awesome akan terlihat lebih beda, karna mempunyai ikon di setiap link external. silahkan lihat gambar dibawah ini.



Dan untuk cara penerapan nya juga sangat mudah. Silahkan bagi anda yang ingin memasangnya bisa lihat caranya di bawah ini.
Karna ini menggunakan font awesome jadi pastikan di template anda sudah tersimpan font awesome. Jika belum mari lihat caranya di bawah.

1. Silahkan masuk akun blogger. Pilih Template ==> edit HTML
2. Silahkan copy font awesome di bawah ini, dan letakan di bawah kode <head>

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>


Jika sudah, sekarang copy kode di bawah ini. Dan letaka di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.post-body a{font-weight:700;position:relative;padding-right:20px;display:inline-block;}.post-body a:before{content:'f08e';font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;color:#333;position:absolute;bottom:0;right:0;font-size:14px;}
/*]]>*/
</style>
</b:if>


Sekarang save template anda. Dan lihat hasilnya. Bagaimana, cukup mudah bukan? Semoga bermanfaat artikel tentang Cara Membuat Ikon Link External Otomatis Menggunakan FontAwesome

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser