Modifikasi Tampilan Widget Label Blogger

Widget label adalah salah satu widget rekomendasi dari blogger yang sangat berguna untuk navigasi. Namun, Kita semua tahu bahwa widget label dari blogger tidak terlalu bagus tampilannya, untuk alasan ini saya merekomendasikan beberapa label cloud widget unik dengan tampilan yang sangat menarik dan jelas pengunjung Blog Anda akan menyukainya. Salah satu keuntungan dari menggunakan CSS Widget Label Cloud ini adalah penggunaan kode CSS murni sehingga tidak akan menghambat waktu loading pada Blog Anda. Di sisi lain, gaya yang ditampilkan dapat menarik perhatian pengunjung. Untuk menambahkan widget ini silahkan ikuti langkah-langkah sederhana dari bawah ini-

1. Login ke blog Anda.

2. Silahkan pilih Layout > Add a Widget > Label .

3. Setelah itu setting widget label seperti tampilan dibawah ini, lalu klik Simpan.

4. Jika sudah, silahkan menuju ke Template > Edit HTML .

5. Cari kode ]]></b:skin> atau </style> .

6. Bila sudah ketemu, silahkan pilih tampilan widget label yang Anda inginkan lalu simpan kode CSS-nya diatas kode ]]></b:skin> atau </style> .

7. Klik Save/Simpan.

Berikut Beberapa Tampilan widget label yang bisa Anda gunakan.

Tampilan CSS Widget Label 1

/* cloud label http://wajahilmu.blogspot.com*/
.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:#0dd7b4;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase}
.label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold}
.label-size:hover{background:#333333}
.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important}
.label-size{line-height:1.2}

Tampilan CSS Widget Label 2

/* cloud label http://wajahilmu.blogspot.com*/
.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{border-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase}
.label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold}
.label-size:hover{border-radius:30px;background:#333333}
.label-count{white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important}
.label-size{line-height:1.2}

Tampilan CSS Widget Label 3

/* cloud label http://wajahilmu.blogspot.com*/
.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{border:5px dashed #000000;border-bottom-right-radius:30px;border-top-left-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase}
.label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold}
.label-size:hover{border:5px dashed #FA0830;background:#000000}
.label-count{white-space:nowrap;border-bottom-right-radius:30px;border-top-left-radius:30px;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important}
.label-size{line-height:1.2}

Tampilan CSS Widget Label 4

/* cloud label http://wajahilmu.blogspot.com*/
.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{border:8px inset #0572F8;background:#0572F8;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase}
.label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold}
.label-size:hover{background:#000000}
.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important}
.label-size{line-height:1.2}

Tampilan CSS Widget Label 5

/* cloud label http://wajahilmu.blogspot.com*/
.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:#08A2FA;border-radius:30px;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase}
.label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold}
.label-size:hover{background:#000000}
.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important}
.label-size{line-height:1.2}

Bagikan Artikel ini