Skip to main content
MANGAIP

follow us

Menambahkan Ikon External Link pada Blog AMP

Menambahkan ikon external link pada blog amp. Icon ini menggunakan library font Awesome dengan CSS



Mangaip - 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.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: http://www.lowker.xyz 
Hanya dengan dua langkah saja, sekarang silahkan bagi yang berminat untuk menerapkan kode diatas pada blog AMP sobat. Selamat mencoba

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar