Label Cloud Warna Warni

Label cloud warna warni sangat menarik karena warnanya yang colorfull. Sering kita lihat banyak efek css untuk label cloud, but karena ukurannya jadi terlihat tebal dan ga cucok buat label yang banyak. Lebih indah jika warna hanya terdapat pada nama label.

Berikut cara membuat label cloud warna warni:

1. Login blog > temlate > edit html

2. ctrl+f cari kode ]]></b:skin>

3. Letakkan kode css label di atas ]]></b:skin>

.label-size-1 a {
font-size: 13px;
text-decoration: none;
color:#B3FA9D;
}
.label-size-2 a {
font-size: 15px;
text-decoration: none;
color:#F79DFA;
}
.label-size-3 a {
font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
color:#FAD29D;
}
.label-size-4 a {
font-size: 18px;
text-decoration: none;
color:#9DFAE9;
}
.label-size-5 a {
font-size: 23px;
text-decoration: none;
color:#ECFA9D;
}
.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover { text-decoration:underline;}

kode warna dapa di ubah sesuai keinginan.

4. Simpan template

5. pada layout label di setting seperti berikut

 jika tidak work saat anda selesai melakukan langkah di atas, cek css label.

ctrl + F cari kode css label yang berada di atas ]]></b:skin>, misal anda menemukan kode cs label:

.label-size a{background:#222;border:1px solid #000;box-shadow:2px 2px 0 0 rgba(51,51,51,1)inset;color:#fff;float:left;font-size:12px;text-decoration:none;margin:0 5px 5px 0;padding:10px}
.label-size a:hover{background-color:#111;text-decoration:none;transition:all .2s ease-out 0s}

delete aja kode css label yang lama, kemudian simpan lagi. 

Demikian tutorial blog cara membuat label cloud warna warni. Semoga bermanfaat.