Membuat Gambar Berputar Dan Membesar Ketika Disentuh Mouse

Membuat Gambar Berputar Dan Membesar Ketika Disentuh Mouse - Ini tutorialnya sentuhan mouse pada gambar yang ada dalam postingan akan memberikan Efek Zoom, membesar dan berputar 360 derajad. Dan jika sentuhan mouse lepas dari gambar, maka gambar tersebut akan kembali seperti semula.
Untuk melihat efek sentuhan mouse pada gambar sebagaimana dimaksud dalam tutorial ini, sobat arahkan penunjuk mouse pada gambar disamping, maka akan terlihat efek yang terjadi pada gambar tersebut, yakni akan berputar 360 derajad disertai ukurannya membesar.. 


Adapun langkah-langkahnya adalah seperti berikut ini:
1. Login dulu di akun blog anda
2. Klik Template, dan pilih/klik Edit HTML dan lanjutkan
3. Anda cari kode </head> gunakan Ctrl F
5. Setelah ketemu anda copy paste code di bawah ini tepat di atas kode </head>

     <style>#oktri img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
    #oktri img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

   seperti taampak berikut:

6. Klik Save / simpan template.
Langkah selanjutnya untuk penempatan gambar dalam postingan.
1. Sobat harus menambahkan kode  <div id="oktri"> sebelum url gambar dan jangan lupa ditutup dengan kode </div> contoh seperti di bawah ini:

 <div id="oktri">
    <a href="http://memperindahblogku.blogspot.co.id/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD8J127p7yt4z6UVDgDKSvF6HBiIzaanlDFa5UmWohQyeAesf3za90Sr2f8HYZ5R01k1F_H98CUzaox5hA2TbgcR8XQABX3nkFOu3quUPwIdKspmLS47bJO9W3PDojbrwRHGXXz-Il7yZp/s200/Foto024.jpg" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna biru silahkan ganti dengan URL blog Anda dan URL gambar yang ingin Anda pasang di dalam postingan.
3. Jika sudah selesai klik Publikasikan. 
4. Lihat hasilnya.

Demikianlah tips "Membuat Gambar Berputar Dan Membesar Ketika Disentuh Mouse".
Semoga bermanfaat.

Artikel Terkait