Latest News

Membuat Ikon Untuk Link External Menggunakan SVG

IwanBerbagi.com - Icon Ini antara penting gak penting sih menurut saya, namun cukup membuat tampilan link external pada artikel kita menjadi lebih menarik dan tentunya menjadi lebih keren juga. Untuk demo kamu bisa mengunjungi artikel saya Disini.
Membuat Ikon Untuk Link External Menggunakan SVG
Pada artikel kali ini saya mengadopsi artikel yang dibagikan oleh KompiAjaib, dan sudah saya modifikasi sedikit menyesuaikan masukan dari kang Taufik dari Dte. Dengan menggunakan icon SVG dan hanya menggunakan CSS tentunya lebih ringan daripada menggunakan font-awesome.

Memulai Memasang Di Blog

Kamu bisa menyimpan kode berikut ini dibawah kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; sesuaikan dengan template yang kamu gunakan.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* EKSTERNAL LINK ICON */
.post-body a[href^=&amp;quot;http://&amp;quot;]:after,
.post-body a[href^=&amp;quot;https://&amp;quot;]:after {
  content: &amp;#39;&amp;#39;;
  background: url(&amp;quot;data:image/svg+xml;charset=utf8,%3csvg viewBox=&amp;#39;0 0 24 24&amp;#39; width=&amp;#39;16&amp;#39; height=&amp;#39;16&amp;#39; xmlns=&amp;#39;http://www.w3.org/2000/svg&amp;#39; xmlns:xlink=&amp;#39;http://www.w3.org/1999/xlink&amp;#39;%3e%3cg%3e%3cpath style=&amp;#39;fill:%232e9fff&amp;#39; d=&amp;#39;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&amp;#39;%3e%3c/path%3e%3c/g%3e%3c/svg%3e&amp;quot;) 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^=&amp;quot;http://www.iwanberbagi.com/&amp;quot;]:after,
.post-body a[href^=&amp;quot;https://www.iwanberbagi.com/&amp;quot;]:after,
.post-body a[href^=&amp;quot;https://plus.google.com/105049049334876067289&amp;quot;]:after,
.post-body a[href^=&amp;#39;.&amp;#39;]:after,
.post-body a[href^=&amp;#39;/&amp;#39;]:not([href^=&amp;#39;//&amp;#39;]):after,
.post-body a[href^=&amp;#39;#&amp;#39;]:after,
.post-body a[href^=&amp;#39;?&amp;#39;]:after,
.post-body a[href^=&amp;#39;javascript:&amp;#39;]:after {display:none}
</style>
</b:if>
Setelah itu sesuaikan beberapa hal berikut ini :
  • Kode warna 2e9fff sesuaikan dengan warna yang kamu inginkan, atau warna dasar pada blog kamu, atau kalau gak mau ribet kamu bisa menggantinya menjadi currentColor agar otomatis menyesuaikan dengan dasar warna blog kamu.
  • Ganti juga http://www.iwanberbagi.com/ dan https://www.iwanberbagi.com/ dengan url blog kamu sendiri, karena itu yang akan kita larang menggunakan Icon external ini.
  • Terakhir sesuaikan juga https://plus.google.com/105049049334876067289 dengan alamat url google+ yang kamu gunakan untuk profile pada blog kamu.
Setelah itu jangan lupa untuk klik Simpan Tema dan lihat hasilnya. Untuk penjelasan lebih lanjut dan permasalahan bisa dibahas dikomentar saja, selamat mencoba.
Credit : https://www.kompiajaib.com/2018/01/membuat-ikon-external-link-menggunakan.html
Disqus CommentsLoadHide
Silahkan berkomentar sesuai topik pada Artikel ini, komentar akan saya balas ketika saya sedang tidak ada kesibukan lainnya.

Note : Blog ini menggunakan komentar disqus, jadi jika kamu belum mempunyai akun disqus kamu bisa dengan mudah mendaftarkannya disini, dan bisa segera kita saling berdiskusi. Tks