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:
- Cara Merubah Postingan Blog Menjadi Valid Instant Article Facebook
- Cara Daftar Instant Artikel Facebook Melalui Blog Terbaru
Terinspirasi dari Kompi Ajaib yang pada waktu itu memberikan ilmu untuk menambahkan ikon untuk external link yaitu.
<b:if cond='data:blog.pageType == "item"'>
<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
