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.
Silahkan dicoba,
Salam Blogger.
