Cara agar Gambar Berputar Dan Membesar Di Blog

Posted by : Leo Kresna Kamis, 10 Oktober 2013

Sahabat blog kali ini masih berhubungan dengan Tutorial Blogspot sebelumnya tetang Cara Memasang Efek Zoom Pada Image Saat Diarahkan Kursor Mouse, Namun Bahasan kali ini berbeda karena kita akan membuat gambar di blog tidak hanya memiliki efek zoom tetapi kita akan membuat gambar tersebut berputar ketika kursor mouse diatas gambar tersebut.

Caranya sangat mudah sobat Blogger bisa menggunakan cara yang digunakan pada postingan Memasang Efek Zoom Pada Image atau dapat menggunakan cara yang akan Sahabat Blog sampaikan kali ini. dari pada bingung langsung saja kita bahas resep Tutorial Blog soal tetang Cara Membuat Efek Gambar Berputar dan Ngezoom Di Blog.

Seperti pada umumnya langkah pertama yang harus dilakukan adalah login ke akun blogger masing-masing
Jika sudah login, Silahkan masuk kehalaman Edit HTML (Baca : Cara Mengakses Halaman Edit HTML Blogspot)
Jangan Lupa Untuk Backup Template Lengkap terlebih dahulu untuk mengantisifasi kesalahan saat edit HTML ( Baca : Cara Back-Up dan Upload Template Blogger)
Jika sudah berada pada halaman Edit HTML, Silahkan Temukan Kode ]]></b:skin> (Gunkan Tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
Setelah kode Ditemukan Copy kode berikut ini :

.post .post-body img{margin:5px; padding:5px; border:1px solid #e0e0e0; -o-transition: all 0.5s; -moz-transition:all 0.5s; -webkit-transition: all 0.5s;} .post .post-body img:hover{-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}