Membuat icon Link External dengan SVG icon

Membuat icon Link External dengan SVG icon - Pernah lihat penampakan link eksternal di situs-situs google seperti gambar diatas? Link eksternal adalah sebuah link yang akan mengarahkan kita pada situs lain, baik ke beranda atau ke halaman tertentu dari situs tersebut.

Awalnya Osa tidak terlalu ingin memperhatikan tampilan dari link eksternal, namun Osa sering mengintip support google dan menemukan tampilan yang eye-catching banget. Dan kembali mendapati hal yang menarik di blog favorit, kompiajaib. 

Mas Adhy membuat postingan tentang link eksternal ini dengan menggunakan SVG icon. Icon kesukaan Osa banget karena basednya dari Inkscape. Hehehe.

Sobat juga bisa menerapkan icon link eksternal ini di template blog sobat sendiri. Agar terlihat lebih elegan 

Simpan style dibawah 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:%23F62459' 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.obiyshinichiart.com/"]:after,
.post-body a[href^="https://www.obiyshinichiart.com/"]:after {
  content: '';
  background: 0 0;
  width: 0;
  height: 0;
  margin-left: 0
}
/*]]>*/
</style>
</b:if>

Sobat ganti kode F62459 untuk warna iconnya sesuai keinginan sobat. Dan 2 link www.obiyshinichiart.com ganti juga dengan link blog sobat.

Save dan lihat hasilnya. Semoga bermanfaat.

Wassalam.

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