Cara Gampang Menciptakan Ikon External Link Memakai Ikon Svg

Membuat Ikon External Link Menggunakan Ikon SVG - Di tutorial blogger sebelumnya sudah aku bagikan bagaimana cara menciptakan Cara Membuat Gradasi Teks Dengan CSS untuk mempercantik tampilan teks di blog, dan untuk tutorial blog kali ini akan aku bagikan sebuah Cara Praktis 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 memakai font awesome, maka aku sarankan untuk menggantinya dengan memakai ikon SVG. Karena ikon yang di buat memakai font awesome ini akan menampilkan ikon external pada caption gambar yang ada di postingan maupun halaman blog, dan tentunya hal tersebut akan menciptakan tampilan posting halaman blog kita tidak yummy di pandang.

Untuk kalian yang masih ragu untuk menerapkan Ikon External Link Menggunakan Ikon SVG atau ingin tau menyerupai apakah tampilan dengan ikon yang di hasilkan memakai ikon svg ini sanggup pribadi kalian cek teladan link eksternal menuju facebook fanspage pehawe berikut ini :
Fanspage

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) isyarat </head>

<b:if cond='data:blog.pageType == "item"'> <style> /*<![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.Info Material APK/"]:after, .post-body a[href^="https://info.materialapk.com"]:after {   content: '';   background: 0 0;   width: 0;   height: 0;   margin-left: 0 } /*]]>*/ </style> </b:if>

Untuk mengubah warna ikon, silahkan ganti kode e8554e dengan isyarat warna yang kalian inginkan. Kode http://www.Info Material APK/ dan https://info.materialapk.com merupakan link/tautan blog kalian yang akan di filter untuk tidak menampilkan ikon SVG nantinya.

Itulah Cara Praktis Membuat Ikon External Link Menggunakan Ikon SVG yang sanggup aku bagikan kali ini, bila ada hal yang ingin ditanyakan, silahkan tinggal komentar mengenai tips blogger kali ini.

Source : https://info.materialapk.com/search?q=cara-membuat-gradasi-teks-dengan-css

Share this post