Menambahkan Ikon External Link pada Blog AMP



gacerindo - Pernah melihat suatu postingan blog yang memiliki ikon external link. Manfaat dari Exkternal Link Icon ini yaitu untuk mempercantik tampilan blog.
Setidaknya dengan adanya ikon ini, memperlihatkan kepada pengunjung kalau ada salah satu link yang aktif. Mungkin link itu bisa bermanfaat bagi pengunjung.
Baca:


Terinspirasi dari Kompi Ajaib yang pada waktu itu memberikan ilmu untuk menambahkan ikon untuk external link yaitu.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.post-body a[href^="http://"],.post-body a[href^="https://"]{padding-right:25px;display:inline-block;color:#e8554e}
.post-body a[href^="http://"]:before,.post-body a[href^="https://"]:before{content:'\f08e';font-family:FontAwesome;color:#e8554e;position:absolute;bottom:0;right:0;}
.post-body a[href^="http://www.kompiajaib.com/"]:before,.post-body .separator a:before{content:'';}
.post-body a[href^="http://www.kompiajaib.com/"],.post-body .separator a{padding-right:0!important}
.post-body a{position:relative;font-weight:bold;color:#e8554e}
.post-body .separator a{margin:0!important}
/*]]>*/
</style>
</b:if>

Nah, ternyata kode diatas, setelah diterapkan untuk blog amp hasilnya masih belum valid. Lalu bagaimana agar ikon external link tersebut menjadi valid AMP. Berikut langkahnya.
Pertama, silahkan letakan atau simpan kode library font awesome didalam kode <head>. Karena font awesome ini nantinya akan memunculkan ikon ekternal link.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Kedua, Rubah sedikit kode dari Bang Adhy pemilik Kompi Ajaib. Sehingga hasilnya seperti dibawah.

.post-body a[href^="http://"],.post-body a[href^="https://"]{padding-right:25px;display:inline-block;color:#e8554e}
.post-body a[href^="http://"]:before,.post-body a[href^="https://"]:before{content:'\f08e';font-family:FontAwesome;color:#e8554e;position:absolute;bottom:0;right:0;}
.post-body a[href^="http://www.gacerindo.com/"]:before,.post-body .separator a:before{content:'';}
.post-body a[href^="http://www.gacerindo.com/"],.post-body .separator a{padding-right:0}
.post-body a{position:relative;font-weight:bold;color:#e8554e}
.post-body .separator a{margin:0}

Letakan kode diatas tersebut dibagian CSS blog pada template blog anda, atau sesudah kode <style>. Silahkan ganti http://www.gacerindo.com/ dengan alamat blog sobat.
Nanti hasilnya akan seperti berikut: https://www.toploker.my.id 
Hanya dengan dua langkah saja, sekarang silahkan bagi yang berminat untuk menerapkan kode diatas pada blog AMP sobat. Selamat mencoba

Posting Komentar

0 Komentar
* Please Don't Spam Here. All the Comments are Reviewed by Admin.