Menambahkan Ikon External Link pada Blog AMP

Mangaip – Pernah melihat suatu postingan blog yang memiliki ikon external link. Manfaat dari Exkternal Link Icon ini yaitu untuk mempercantik tampilan blog.

Redmi 5 plus Vince emmc replace fil...
Redmi 5 plus Vince emmc replace file ( ada 4 cara) First in the World

Setidaknya dengan adanya ikon ini, memperlihatkan kepada pengunjung kalau ada salah satu link yang aktif. Mungkin link itu bisa bermanfaat bagi pengunjung.

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 . 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.mangaip.com/"]:before,.post-body .separator a:before{content:'';}
.post-body a[href^="http://www.mangaip.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.mangaip.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

Share:

admin

Halo perkenalkan nama saya Mangaip. Saya merupakan konten kreator, influencer, dan penulis di blog ini.

Leave a Reply

Your email address will not be published.