Membuat Gambar Berputar 360 Derajat di Postingan Blog

Sebelum ke tutorialnya, sedikit ulasan bahwa Efek gambar berputar pada blog bisa dilakukan dengan 2 cara, yaitu:
  • Pertama : gambar berputar pada semua postingan blog,
  • Kedua : gambar berputar pada postingan tertentu.  Catatan Google mau mulai dari yang pertama.
Untuk yang Pertama
1. Masuk ke 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 ]]></b:skin>

<!-- 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 agan akan berputar 360 derajat.
7. Jika agan menggunakan cara yang pertama ini, walapun kita menggunakan read more, pada halaman depan blog gambar akan tetap berputar.


Untuk yang ke Dua.
Bagi agan yang mau membuat efek gambar berputar pada postingan tertentu di blog agan, 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. Save dan lihat hasilnya.

Semoga bermanfaat.

Posting Komentar (0)
Lebih baru Lebih lama