Cara Merubah Widget Label Menjadi Warna Warni Keren

sipemalas.com - Label atau kategori merupakan widget yang cukup penting untuk di tampilkan di blog , dengan ada nya widget ini pengunjung akan lebih mudah mencari artikel sesuai topik yang di inginkan. Widget label ini biasanya di tempatkan di sidebar sebelah kanan , karna menurut saya widget lebih di kanan akan lebih enak di lihat , agar widget label ini lebih menarik dan memukau pengunjung sebaiknya di ganti dengan yang lebih mencolok warnanya. Pada artikel tutorial blog ini saya akan share cara merubah widget label menjadi warna warni agar terlihat lebih keren.

Cara Merubah Widget Label Menjadi Warna Warni Keren

Pilih Widget Label Cloud atau Daftar ?

Widget label atau kategori di blogger ini ada 2 tipe, yang pertama yaitu tipe daftar dan yang ke dua tipe cloud ( kotak ) . Jika ada pertanyaan bagusan mana versi cloud atau daftar ? keduanya mempunyai  fungsi yang sama , saya sarankan kalau di sidebar masih punya ruang banyak lebih baik pakai label tipe daftar kalau ruang sidebar sudah penuh gunakan label tipe cloud .

Di artikel ini saya akan share css untuk 2 tipe label cloud dan daftar , temanya masih sama yaitu warna warni dengan warna yang keren dan populer di tahun ini. Yuk gulir kebawah untuk melihat tutorial cara merubah widget label menjadi warna warni.

Baca Juga : Kumpulan CSS Blockquote Keren Untuk Blog

Cara Merubah Widget Label Daftar Menjadi Warna Warni

1. Masuk ke Dashbord Blogger
2. Pilih Tata Letak > Tambah Widget atau Edit Label jika sudah ada
3. Pilih tipe daftar , seperti gambar dibawah ini.

4. Selanjutnya Pindah ke menu Template > Edit Template
5. Cari Kode </head>
6. Masukan script di Bawah ini tepat di atas kode </head>

<style type='text/css'>
/* CSS label */
#sidebar-wrapper .Label li{position:relative;background:#fff;border-bottom: 1px solid #bbb;color:#444;padding:0;margin:0;text-align:left;width:100%;font-size:90%;transition:all .3s ease-out}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
#sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
#sidebar-wrapper .label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;border-radius:2px;}
</style>

Hasilnya nanti akan telihat seperti gif di bawah ini , tampilan keren dengan effect, hover.

Tampilan Menggunakan Jumlah Entri Perlabel

Tampilan Tanpa Jumlah Entri Perlabel

Cara Merubah Widget Label Cloud Menjadi Warna Warni

1. Masuk ke Dashbord Blogger
2. Pilih Tata Letak > Tambah Widget atau Edit Label jika sudah ada
3. Pilih tipe cloud , seperti gambar dibawah ini.

4. Selanjutnya Pindah ke menu Template > Edit Template
5. Cari Kode ]]></b:skin>
6. Masukan script di Bawah ini tepat di atas kode ]]></b:skin>

kalau label sebelumnya sudah menggunakan css , cari script css nya lalu ganti dengan css yang dibawah ini.

/* CSS Label Cloud Warna Warni */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
 font-size:100%;
 filter:alpha(100);
 opacity:10
}
.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) {
background: #F53477;
}
.label-size:nth-child(2) {
background: #89C237;
}
.label-size:nth-child(3) {
background: #44CCF2;
}
.label-size:nth-child(4) {
background: #01ACE2;
}
.label-size:nth-child(5) {
background: #94368E;
}
.label-size:nth-child(6) {
background: #A51A5D;
}
.label-size:nth-child(7) {
background: #555;
}
.label-size:nth-child(8) {
background: #f2a261;
}
.label-size:nth-child(9) {
background: #00ff80;
}
.label-size:nth-child(10) {
background: #b8870b;
}
.label-size:nth-child(11) {
background: #99cc33;
}
.label-size:nth-child(12) {
background: #ffff00;
}
.label-size:nth-child(13) {
background: #40dece;
}
.label-size:nth-child(14) {
background: #ff6347;
}
.label-size:nth-child(15) {
background: #f0e68d;
}
.label-size:nth-child(16) {
background: #7fffd2;
}
.label-size:nth-child(17) {
background: #7a68ed;
}
.label-size:nth-child(18) {
background: #ff1491;
}
.label-size:nth-child(19) {
background: #698c23;
}
.label-size:nth-child(20) {
background: #00ff00;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}

Hasilnya nanti akan telihat seperti gambar di bawah ini.

Tampilan Tanpa Jumlah Entri Perlabel

Tampilan Menggunakan Jumlah Entri Perlabel

Sekian tutorial blogging Cara Merubah Widget Label Menjadi Warna Warni Keren ini , jika mengalami kegagalan atau tidak ada perubahan bisa berkomentar di bawah , nanti inshaallah saya bisa bantu memecahkan masalahnya.