Menambahkan Efek ini adalah efek yang berputar dan dilengkapi dengan efek bayangan. Efek ini muncul jika kursor diarahkan pada gambar Widget Popular Post, seperti efek gambar saya. Widget ini juga mudah dipasang, tidak membutuhkan waktu yang lama untuk memasangnya. Efek ini Cocok untuk dipasang agar bisa menghiasi Widget popular post. Untuk Memasangnya Anda Perlu Mengedit Template HTML anda, Ikutilah Cara Berikut ini :
- Silahkan Login Ke Blogger Anda.
- Setalah itu, Klik Menu Template, Sebelum Mengedit Terlebih Dahulu Untuk Membackup Template Anda, Lalu Klik Tombol Edit HTML.
- Cari Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
- Masukan Kode Berikut ini diatas kode ]]></b:skin> :
/*-----Efek Berputar Dan Bayangan by YBB (http://your-belajarblog.blogspot.com)----*/
#PopularPosts1 { max-width: 300px}
#PopularPosts1 dd { float: left; border-bottom: none; margin: 8px 8px 0 8px; background: none; display: block; padding: 0}
#PopularPosts1 img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
- Setelah itu, Klik Tombol Simpan Template.
Selamat Mencoba,
Salam Sukses,
Your-BelajarBLOG
makasih informasinya.. saya akan coba praktekan
ReplyDeleteIyah Sama-Sama,
DeleteSilahkan Dicoba,
Salam Sukses,
Your-BelajarBLOG
mantap gan.. gan, mau request boleh ngga? saya au request cara buat icon "read more" berputar. kaya dipreview blog ini contohnya http://animenarutouniqx.blogspot.com/. plis bantu gan
DeleteIyah,
DeleteNanti Lain Waktu Saya Tuliskan Tutorialnya.
Salam Sukses,
Your-BelajarBLOG
Sudah Kami Buatkan Tutorialnya,
DeleteSilahkan Lihat Tutorialnya:
http://your-belajarblog.blogspot.com/2013/04/cara-membuat-auto-read-more-berputar.html .
Selamat Mencoba,
Your-BelajarBLOG