Cara Membuat Label Cloud Keren di Blogger

Label adalah widget blogspot yang berguna untuk menampilkan label apa saja yang ada pada blog tersebut. Blogger menyediakan widget label dengan dua mode yaitu list (daftar) dan cloud. Tetapi desain bawaannya masih belum keren.

Cara Membuat Label Cloud Keren di Blogger. Dokumen Pribadi

Kali ini saya akan membagikan tutorial blogger tentang cara membuat label cloud yang keren. Jadi untuk mendesain ulang label cloud agar terlihat lebih menarik dan elegan. Untuk itu simak tutorial ini baik - baik.

Buat Atau Tambahkan Widget Label

Untuk membuatnya silakan pergi ke Tata Letak > Tambakan Gadget > Label. Jangan lupa untuk mengubah mode penampilan ke Cloud dan centang Jumlah post per label. Lihat gambar berikut.

Memasang dan Konfigurasi Widget Label (klik gambar untuk ukuran penuh). Dokumen Pribadi

Pasang Kode CSS Untuk Desain Label Cloud Keren

Pergi ke Tema > Edit HTML. Setelah itu pasang kode CSS berikut sebelum tag </style> atau </b:skin>.

/* cloud label widget by mbaguszulmi */
.label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 {
font-size: 100%;
opacity: 10;
}
.cloud-label-widget-content {text-align: left}
.label-size {
background-color: #56b8e2;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #ffffff;
font-size: 11px;
text-transform: uppercase;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.label-size a, .label-size span {
display: inline-block;
color: #ffffff!important;
padding: 6px 8px;
font-weight: bold;
}
.label-size:hover {background-color: #333333}
.label-size:hover .label-count {background-color: #56b8e2}
.label-size:hover .label-count:before {border-right: 6px solid #56b8e2}
.label-count {
position: relative;
white-space: nowrap;
padding-right: 3px;
margin-left: -2.5px;
background-color: #333333;
}
.label-count:before {
content: "";
width: 0;
height: 0;
border: 0 solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-right: 6px solid #333333;
position: absolute;
top: 8px;
left: -6px;
}

Setelah itu simpan dan lihat widgetnya di blog Anda.

Terimakasih telah berkunjung di Blog Pencari Ilmu. Semoga artikel ini bermanfaat dan jangan lupa share ke teman - teman kalian agar lebih bermanfaat.

https://sekolahblogger.net/index.php?threads/cara-membuat-label-kategori-keren-di-blog-lengkap.74/