Menambahkan icon SVG Pada External Link
Hallo semua, selamat datang kembali di blog sederhana ini! Gimana kabarnya? semoga selalu diberi kesehatan ya. Setelah libur beberapa hari, saya memutuskan untuk kembali menulis.
Seperti yang saya bilang sebelumnya, jika blog ini tidak memposting beberapa hari. Karena sang penulis atau pemilik blog lagi patah hati sebab terus-terusan di tolak AdSense tanpa memeberitahu detail kesalahannya dimana.
Dari situ saya mencoba mengupdate kembali artikel yang telah saya update sebelumnya. jujur terkadang artikel yang saya tulis gak sepenuhnya murni dari pikiran saya sendiri, terkadang ada beberapa referensi dari blog lainnya.
Waduh... jadi curhat😅
Masuk ke intinya, pada halaman ini saya akan membagikan cara menambahkan icon SVG pada external link di blogger, berikut tampilannya:
Contoh : Kunjungi blog Media903
Jika kamu tertarik menambahkannya juga, langsung aja yuk simak langkah-langkahnya:
Cara Menambahkan icon SVG pada Direct Link
Buka dashboard blogger > tema > edit html lalu salin css dibawah ini dan letakan diatas kode ]]</b:skin> atau </style> dan simpan.
.extLink{display:inline-flex;align-items:center}
.post .extLink:after{content:''; width:16px;height:16px; display:inline-block;margin-left:5px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>") center / 16px no-repeat} .post .extLink.alt:after{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3'/>
<line x1='8' y1='12' x2='16' y2='12'/></svg>")}
Cara ubah Warna dan Penerapan
Jika ingin mengubah warna icon ganti kode 989b9f dengan kode warna yang kalian inginkan. dan untuk menampilkannya pada postingan silahkan salin kode dibawah ini.
<a class="extLink" href="url disini">Tuliskan teks</a>
Sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Dan baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.
Post a Comment