Pehawe Official

Home
Blogger

Cara Mudah Membuat Ikon External Link Menggunakan Ikon SVG

Membuat Ikon External Link Menggunakan Ikon SVG - Di tutorial blogger sebelumnya sudah saya bagikan bagaimana cara membuat Cara Membuat Gradasi Teks Dengan CSS untuk mempercantik tampilan teks di blog, dan untuk tutorial blog kali ini akan saya bagikan sebuah Cara Mudah Membuat Ikon External Link Menggunakan Ikon SVG di blog yang tentunya akan mempercantik tampilan link eksternal dengan tanda ikon di samping link eksternal tersebut.
Membuat Ikon External Link Menggunakan Ikon SVG - Di tutorial blogger sebelumnya sudah saya bagikan bagaimana cara membuat Cara Membuat Gradasi Teks Dengan CSS untuk mempercantik tampilan teks di blog, dan untuk tutorial blog kali ini akan saya bagikan sebuah Cara Mudah Membuat Ikon External Link Menggunakan Ikon SVG di blog yang tentunya akan mempercantik tampilan link eksternal dengan tanda ikon di samping link eksternal tersebut.

Jika sebelumnya kalian menggunakan font awesome, maka saya sarankan untuk menggantinya dengan menggunakan ikon SVG. Karena ikon yang di buat menggunakan font awesome ini akan menampilkan ikon external pada caption gambar yang ada di postingan maupun halaman blog, dan tentunya hal tersebut akan membuat tampilan posting halaman blog kita tidak enak di pandang.

Untuk kalian yang masih ragu untuk menerapkan Ikon External Link Menggunakan Ikon SVG atau penasaran seperti apakah tampilan dengan ikon yang di hasilkan menggunakan ikon svg ini bisa langsung kalian cek contoh link eksternal menuju facebook fanspage pehawe berikut ini :
Fanspage Pehawe Official

Sangat menarik bukan? Nah, untuk kalian yang ingin menerapkan ikon SVG ini sebagai penanda link eksternal di blog kalian, silahkan ikuti tutorial singkat berikut :

Membuat Ikon External Link Menggunakan Ikon SVG

Silahkan login ke Blogger > Template > Edit HTML
Selanjutnya silahkan letakkan style berikut ini dan simpan diatas (sebelum) kode </head>

&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;

&lt;style&gt;

/*&lt;![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:%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.pehawe.me/"]:after,
.post-body a[href^="https://www.pehawe.me/"]:after {
  content: '';

  background: 0 0;

  width: 0;

  height: 0;

  margin-left: 0

}

/*]]&gt;*/

&lt;/style&gt;

&lt;/b:if&gt;

Untuk mengubah warna ikon, silahkan ganti kode e8554e dengan kode warna yang kalian inginkan. Kode http://www.pehawe.me/ dan https://www.pehawe.me/ merupakan link/tautan blog kalian yang akan di filter untuk tidak menampilkan ikon SVG nantinya.

Itulah Cara Mudah Membuat Ikon External Link Menggunakan Ikon SVG yang dapat saya bagikan kali ini, jika ada hal yang ingin ditanyakan, silahkan tinggal komentar mengenai tips blogger kali ini.

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