Membuat Efek dengan CSS3 di Widget Label Cloud Blogger

• Login : Login ke Blogger.
  • Tuliskan Alamat Email
  • Tuliskan Password
  • KLIK Login.
• Setelah halaman Dasboard terbuka, klik Design/Rancangan.
• Sesaat setelah anda klik, maka akan terbuka Page Elemen/Elemen Laman. Silahkan klik Add a Gadget (yang bergaris putus-putus) di bagian sidebar kanan atau kiri.
• Selanjutnya akan terlihat beberapa widget yang disediakan blogger, seperti Stats, Popular Posts, Archive serta beberapa yang lain termasuk Label.
• Silahkan klik "Label". Tunggu hingga pilihan bentuk widget muncul.
• Akan terlihat pilihan
  Tampilkan : Daftar dan Cloud. Beri tanda/pilih Cloud.
• KLIK SAVE/Simpan.
• Buka blog dan lihat serta coba hasilnya.

• Jika pada langkah di atas, setelah Design/Rancangan anda klik Add a Gadget, maka untuk merubah tampilan tag cloud yang anda klik adalah "Edit HTML".
• Sesaat setelah klik Edit HTML akan terlihat deretan Kode CSS dan xHTML penyusun blog.
• Lakukan back-up Template terlebih dahulu dengan klik "Download Template Lengkap/Download Full Template. Simpan file template anda. File template ini bisa anda gunakan kembali bila diinginkan dengan klik Choose File-Unggah. Selain itu back-up template berfungsi untuk menjaga bila terjadi kesalahan saat modifikasi blog hingga template bisa dipulihkan seperti sebelumnya (Choose File-Unggah).
• Cari kode ]]></bskin>. Gunakan Ctrl+F. Jika membutuhkan tutorial cara mencari kode, silahkan klik di sini!
• Copy-paste kode CSS di atas ]]></bskin>.
• KLIK SAVE Templates/Simpan Template kemudian buka blog untuk membandingkan hasil perubahan yang dilakukan.

.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:blue;
       color:white;
       text-decoration:none;
       text-shadow:1px 1px 1px #000;
       border:1px dotted red;
       opacity:1.0;    
       border-radius:3px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      -o-transform:scale(1.2);
      -moz-transform:scale(1.2);
      -webkit-transform:scale(1.2);
}

• Desain baru ini akan bekerja secara maksimal di browser pendukung CSS3 terutama Opera dan Mozilla.
• Anda dapat merubah color dan background supaya lebih pas dengan blog anda.
• Bila anda ingin melihat demonya silahkan klik link di bawah ini. Lihat pada "Labels Cloud" di ujung bawah sebelah kanan!