Membuat Gambar Zoom Dan Berputar Pada Postingan Blog

Selamat berjumpa lagi para blogger dan sahabat CG, setelah kemaren kita membahas tentang cara  “Membuat Gambar Zoom Dan Berputar pada postingan blog” ketika tersorot oleh kursor komputer,  tapi pada kesempatan kali ini Catatan Google ingin berbagi trik dan tutorial blog tentang cara “Membuat Gambar Zoom Dan Berputar Pada Postingan Blog”.

Perlu di perhatikan dulu Sebelum ke tutorialnya, bahwa Membuat Gambar Zoom Dan Berputar Pada Postingan Blog bisa dilakukan dengan 2 cara, yang pertama : gambar berputar pada semua postingan blog, kedua : gambar berputar pada postingan tertentu.  Catatan Google mau mulai dari yang pertama. kita belajar  yuk.

A. Gambar Zoom Dan Berputar Pada Postingan Blog

1. Masuk akun blog sobat.

2. Pilih Rancangan, pilih Edit HTML

3. Cari kode seperti ini "  ]]></b:skin> "

4. Untuk mempercepat pencarian gunakan CTRL + F

5. kalau sudah ketemu, kemudian Paste-kan script berikut, tepat di atas kode yang di atas.

<!-- efek gambar berputar -->

.post img { background:#aaa; border-radius:px; -moz-border-radius:px; -webkit-border-radius:px; -o-transition:all 1.2s ease-out; -moz-transition:all 1.2s ease-out; -webkit-transition:all 1.2s ease-out; } .post img:hover { z-index:99; background:#993300; border-color:#00000; -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px); -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px); }

<!--sampai disini-->

6. Kemudian Simpan / Save. maka otomatis gambar pada blog anda akan berputar.

7. Jika anda menggunakan cara yang pertama ini, walapun kita menggunakan read more, pada halaman depan blog gambar akan tetap ngezoom dan berputar. 

B. Gambar Zoom Dan Berputar Pada Postingan Blog

Bagi anda yang mau membuat efek gambar berputar pada postingan tertentu di blog anda, langkahnya sebagai berikut :

1. Ketika anda memposting suatu artikel di blog, anda masuk ke HTML bukan Compose postingan

2. Copy Dan Pastekan Script berikut di paling bawah HTML pada postingan blog anda.

3. Ingat pastekan di bagian paling bawah HTML bukan Compose.

<style type="text/css">

.post img { background:#aaa; border-radius:px; -moz-border-radius:px; -webkit-border-radius:px; -o-transition:all 1.2s ease-out; -moz-transition:all 1.2s ease-out; -webkit-transition:all 1.2s ease-out; } .post img:hover { z-index:99; background:#993300; border-color:#00000; -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px); -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px); }

</style>   

4. Kemudian simpan atau terbitkan postingan anda, alhasil gambar otomatis Gambar Zoom Dan Berputar.

Contoh Gambar Yang Ngezoom Dan Berputar