Membuat Gambar Postingan Berputar dan Zoom di blog

Ahmad Fawzan Rohman Rabu, Agustus 01, 2012

Sebelumnya aq share cara membuat gambar di postingan berputar 360 derajat, dan untuk kali ini aq share membuat gambar dipostingan blog berputar dan membesar ketika kursor diarahkan, keren kan ? sedikit tambahan dari postinganku yang sebelumnya. bagaimana caranya ? silahkan ikuti caranya dibawah ini.

• Login dulu ke akun blogger anda. 
• Kemudian dari Dasbor, cari Template --> Edit HTML. 
• Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>. 
• Kemudian copas kode di bawah tepat di ATAS Code ]]></b:skin>.

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}

• Terakhir tinggal di save dan lihat hasilnya.

Gimana hasilnya? Silahkan tinggalkan komentar dibawah ini.

atau anda bisa meletakkannya pada kode a img, cari kode a img pada edit HTML, kode a img pada umumnya seperti kode berikut.

a img{border-width:0}

karna sebagian template berbeda, carilah kode yang mirip dengan kode diatas kemudian hapus kode tersebut dan gantikan dengan kode dibawah ini.

a img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}a img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}