Membuat Ikon Untuk Link External Memakai Svg

Icon Ini antara penting gak penting sih berdasarkan saya, namun cukup menciptakan tampilan link external pada artikel kita menjadi lebih menarik dan tentunya menjadi lebih keren juga. Untuk demo kau dapat mengunjungi artikel aku Disini.

Pada artikel kali ini aku mengadopsi artikel yang dibagikan oleh KompiAjaib, dan sudah aku modifikasi sedikit menyesuaikan masukan dari kang Taufik dari Dte. Dengan memakai icon SVG dan hanya memakai CSS tentunya lebih ringan daripada memakai font-awesome.

Memulai Memasang Di Blog

Kamu dapat menyimpan isyarat berikut ini dibawah isyarat </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; sesuaikan dengan template yang kau 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://androwidtech.blogspot.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 kau inginkan, atau warna dasar pada blog kamu, atau jikalau gak mau ribet kau dapat menggantinya menjadi currentColor semoga otomatis menyesuaikan dengan dasar warna blog kamu.
• Ganti juga http://www.iwanberbagi.com/ dan https://androwidtech.blogspot.com dengan url blog kau sendiri, sebab itu yang akan kita larang memakai Icon external ini.
• Terakhir sesuaikan juga https://plus.google.com/105049049334876067289 dengan alamat url google+ yang kau gunakan untuk profile pada blog kamu.

Setelah itu jangan lupa untuk klik Simpan Tema dan lihat hasilnya. Untuk klarifikasi lebih lanjut dan permasalahan dapat dibahas dikomentar saja, selamat mencoba.

Credit : https://androwidtech.blogspot.com/search?q=liquid-remix-os-custom-rom-oreo-810

Bagikan Artikel ini