Membuat Gambar Berputar Pada Postingan Blog

Selamat siang para sahabat blogger, dan semua sahabat CG, bagi anda yang membaca postingan ini pastinya ingin menjadikan “Gambar di blog anda berputar” ketika tersorot kursor komputer,  nah kali ini Catatan Google ingin berbagi trik dan tutorial blog tentang “membuat gambar berputar pada postingan blog”.

Sebelum ke tutorialnya, sedikit ulasan bahwa efek gambar berputar pada 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.

A. Gambar Berputar Pada Semua 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{-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}}

<!--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 berputar. 

B. Gambar Berputar Pada Postingan Tertentu Pada 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{-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}} 

</style>   

4. Kemudian simpan atau terbitkan postingan anda, alhasil gambar otomatis akan berputar.

Related Posts by Categories