Modifikasi Tampilan Widget Label Blogger

Widget label ialah salah satu widget rekomendasi dari blogger yang sangat berkhasiat untuk navigasi. Namun, Kita semua tahu bahwa widget label dari blogger tidak terlalu elok tampilannya, untuk alasan ini aku merekomendasikan beberapa label cloud widget unik dengan tampilan yang sangat menarik dan terperinci pengunjung Blog Anda akan menyukainya. Salah satu laba dari memakai CSS Widget Label Cloud ini ialah penggunaan instruksi CSS murni sehingga tidak akan menghambat waktu loading pada Blog Anda. Di sisi lain, gaya yang ditampilkan sanggup 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 menyerupai tampilan dibawah ini, kemudian klik Simpan.

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

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

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

7. Klik Save/Simpan.

Berikut Beberapa Tampilan widget label yang sanggup 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}