Tutorial Blog iRFaaN aRiZaL BlogSpot 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 iRFaaN aRiZaL BlogSpot bisa menggunakan cara yang digunakan pada postingan Memasang Efek Zoom Pada Image atau dapat menggunakan cara yang akan Master Chef sampaikan kali ini. dari pada bingung langsung saja kita bahas resep Tutorial Blog soal tentang Cara Membuat Efek Gambar Berputar dan Ngezoom Di Blog.
Caranya sangat mudah sobat Blogger iRFaaN aRiZaL BlogSpot bisa menggunakan cara yang digunakan pada postingan Memasang Efek Zoom Pada Image atau dapat menggunakan cara yang akan Master Chef sampaikan kali ini. dari pada bingung langsung saja kita bahas resep Tutorial Blog soal tentang 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);}
- .Jangan Lupa Untuk Mengklik Save Template atau Simpan Template
- Selesai dan Lihat Hasilnya.
0 komentar:
Posting Komentar