Menambahkan Efek Spinning(berputar) pada Gambar Popular Post
efek spinning(gambar yang berputar) pada popular post adalah salah satu cara untuk membuat blog kita tampil lebih menarik bagi para pengunjung agar mereka bisa berlama-lama untuk membaca postingan sambil memainkan efek spinningnya. Tertarik dengan efek spinning ini?
[demonya silahkan dicoba sendiri pada gambar popular post blog ini]
berikut langkah-langkahnya:
- masuk ke dashboard blogger
- pilih template
- pilih edit HTML
- centang Expand Template Widget
- gunakan Ctrl+F kemudian cari kode script berikut: ]]></b:skin>
- kemudian salin(copy-paste) script dibawah ini diatasnya
#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);}
0 Response to "Menambahkan Efek Spinning(berputar) pada Gambar Popular Post"
Post a Comment