Membuat Label Penuh Warna di Blog

Membuat Label Penuh Warna di Blog

Membuat Label Penuh Warna di Blog - Mungkin anda pernah melihat blog yang memunyai label yang warna-warni seperti pelangi,apakah anda pengen mencoba menerapkan pada blog anda? Pas sekali pada kesempatan kali ini saya akan mencoba memberikan tutorial bagaimana cara membuat label berwarna seperti pelangi, 

Baca: Membuat Artikel Popular Penuh Warna. 

Saya lihat pertama cloud label berwarna ini dari blog the-anarcytha. Untuk penampakan labelnya bisa lihat gambar dibawah ini:

Tutorialnya silahkan ikuti cara berikut:
1. Masuk Dashboard Blogger
2. Tambahkan Label Baca: Cara Menambah Label Blog ,abaikan jika sudah memasangnya dan beri ceklis di cloud pada display label
3. Langkah selanjutkan simpan kode CSS pada template , template > edit template dan letakkan di atas kode ]]></b:skin> atau </style>

/* cloudlabel pelangi*/
.label-size {
line-height: 1.1;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 5px;
text-transform: uppercase;
}
.label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 {
font-size: 100%;
opacity: 5;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 5px;
text-transform: uppercase;
}
.label-size-1 a {
background: rgba(155, 89, 182,1.0);
border-bottom: 1px solid rgba(142, 68, 173,1.0);
}
.label-size-2 a {
background: rgba(46, 204, 113,1.0);
border-bottom: 1px solid rgba(39, 174, 96,1.0);
}
.label-size-3 a {
background: rgba(52, 152, 219,1.0);
border-bottom: 1px solid rgba(41, 128, 185,1.0);
}
.label-size-4 a {
background: rgba(26, 188, 156,1.0);
border-bottom: 1px solid rgba(22, 160, 133,1.0);
}
.label-size-5 a {
background: rgba(231, 76, 60,1.0);
border-bottom: 1px solid rgba(192, 57, 43,1.0);
}
.label-size a:hover{
background:rgba(225, 225, 225,0.5);
}

4. Simpan Template

Mungkin ada yang bertanya,terus bagaimana cara membuat cloud label seperti blog ini? sebenarnya kalau anda sudah membeli template evomagz dari mas sugeng pasti anda akan dapat melihat kodenya, dan jika anda belum sempat beli saya akan memberikan kode untuk cloud label seperti yang evomag pakai. Untuk cara sama seperti langkah sebelumnya hanya saja kode css di atas ganti dengan kode css berikut:

Tambahan Kode CSS cloudlabel evomagz

/* cloudlabel */
.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:#E73037;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}

Silahkan edit sendiri warna dengan kesukaan anda,untuk warna lain silahkan bisa kunjungi halaman FlatUIColor

Semoga bermanfaat