Skip to main content
Website Mini

follow us

Cara Membuat Ikon External Link menggunakan Ikon SVG

Cara Membuat Ikon External Link menggunakan Ikon SVG, ikon external link, external link ikon dengan svg.

Setelah beberapa hari yang lalu saya posting Website Mini AMP Blogger Template. Kali ini saya akan coba posting Cara Membuat Ikon External Link Menggunakan Ikon SVG.

Ikon external link adalah ikon yang di samping link keluar seperti pada gambar di atas. Ikon external link ini kita menggunakan Ikon SVG, sehingga tidak memerlukan font icon seperti font awesome, jadi ini akan menjadi lebih ringan.

Disini kita akan menggunakan pseudeo element :after untuk menampilkan ikon external link ini. Dan kita juga menghilangkan ikon untuk gambar postingan yang menggunakan link dan caption.
Baca juga: Menggunakan Icon SVG Sebagai Pengganti Font Awesome Untuk Icon Blog

Jika Anda ingin Membuat Ikon External Link menggunakan Ikon SVG ini di blog Anda, mari kita ikuti caranya seperti 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.websitemini.net/"]:after,
.post-body a[href^="https://www.websitemini.net/"]: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. Ganti juga URL http://www.websitemini.net/ dan https://www.websitemini.net/ dengan URL blog Anda.

Selesai...

Sumber : https://www.kompiajaib.com/2018/01/membuat-ikon-external-link-menggunakan.html

You Might Also Like:

Buka Komentar