Widget Label Blogger Warna-warni

Artikel ini menunjukkan cara menerapkan CSS agar Label Blogger menjadi warna-warni. Hal ini tentu akan mempercantik tampilan widget label bl...

Artikel ini menunjukkan cara menerapkan CSS agar Label Blogger menjadi warna-warni. Hal ini tentu akan mempercantik tampilan widget label blogger. Label akan memiliki warna background berbeda pada setiap link label tergantung dari warna yang kita terapkan di dalam CSS. Contohnya dapat Anda lihat pada blog ini atau perhatikan screenshot berikut.

Bagaimana membuat background label warna-warni? Ikuti langkah-langkah sederhana berikut.

1. Masuk ke Dasboard Blogger Anda
2. Pilih Template
3. Kemudain Pilih Edit HTML
4. Salin CSS berikut dan letakkan diatas tag </b:skin> atau </style>:

.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:11px;
font-family:Oswald, Arial, Sans-Serif;
color:#fff!important;
}

.sidebar .label-size a {
color:#fff!important;
font-weight:300;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#006633;border-bottom:3px solid #003366;}
.sidebar .label-size-1 a:hover {background:#006666;}
.sidebar .label-size-2 a {background:#336600;border-bottom:3px solid #663300;}
.sidebar .label-size-2 a:hover {background:#666600;}
.sidebar .label-size-3 a {background:#660066;border-bottom:3px solid #330066;}
.sidebar .label-size-3 a:hover {background:#660033}
.sidebar .label-size-4 a {background:#009980;border-bottom:3px solid #006699;}
.sidebar .label-size-4 a:hover {background:#009933}
.sidebar .label-size-5 a {background:#14B1FF;border-bottom:3px solid #006699;}
.sidebar .label-size-5 a:hover {background:#008FD6}

CSS di atas hanya untuk blog yang memiliki label sedikit , jika label dalam blog Anda lebih banyak silahkan gunakan CSS berikut:

.cloud-label-widget-content {text-align: left;}
.label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F86D9E;}
.label-size:nth-child(2) {background: #37C371;}
.label-size:nth-child(3) {background: #10BBEA;}
.label-size:nth-child(4) {background: #25CBFE;}
.label-size:nth-child(5) {background: #963690;}
.label-size:nth-child(6) {background: #A3195C;}
.label-size:nth-child(7) {background: #545454;}
.label-size:nth-child(8) {background: #F2A15F;}
.label-size:nth-child(9) {background: #00FF80;}
.label-size:nth-child(10) {background: #B7860B;}
.label-size:nth-child(11) {background: #99CC33;}
.label-size:nth-child(12) {background: #FFFF3D;}
.label-size:nth-child(13) {background: #3FDECF;}
.label-size:nth-child(14) {background: #FF2F0A;}
.label-size:nth-child(15) {background: #E9DB58;}
.label-size:nth-child(16) {background: #42FFBD;}
.label-size:nth-child(17) {background: #6899ED;}
.label-size:nth-child(18) {background: #FF52AE;}
.label-size:nth-child(19) {background: #8DBC2F;}
.label-size:nth-child(20) {background: #80FF00;}
.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: #FF6BFF;
}

5. Simpan perubahan template Anda.
6. Kembali ke Dashboard blog.
7. Klik Layout > Add a Gadget > Labels
8. Berikutnya edit widget Label sehingga sama dengan berikut ini.

Intinya kita harus mempunyai widget Labels dan menambahkan CSS di atas agar label-nya warna-warni.

Selamat mencoba :)