-->

Halo !!! Saya Kang Ismet, ini adalah blog tentang AMP HTML dan cara penerapannya

Modifikasi Popular Post Pada Blog Part II

POPULAR POST SPINNING HOVER

POPULAR POST

DEMO


Pada postingan saya Tiga minggu yang lalu,saya sudah membahas tentang Cara modifikasi Popular post Template Galery, Dan Bagi teman yang Blum tau Atau ingin mencoba,bisa Baca Artikelnya di sini.
Dan untuk pada kesempatan kali ini masih membahas tentang popular post,tapi dengan Model yang berbeda.. di mana kita akan membuat popular post dengan Efek Gambar melayang-layang.( Spinning hover)

Bagi Teman2 yang Berminat dengan popular post yang satu ini,berikut adalah cara penerapannya :

  • Masuk ke Blogger sobat
  • Pilih menu template Kemudian
  • Edit HTML dan jangan lupa centang Expand template widget
  • Cari kode ]]></b:skin> dengan menggunakan CTRL F
  • Jika sudah ketemu,Copy kode dibawah ini Tepat di atas kode ]]></b:skin>
#PopularPosts1 {max-width: 100%}
#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);}
  • Jika sudah. Simpan template sobat.

LANGKAH SELANJUTNYA ADALAH :
  1. Pilih menu Tata Letak Kemudian
  2. Add Gadget, pilih ENTRI POPULER, seperti gambar di bawah :

POPULAR POST

9 komentar: