Memodifikasi Tampilan Label-Size Pada Blog

S obat blogger, ketika kita mengunjungi sebuah blog pernah kita lihat ada kolom yang diberi nama LABEL dan biasa diletakan di Sidebar atau...

Sobat blogger, ketika kita mengunjungi sebuah blog pernah kita lihat ada kolom yang diberi nama LABEL dan biasa diletakan di Sidebar atau Footer area, label-size ini berfungsi sebagai salah satu navigator bagi pengunjung blog kita untuk mencari artikel dengan tags khusus, seperti Tutorial, Template, SEO, HTML, CSS dan sebagainya.
Label-size ini sangat bisa di modifikasi secara tampilan sob... nah masih ada hubunganya dengan template yang saya pake ini jika sobat ingin merubah tampilan label-size yang ada diblog sobat menjadi seperti yang ada di blog.

Memodifikasi Tampilan Label-Size Pada Blog

Label-size ini secara default bagi yang menggunakan flatform blogger biasanya sudah tersedia, tetapi tampilannya tentulah sama seperti widget bawaan lainnya sederhana saja, nah jika sobat ingin membuat tampilan label-size pada blog sobat menjadi "cantik", saya ada solusinya sob... masih berhubungan dengan template yang saya gunakan saat ini, tampilan label-sizenya agak sedikit berbeda dari biasanya, sebenarnya cara memodifikasi label-size seperti ini tidaklah sulit-sulit amat sob, jika sobat mengikuti langkah-langkah dibawah ini dengan benar dan teliti, sudah pasti dan saya jamin akan bisa dipasang diblog kesayangan sobat.

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Memodifikasi Tampilan Label-Size Pada Blog

Langkah Ke-1: Masuk ke menu Template>>Edit HTML Cari Kode Css Label-size bawan blogger pada template sobat jika sudah ketemu replace atau ganti saja dengan kode ini...

 /* CSS label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;}
.label-size {background:#fff;display:block;float:left;margin:0 2px 2px 0;
color:#666;font-size:11px;border:1px solid #eceeee;transition:.8s linear;}
.label-size a,.label-size span{display:inline-block;color:#666;padding:8px 10px;
font-weight:400;}
.label-size:hover {background:#ea5c35;}
.label-size a:hover {color:#fff!important;}
.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;
background:#e25756;color:#fff;transition:.8s linear;}
.label-count:hover {background:#ea5c35;color:#fff;}
.label-size {line-height:1.2}
#sidebar-wrapper .label-size{background:#ea5c35;color:#fff;border:1px solid #e25756;display:block;float:left;margin:0 2px 2px 0;font-size:11px;transition:all 0.6s linear;}
#sidebar-wrapper .label-size a:hover {background:#23292b;color:#fff;transition:all 0.3s linear;}
#sidebar-wrapper .label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#fff;transition:.3s linear;}
#sidebar-wrapper .label-size a:hover:before {content:"\f061";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#ea5c35;transition:.3s linear;}
#sidebar-wrapper .label-size a {display:inline-block;color:#fff;padding:8px 10px;
font-weight:400;transition:all 0.6s linear;}
#footer-wrapper .label-size{background:#ea5c35;color:#fff;border:1px solid #e25756;display:block;float:left;margin:0 2px 2px 0;font-size:11px;transition:all 0.6s linear;}
#footer-wrapper .label-size a {display:inline-block;color:#fff;padding:8px 10px;
font-weight:400;transition:all 0.6s linear;}
#footer-wrapper .label-size a:hover {background:#23292b;color:#fff;transition:all 0.3s linear;}
#footer-wrapper .label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#fff;transition:.3s linear;}
#footer-wrapper .label-size a:hover:before {content:"\f061";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#ea5c35;transition:.3s linear;}
#footer-wrapper .label-size:hover, #footer-wrapper-inner .label-size:hover{background:#23292b;color:#fff;border:1px solid #372f41;transition:all 0.3s linear;}
#footer-wrapper .label-count {white-space:nowrap;padding:3px;
background:#23292b;color:#fff!important;transition:all 0.2s linear;}
#Label1 span{float:right;background-color:#fafafa;color:#666;line-height:1.2;margin:0;padding:3px 5px;text-align:center;font-size:12px;transition:.3s linear;}
#Label1 span:hover{background-color:#ea5c35;color:#fff} 

Langkah Ke-2: Simpan template sobat, dan lihat hasilnya

SELESAI !

Oh ya satu lagi sob, sobat harus merubah konfigurasi tampilan label sobat dari Daftar menjadi Cloud, lihat screenshot.

Memodifikasi Tampilan Label-Size Pada Blog

Jika menemukan kendala silahkan tanyakan pada kolom komentar dibawah, terimakasih dan selamat mencoba.