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

0 Response to "Membuat Ikon Untuk Link External Menggunakan SVG"

Post a Comment

Silahkan berkomentar sesuai topik pada Artikel ini, komentar akan saya balas ketika saya sedang tidak ada kesibukan lainnya.

Note : Jangan lupa untuk mengaktifikan centang Notify me pada kolom komentar, agar kamu mendapat notifikasi balasan dari saya langsung Via Email. Tks

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel