Skip to main content
KOMPI AJAIB

follow us

Membuat Ikon External Link Menggunakan SVG

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 == &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://www.kompiajaib.com/"]:after {
  content: '';
  background: 0 0;
  width: 0;
  height: 0;
  margin-left: 0
}
/*]]>*/
</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.

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