Ditulis oleh: Ditulis pada: 1/28/2018
Ada beberapa sahabat Kompi Ajaib yang menanyakan bagaimana caranya membuat ikon external link yang digunakan di blog Kompi Ajaib ini.Ikon external link di blog Kompi Ajaib ini menggunakan ikon SVG sehingga tidak memerlukan font icon seperti font awesome, sehingga ini menjadi lebih ringan.
Sebelumnya saya sudah membuat postingan tentang ikon external link ini, namun menggunakan font awesome dan menggunakan pseudeo element
:before sehingga tampilan ikon external link-nya tidak bagus ketika linknya 2 baris atau lebih dan baris terakhir tidah penuh.Dan kali ini kita akan menggunakan pseudeo element
:after untuk menampilkan ikon external link ini seperti pada demo berikut.Dan pada tutorial ini, kita juga menghilangkan ikon untuk gambar postingan yang menggunakan link dan caption.
Bagi yang ingin mencobanya silahkan ikuti langkahnya di bawah ini.
Silahkan simpan style berikut ini di atas kode
</head>
<b:if cond='data:blog.pageType == "item"'>
<style>
/*<![CDATA[*/
.post-body a[href^="http://"]:after,
.post-body a[href^="https://"]:after {
content: '';
background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23e8554e' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
background-size: 14px 14px;
width: 14px;
height: 14px;
display: inline-block;
margin-left: 3px;
vertical-align: -2px
}
.post-body .tr-caption-container a:after,
.post-body .separator a:after,
.post-body a[href^="http://www.kompiajaib.com/"]:after,
.post-body a[href^="https://www.kompiajaib.com/"]:after {
display: none;
}
/*]]>*/
</style>
</b:if>
Untuk kode
e8554e adalah untuk warna ikon, silahkan sesuaikan dengan warna link-nya. Kode http://www.kompiajaib.com/ dan https://www.kompiajaib.com/ silahkan ganti dengan URL blog Anda.Selesai... mudah bukan?
Selamat mencoba.