Kustomisasi Widget Label dengan Badge di Blogger

Widget label dapat membantu pengunjung mencari artikel yang terkait dengan nama label tertentu, tentunya ini memanjakan pengunjung agar lebih betah berselancar apalagi kalau tampilannya menarik.
Oke, disini saya akan bagikan tentang kustomisasi widget label di Blogger.
Tapi, perlu diingat, saya tidak akan membagikan sebuah artikel langsung jadi atau bisa dibilang 'tinggal pakai', yang saya bagikan hanyalah Tata Cara dan Pemahamannya agar kamu bisa semakin paham dan bisa melakukannya sendiri.
Ada dua cara yang saya bagikan disini, berikut penjelasannya..

NOTE:

Pastikan kamu sudah menambahkan widget label di blog. Caranya;

1. Masuk ke Blogger
2. Sebelumnya backup template terlebih dahulu untuk menghindari kesalahan.
3. Klik tab Layout / Tata Letak
4. Klik Add Gadget / Tambahkan Gadget ditempat manapun yang kamu mau.
5. Pilih label (klik tanda "+"), lalu Simpan
6. Klik tombol Save Changes / Simpan Perubahan.

DEMO

DEMO

Demo diatas hanyalah dasarnya saja, kamu bisa kuatomisasi sesuai dengan keinginan.

STYLE 1

#LANGKAH 1 - EDIT WIDGET

1. Pilih tab Template, lalu klik tombol Edit HTML
2. Cari kode <b:widget id='Label1', cara cepat klik pada kolom HTML Editor dan tekan CTRL+F pada keyboard. Ketikkan code tadi.
3. Kamu akan menemukan deretan kode widget label kira-kira seperti ini;

HTML Widget Label

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>

• Kode diatas memiliki tag <ul> yang artinya adalah bahwa widget label memiliki tipe list / daftar.
• Tambahkan atribut class='' didalam tag tersebut, contoh <ul class='mylabel'>.
• Dibawahnya terdapat kode <span dir='ltr'>(<data:label.count/>)</span>, ini untuk menampilkan jumlah post atau artikel yang memiliki label tersebut (badge), tambahkan class='' dan hapus tanda ( dan ) (untuk menghapus text "()"). Contoh <span class='mybadge' dir='ltr'><data:label.count/></span>.
• Dibawahnya lagi terdapat kode <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>, ini berfungsi untuk memperbesar/memperkecil text label berdasarkan jumlah post yang dimiliki sebuah label. Misalkan salah satu label memiliki jumlah post lebih banyak dari label lainnya, maka text label akan lebih besar dibandingkan label lain. Tapi karena akan dibuat model tombol, hapus kode tersebut dan jangan lupa hapus pula tag penutupnya yaitu </span> yang ada dibawahnya (tepat diatas </b:loop>).
• Ubah posisi </b:if> yang ada dibawah <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>, pindahkan tepat diatas </b:loop>, dan pindahkan tag penutup </a> tepat dibawah </b:if> pertama, jangan lupa hapus juga tanda ( dan ) serta ganti class='label-count' menjadi class='mybadge'. Ini dilakukan agar badge masuk dalam tag <a>, sehingga saat anchor diubah ke mode button, badge tidak ada diluar.
• Ubah anchor menjadi mode tombol, tambahkan atribut role='button' dan tambahkan class='' untuk memberi polesan pada tombol, contoh <a role='button class='mylabel-button' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>. Kenapa tidak memakai tag <button>? Sebenarnya bisa pakai tag <button<, tapi itu tidak valid, validator akan menampilkan pesan error dan/atau warning.
• Setelah selesai, maka seharusnya akan tampil seperti dibawah ini;

HTML Widget Label

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul class='mylabel'>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='mybadge' dir='ltr'><data:label.count/></span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a role='button' class='mylabel-button' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='mybadge' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</a>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>

#LANGKAH 2 - MENAMBAHKAN CSS

Dari langkah pertama kita sudah membuat selektor CSS dengan menambahkan class, dan selektornya adalah mylabel, mybadge dan mylabel-button. Tugas selanjutnya adalah menambahkan CSS, tempatkan diatas ]]></b:skin>.
Untuk class ditulis dengan diawali titik (.). Lihat contoh dibawah;

CSS

/* Untuk model daftar */
ul.mylabel {
list-style-type: none; /* Untuk menghapus bullet */
padding: 0;
margin: 0;
}

ul.mylabel li {
padding: 10px 2px 10px 16px;
border-bottom: 1px solid #ddd;
transition: background-color 0.4s ease-in-out; /* Transisi background agar lebih halus saat hover */
-webkit-transition: background-color 0.4s ease-in-out;
}

ul.mylabel li:hover, ul.mylabel li a:hover {
text-decoration: none; /* Untuk menghapus underline pada teks saat hover */
background-color: #eee;
}

ul.mylabel li a {
text-decoration: none; /* Untuk menghapus underline pada link label */
color: #333;
}

ul.mylabel li:last-child {
border-bottom: none; /* Untuk menghapus border pada item terakhir */
}

.mybadge {
font-size: 14px;
background-color: #444;
color: #fff;
display: inline-block;
margin-left: 10px; /* Pemisah jarak antara teks label dan badge */
padding-left: 8px;
padding-right: 8px;
text-align: center;
border-radius: 50%; /* Agar background badge nenjadi bulat */
float: right !important; /* Untuk posisi selalu dikanan */
}

/* Model tombol saat label diubah ke Cloud */
.label-button {
float: left; /* Agar tombol berjejer ke kiri */
margin: 5px; /* Jarak antara tombol */
border: none;
border-radius: 4px; /* Untuk efek bulat pada sudut tombol */
display: inline-block; /* Agar tombol berjejer dalam satu baris */
outline: 0;
padding: 6px 16px; /* Jarak antara teks label dengan tepi */
vertical-align: middle;
overflow: hidden;
text-decoration: none !important;
color: #333; /* Warna teks */
background-color: #ddd; /* Warna tombol */
text-align: center;
cursor: pointer;
white-space: nowrap;
-webkit-transition: background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
transition: background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
}

a.label-button, a.label-button:hover {
color: #333;
}

.label-button:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); /* Untuk menampilkan efek bayangan saat hover */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#LANGKAH 3 - SAVE AND PREVIEW

Coba simpan atau preview dahulu!
Untuk style ini hanya bisa digunakan pada widget label yang sudah diedit, kalau kamu menambahkan widget label kedua, maka kamu harus mengulangi cara diatas dan kalau kamu ingin menambahkan dengan gaya berbeda, ubah selektor / nama class yang berbeda.

STYLE 2

Untuk style ini, kamu gak perlu edit HTML widget, yang kamu perlukan hanya menambahkan CSS. Tapi, apabila kamu menambahkan widget label kedua, maka tampilannya akan sama. Dan ini hanya berlaku untuk label cloud saja.
Perhatikan CSS berikut dan sesuaikan dengan keinginan, tempatkan diatas ]]></b:skin>.

CSS

.label-size {
margin: 0 2px 6px 0;
padding: 3px;
border: solid 1px #C6C6C6;
border-radius: 3px;
float: left;
text-decoration: none;
font-size: 10px;
color: #666;
}

.label-size: hover {
border: 1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.label-size a {
float: left;
text-decoration: none;
}

.label-size a: hover {
text-decoration: none;
}

.label-count {
float: right !important;
margin-left: 5px;
margin-right: 5px;
display: inline-block;
}

Sekarang, giliran kamu berekspresi! Sesuaikan dengan keinginan, mulai dari background, border, dsb.
Happy blogging .. 😉

_________________________
featured image source: css-tricks.com