Membuat Label Cloud Colorful pada Blog

Baca Juga

Pada kesempatan kali ini Saya akan berbagi sedikit tips tentang cara memasang label cloud colorful.

Seperti yang kita tahu, tampilan label cloud bawaan blogger terlihat cukup membosankan dengan warna putih polos dan teks hitam. Nah disini Saya akan mencoba untuk mengubah tampilannya menjadi colorful dan terlihat fresh tentunya.

Berikut cara pemasangannya :

Catatan : Sebelumnya Sobat harus menghapus terlebih dahulu kode CSS untuk label di template.

Pertama Sobat harus menambahkan widget label di blog

Buka Blogger > Tata Letak > Tambahkan Gadget > Lalu tambahkan widget Label > Setting Label dengan Tampilan Cloud.
Kemudian Simpan.

Selanjutnya, buka Template > Edit HTML > Lalu pastekan kode CSS di bawah ini tepat diatas ]]></b:skin>

<!-- Label color -->
.sidebar .label-size {
position:relative;
text-transform:uppercase;
text-decoration:none;
font-size:10px;
font-family:Arial;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
transition: all 0.4s ease-in-out;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

<!-- Label color end -->

Dan langkah terakhir, simpan pekerjaan anda lalu lihat hasilnya yang nampak pada blog sodara. Semoga postingan ini bermanfaat bagi pembaca dan sobat blogger semua.