Senin, 12 Desember 2011

Membuat Efek dengan CSS3 di Widget Label Cloud Blogger

Orang sering bilang bahwa keberbedaan itu membuat sesuatu menjadi indah. Keragaman berbagai sisi kehidupan, alam dan budaya juga membuat bangsa lain banyak tertarik terhadap bangsa kita. Oleh karena itu jika anda suka sesuatu yang tidak biasa atau berbeda dengan yang lain, dan anda salah satu yang selama ini menggunakan "widget Label Cloud Bawaan Blogger" atau mungkin ingin menggunakan tag cloud bawaan blogger-blogspot, satu perubahan menggunakan kode CSS3 akan membuat cloud sederhana ini terlihat berbeda dan lebih indah dari biasanya. Kita akan tambahkan beberapa efek baru berupa background-color, color, border serta animasi yang tercipta melalui CSS3 transition dan CSS3 transformation. Jadi ketika cursor menyentuh teks link di label cloud maka akan muncul sebuah background color secara perlahan. Bersamaan dengan itu maka terjadi pula perubahan color teks link sera munculnya border. Satu tambahan efek animasi yang tercipta dari CSS3 transition adalah bertambah besarnya teks link bersamaan dengan terlihatnya background, perubahan color dan border link. Cukup menarik dan aku kira cukup pantas untuk menghiasai blog anda.
Bagi yang belum menggunakan atau memanfaatkan widget label tag cloud bawaan blogger, anda bisa ikuti langkah berikut ini untuk memasangnya di blog.
  • 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.

Cara untuk memberi efek baru di widget label tag cloud

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

Kode CSS

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

Keterangan

  • 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!

DEMO NYA BISA ANDA LIHAT DI BLOG SAYA INI
di