Memodifikasi Tampilan Label Clouds di Blog

Template Simple WHY kemarin baru saja saya update, salah satu yang saya update adalah memodifikasi tampilan widget Tag Clouds atau Label Clouds menjadi berwarna.

Sebenarnya kode css yang saya gunakan untuk memodifikasi tampilan Label Clouds tersebut saya ambil dari template Evo Magz buatan Mas Sugeng.

Memodifikasi Tampilan Label Clouds di Blog

Tampilan gambar di atas adalah contoh tampilan modifikasi label clouds pada template Evo Magz. Untuk memodifikasinya memang sangat mudah sekali, Anda hanya perlu menambahkan sedikit kode CSS.

Jika Anda ingin memodifikasi tampilan label clouds seperti pada gambar di atas, silahkan letakkan kode CSS berikut ini di atas kode ]]></b:skin> atau </style>

.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
}

Setelah itu simpan template. Selanjutnya jika Anda belum menambahkan widget Label Clouds, silahkan tambahkan terlebih dahulu dengan masuk ke Tata Letak > Tambah Gadget > Kemudian pilih Label. Ganti Daftar menjadi Cloud,  seperti gambar di bawah ini.

Memodifikasi Tampilan Label Clouds di Blog

Setelah itu klik “Simpan” dan lihat hasilnya. Dan jika Anda baru menambahkan widget label tersebut di blog, jangan lupa untuk menghilangkan ikon quickedit (ikon tang dan obeng) dari widget tersebut agar dapat mengurangi error pada validasi html5.

Sekian cara memodifikasi tampilan label clouds di blog, Semoga bermanfaat.

Leave a Reply