0 Memodifikasi Label Cloud Dengan Sentuhan CSS3

Setelah kemarin saya posting mengenai Pasang Tag Cloud Label Animasi New Modif. Kali ini, kita akan memodifikasi Label Cloud dengan sedikit sentuhan CSS3. Untuk lebih jelasnya silahkan perhatikan gambar diatas.

Dan untuk membuatnya silahkan ikuti panduan dibawah ini:

1. Masuk Blogger.com
2. Pilih Rancangan
3. Pilih Edit HTML
4. Untuk berjaga-jaga barangkali ada kesalahan alangkah baiknya jika kamu membackup template kamu terlebih dahulu.
5. Kemudian cari kode yang mirip seperti dibawah ini :

]]></b:skin>

6. Lalu copy paste kode di bawah ini tepat di bawah kode diatas :

.cloud-label-widget-content span a{
background:transparent;
text-decoration:none;
text-shadow:1px 1px 1px transparent;
padding:2px 5px;
border:1px solid transparent;
opacity:0.7;
-o-transition:all 0.6s ease-in;
-moz-transition:all 0.6s ease-in;
-webkit-transition:all 0.6s ease-in;
}
.cloud-label-widget-content span:hover a{
background:green;
color:red;
text-decoration:none;
text-shadow:1px 1px 1px #000;
border:1px dotted green;
opacity:1.0;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-transform:scale(1.2);
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
}

5. Save Template anda

6. Beralihlah ke Elemen laman dan rubah Label anda menjadi Cloud jika sebelumnya masih berbentuk daftar.. Jika sudah Save dan lihat hasilnya......

* Silahkan sesuaikan Warnanya. sesuai keinginan anda....
7. Klik Pratinjau untuk melihat hasilnya.
8. Setelah berhasil tinggal klik simpan.