Cara Membuat Icon Label Otomatis di Blog Menggunakan Icon SVG

www.azid45.web.id - Cara Membuat Icon Label Otomatis di Blog Menggunakan Icon SVG. Akhir - akhir ini saya melihat blog keren dengan keunggulannya masing-masing. Diantara keunggulan blog tersebut adalah Icon Label atau Kategori yang tampil otomatis mengikuti nama labelnya.

Tentunya hal tersebut menarik untuk dikaji, bagaimana caranya? dan apakah membutuhkan sebuah script khusus?. Mengenai icon otomatis di label ini saya pertama kali lihat pada blog Kurazone.net, igniel.com dan tukangredesign.com.

Dari hasil pencarian dan inpect ternyata untuk membuat icon kategori secara otomatis dapat saya simpulkan bisa menggunakan javascript dan tanpa javascript. Jika Anda tahu code b:css maka Anda bisa berkreasi sesuai keinginan Anda.

Baiklah disini saya akan share icon label otomatis dengan menggunakan icon SVG tanpa menggunakan javascript. Cukup dengan modifikasi kode CSS dan kode b:css yang di taruh di kode HTML.

Baca juga: Membuat darkmode di template Viomagz

Dari eksperiment ini saya menggunakan template viomagz versi 3.3 karena banyak yang menggunakannya. Baiklah untuk mempersingkat waktu, Anda bisa mengikuti tutorial Cara Membuat icon label secara otomatis di template Viomagz berikut ini:

Pertama, masuk Blogger

Kedua, menuju menu Tema - Edit HTML

Ketiga, cari kode CSS .label-info-th a. Kode ini ada dua, pilih saja yang kedua nanti Anda akan menemukan selector CSS padding: 8px 12px; jika sudah ketemu ganti dengan 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;
}

Ketiga, tetap pada kode CSS .label-info-tha a, letakkan kode CSS berikut ini tepat diatasnya

.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")}

Kurang lebih akan nampak seperti ini

.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;
}

KETERANGAN:

Lihat kode CSS dibawah ini

.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 merah Ada kode .islam adalah nama label. Sesuaikan dengan nama label Anda baik itu besar kecilnya.

warna ungu ada kode 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 adalah kode icon SVG. Anda bisa menyesuaikan icon tersebut dengan label.

Untuk mendapatkan kode ini Anda bisa ke tautan https://materialdesignicons.com. Klik aja icon yang diinginkan kemudian klik tanda </> dan pilih pilih View SVG dan terakhir cari kode d='xxxx'. Copas saja kode xxx nya kemudian ganti saja kode yang berwarna ungu.

warna orange ada kode 008080 adalah kode warna icon, ganti saja kode warnanya sesuai dengan keinginan Anda. Untuk mendapatkan kode warna Anda bisa menuju tautan https://www.w3schools.com/colors/colors_picker.asp

Keempat, jika Anda ingin menampilkan hanya satu label saja pada setiap tampilan postingan Home Page Anda bisa menambahkan kode CSS dibawah ini

.label-info-th a:not(:first-of-type){
display:none;
}

Jika tidak ingin, Anda bisa melewati langkah keempat ini

Kelima, cari kode <span class='label-info-th'> jika sudah ketemu tambahkan kode <b:class expr:name='data:label.name'/> tepat sebelum kode <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' rel='tag'>

Kurang lebih akan nampak seperti ini

  <div class='label-line'>
  <span class='label-info-th'>
  <b:loop values='data:post.labels' var='label'>
	<a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' rel='tag'><b:class expr:name='data:label.name'/><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
  </b:loop>
  </span>
  </div>

Keenam, Save Template

Demo

Bagaimana mudah bukan?, demikianlah tutorial terkait membuat icon label secara otomatis di template Viomagz 3.3. Semoga bermanfaat. Amin