Cara Membuat Icon Label Otomatis di Blog Menggunakan Icon SVG - Kali ini saya akan memberikan Tutorial Membuat icon label otomatis diblogger dengan menggunakan icon SVG, dengan cara tersebut membuat icon label kita akan menjadi keren loh disitus Nikamicode juga sudah menggunakan label ini, daan ini sudah dites ditemplate viomagz versi berapa saja dan hasilnya berhasil semua dan untuk template lain kamu bisa sesuaikan saja.
Metode Cara Membuat Icon Label Otomatis di Blog Menggunakan Icon SVG ini sangat mudah jika kamu menggunakan Template Viomagz karena kenapa ? karena kode yang akan kita cari semuanya ada ditemplate viomagz ini yang didesain Oleh Mas sugeng.id jadi tunggu apalagi ma ri kita lihhat Tutorialnya Dibawah ini dan Diperhatikan Cara cara Nya dengan baik ya agar Penerapan nya Berhasil.
Cara Membuat Icon Label Otomatis di Blog Menggunakan Icon SVG
.label-info-th a. Kodenya ada dua jadi kamu pilih aja yang paling akhir saja atau yang kedua yah dan nanti kamu akan menemukan Selector CSS Padding 8px 12px; jika sudah kamu temukan langkah selanjutnya adalah mengganti dengan CSS ini padding: 5px 10px 8px 0px; , Kurang lebih akan seperti ini..label-info-th a {
color: $(label.color);
background: $(label.bg.color);
display: inline-block;
/*padding: 8px 12px;*/
padding: 5px 10px 8px 0px;
margin: 1px 0;
font-size: 13px;
font-weight: 500;
}
.label-info-th a:before{
content:'';
min-width: 23px;
min-height: 23px;
background-position:center;
background-repeat:no-repeat;
background-size:20px;
vertical-align:-7px;
display:inline-block;
}
.label-info-th a:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5,19L8.34,12L3.5,5H14.5C15.17,5 15.72,5.3 16.13,5.86L20.5,12L16.13,18.14C15.72,18.7 15.17,19 14.5,19H3.5Z' fill='%23008080'/%3E%3C/svg%3E")}
.label-info-th a.Islam:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z' fill='%23008080'/%3E%3C/svg%3E")}
.label-info-th a:before{
content:'';
min-width: 23px;
min-height: 23px;
background-position:center;
background-repeat:no-repeat;
background-size:20px;
vertical-align:-7px;
display:inline-block;
}
.label-info-th a:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5,19L8.34,12L3.5,5H14.5C15.17,5 15.72,5.3 16.13,5.86L20.5,12L16.13,18.14C15.72,18.7 15.17,19 14.5,19H3.5Z' fill='%23008080'/%3E%3C/svg%3E")}
.label-info-th a.Islam:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z' fill='%23008080'/%3E%3C/svg%3E")}
.label-info-th a {
color: $(label.color);
background: $(label.bg.color);
display: inline-block;
/*padding: 8px 12px;*/
padding: 5px 10px 8px 0px;
margin: 1px 0;
font-size: 13px;
font-weight: 500;
}
Kamu Harus Tau?
.label-info-th a.Islam:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z' fill='%23008080'/%3E%3C/svg%3E")}
Lihat kode yang saya mark warna
warna Hijau Ada kode .islam adalah nama label. Sesuaikan dengan nama label Anda baik itu besar kecilnya. Jika ada Pertanyaan mengenai Tutorial Kali ini kamu bisa berikan komentar mu dibawah ini ya gaes.
