Mengedit Widget Label Menjadi Warna-Warni

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Mengedit Widget Label Menjadi Warna-Warni, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, CSS, Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Widget label bewarna - warni memang saya yakin Anda lagi mencarinya, tapi diantara Anda semua tidak tahu dimana letak atau posisi postingan yang benar-benar asli dan bekerja tanpa adanya error. Kali ini saya akan membagikan tutorial tersebut, tutorial ini saya dapatkan dari blog Mas Tamvan.

Label cloud warna-warni ini memiliki efek yang sangat bagus dan elegan, lihat saja gambar di atas dengan efek hover yang sangat elegan menjadikan blog Anda menjadi bagus. Sebelumnya saya juga sudah membagikan tutorial membuat label menjadi warna-warni tapi saya tidak puas dengan tutorial tersebut karna masih ada yang kurang beberapa tampilan, dan kali ini saya menemukannya.

Baca juga : Cara Membuat Label Warna - Warni di Blog

Berikut ini adalah tutorial yang bisa Anda terapkan pada blog Anda jika Anda berminat memakai widget label warna-warni ini.

Membuat Label Warna-Warni Dengan Efek Hover

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda copy CSS di bawah ini dan Anda taruh di atas kode ]]></b:skin> atau </style>

/* CSS label */

.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}

.widget-content.cloud-label-widget-content {display:inline-block;}

.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;padding:10px;margin:10px 10px 5px 10px}

.label-count {white-space:nowrap;display:inline-block;}

#sidebar-wrapper .Label li{position:relative;background:#FFFEFC;color:#333;padding:0px;margin:5px;text-align:left;width:97%;transition:all .8s ease-out;text-transform:none;border:1px solid #fff;box-shadow:0px 0px 1px rgba(0,0,0,0.4);}

#sidebar-wrapper .Label li:hover {color:#0074D9;transition:all 0s ease-out;}

#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:98%;background:#4fafe9;transition:all .8s ease-in-out;}

#sidebar-wrapper .Label li:hover:before {width:100%;transition:all 0s ease-out}

#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:35px;color:#787878;text-decoration:none;transition:all .8s ease-out}

#sidebar-wrapper .Label li a:before {font-family: fontawesome;content: "\f07c";padding-right: 10px !important;}

#sidebar-wrapper .Label li a:hover {color:#fff;transition:all 0s ease-out}

#sidebar-wrapper .Label li span{float:right;height:98%;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;display:inline-block;color:#666;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}

#sidebar-wrapper .label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-5px;right:-10px!important;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:22px;line-height:22px;border-radius:4px;text-align:center;z-index:1;transition:all .3s}

#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;right:-15px!important}

#sidebar-wrapper .label-size a:hover{color:#666;border-color:#4fafe9}

.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}

Silakan Anda Save template Anda.

Sekarang adalah bagaimana cara penerapan atau pemasang widget label cloud warna-warni ini pada blog Anda, berikut caranya.

Langkah kedua :

Tata Letak > Tambahkan Gadget > Label. Lalu Anda ceklis pada bagian Tampilkan jumlah entri per label.

Silakan Anda lihat hasilnya, jika mengalami error sebaiknya Anda berkomentar di bawah ini.