Membuat Ikon Untuk Link External Menggunakan SVG dan Font Awesome

IwanBlog.com - Ikon 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.

 
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.

Namun dalam artikel ini saya akan modifikasi sedikit agar bisa menggunakan Font Awesome, ini akan memudahkan kamu memilih sesuai dengan kebutuhan blog kamu, karena jika kamu sudah menggunakan Font Awesome, tentu saja sangat disayangkan jika tetap memaksa menggunakan SVG, lebih baik tetap menggunakan Ikon Font Awesome.

Memulai Memasang Di Blog (SVG)

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^="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.Iwanblog.com/"]:after, 
.post-body a[href^="https://www.Iwanblog.com/"]:after, 
.post-body a[href^="https://www.blogger.com/profile/02208884577430079104"]:after, 
.post-body a[href^="https://www.facebook.com/sharer.php?u="]:after, 
.post-body a[href^="https://www.facebook.com/Iwanblog"]:after,
.post-body a[href^="https://www.instagram.com/iwancompnani"]:after, 
.post-body a[href^="https://twitter.com/iw_n"]:after, 
.post-body a[href^="https://www.youtube.com/channel/UCp8O7eKqhQsfzIJ0WeUKufA"]:after, 
.post-body a[href^="https://twitter.com/share?url="]:after, 
.post-body a[href^="https://wa.me/?text="]:after, 
.post-body a[href^="https://www.linkedin.com"]:after, 
.post-body a[href^="https://pinterest.com/pin/create/button/?url="]:after, 
.post-body a[href=""]:after, .post-body a[href='/']:after, .post-body a[href^='.']:after, .post-body a[href^='/']:not([href^='//']):after, .post-body a[href^='#']:after, .post-body a[href^='?']:after, .post-body a[href^='javascript:']: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.Iwanblog.com/ dan https://www.Iwanblog.com/ dengan url blog kamu sendiri, karena itu yang akan kita larang menggunakan Icon external ini.
• Terakhir sesuaikan juga https://www.blogger.com/profile/02208884577430079104 dengan alamat url google+ yang kamu gunakan untuk profile pada blog kamu.
• Dan sisanya yang tidak saya sebutkan itu perlu kamu sesuaikan dengan tombol share yang kamu gunakan, karena nanti Ikon Link External ini akan muncul juga disana, jadi perlu disesuaikan, di script diatas sebagai contohnya.

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

Menyesuiakan yang menggunakan Font Awesome

Untuk kamu yang ingin menggunakan Font Awesome seperti blog saya ini, kamu bisa mengganti CSS berikut ini :

.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
}

Ganti dengan kode berikut ini yang sudah di sesuaikan agar bisa menggunakan Font Awesome (sebagai contoh di blog ini) sudah menggunakan Link External yang menggunakan Font Awesome.

.post-body a[href^="http://"]:after, .post-body a[href^="https://"]:after {
    content: '\f08e';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: $(body.link.color);
    display: inline-block;
    margin-left: 6px;
}

Sisanya sama saja, namun perlu kamu sesuaikan seperti yang saya katakan tadi. Selamat mencoba.

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