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