Hello sobat ICloudzer kali inj admin bakalan menjabarkan mengenai cara membuat border icon svg di blogger
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Border Icon
Apa itu border Icon? border betarti pembatas atau yang membatasi atau juga yang melingkupi sedangkan icon dalam hal ini adalah SVG atau kode SVG, jika website anda tidak menggunakan SVG sebagai Icon anda, mungkin kode pembuat border icon ini tidak bisa anda terapkan ke dalam website anda
Pure CSS
Untuk membuat atau menambahkan border Icon pada SVG adalah dengan menggunakan kode CSS saja alias pure kode yang di gunakan cuma kode CSS, sehingga hal tersebut tidak membuat performa website anda menjadi lambat arau terganggu kerena pemuatan kode yang berlebihan
Contoh Tampilan
Baiklah agar tidak penasaran lagi nih mengenai border icon pada kode svg bagaimana, silahkan klik tombol di bawah uni untuk memeriksa nya
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak
Cara pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai cara membuat border icon oada kode SVG di blogger silahkan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini
- Silahkan login ke blogger menggunakan akun google anda
- Kemudian silahkan pergi ke menu Theme atau Tema kemudian pilih menu Edit HTML
- Jika sudah silahkan salin kode CSS di bawah ini, kemudian taruh di atas kode ]]></b:skin>
- Selanjutnya untuk menampilkan nya pada icon SVG nya silahkan tambahkan class rahBrdI untuk mengurung SVG nya, atau jika bingung silahkan lihat contoh kode berikut ini
- Jika di rasa sudah silahkan simpan template anda dan lihat bagaimana hasilnya, semoga bermanfaat
/* border Icon custom by ICloudice.com */
.rahBrdI{width:35px;height:35px;border:1px solid #353535;border-radius:12px;padding:5px}
/* Ubah class sesuai dark mode template anda */
.drK .rahBrdI{border:1px solid #fefefe}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
<div class='rahBrdI'>
<!-- kode SVG -->
<svg class='line' viewBox='0 0 24 24'><path class='svgC' d='M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z'/><path d='M20.5899 22C20.5899 18.13 16.7399 15 11.9999 15C7.25991 15 3.40991 18.13 3.40991 22'/></svg>
<!-- kode SVG selesai -->
</div>
/* Alternatif kode lainnya jika terdapat lebih dari satu class kode */
<label class='rahBrdI tIc bIc' expr:aria-label='data:item' for='searchIn' onclick='vibRate(53)'>
<!-- kode SVG -->
<svg class='line' viewBox='0 0 24 24'><path class='svgC' d='M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z'/><path d='M20.5899 22C20.5899 18.13 16.7399 15 11.9999 15C7.25991 15 3.40991 18.13 3.40991 22'/></svg>
<!-- kode SVG selesai -->
</label>Info: Pelajari kode HTML di atas dengan benar, jika tidak mengerti juga jangan segan untuk bertanya ke admin atau ke komunitas, klik disini jika anda belum bergabung