Membuat Ikon External Link Memakai Svg

Ada beberapa sahabat Kompi Ajaib yang menanyakan bagaimana caranya menciptakan ikon external link yang dipakai di blog Kompi Ajaib ini.

Ikon external link di blog Kompi Ajaib ini memakai ikon SVG sehingga tidak memerlukan font icon menyerupai font awesome, sehingga ini menjadi lebih ringan.

Sebelumnya aku sudah menciptakan postingan perihal ikon external link ini, namun memakai font awesome dan memakai pseudeo element :before sehingga tampilan ikon external link-nya tidak manis saat linknya 2 baris atau lebih dan baris terakhir tidah penuh.

Dan kali ini kita akan memakai pseudeo element :after untuk menampilkan ikon external link ini menyerupai pada demo berikut.


Dan pada tutorial ini, kita juga menghilangkan ikon untuk gambar postingan yang memakai link dan caption.

Bagi yang ingin mencobanya silahkan ikuti langkahnya di bawah ini.

Silahkan simpan style berikut ini di atas aba-aba </head>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <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://komporajaibku.blogspot.com/"]:after {
   content: '';
   background: 0 0;
   width: 0;
   height: 0;
   margin-left: 0
 }
 /*]]>*/
 </style>
 </b:if>

Untuk aba-aba e8554e ialah untuk warna ikon, silahkan sesuaikan dengan warna link-nya. Kode http://www.kompiajaib.com/ dan https://komporajaibku.blogspot.com/ silahkan ganti dengan URL blog Anda.

Selesai... gampang bukan?

Selamat mencoba.


Sumber https://www.kompiajaib.com/

Share this post