Cara Membuat Efek Gambar Zoom Berputar Di Blog

Cara Membuat Efek Gambar Zoom Berputar Di Blog - Buat sobat yang suka browsing-browsing, saya yakin pernah ngeliat dan berkunjung ke blog orang lain, dan nyoba nyentuh gambar di artikel blog tersebut. Ternyata gambar di artikel tersebut bisa membesar dan berputar. Ini tutorial pengembangan dari Cara Membuat Gambar Membesar Saat Disentuh Kursor. Buat sobat yang sudah  baca pasti tau. Yang belum baca, kemungkinan sudah tau juga. ヽ(･∀･)ﾉ Yang dimaksud dengan pengembangan disini adalah, tutorial sebelumnya hanya bisa membesar atau zoom saat cursor blog menyentuh gambar. Nah, tapi untuk tutorial ini, tidak hanya membesar saat disentuh cursor blog, tapi, juga bisa berputar.

Nah, buat sobat yang belum tau, saya jelasin maksud dari tutorial ini. Namun, saya yakin sobat sudah tau dengan tutorial ini. Bisa dibilang tutorial ini tutorial pasaran dan banyak ditemui di google. Nah, tutorial ini menjelasakan, jika sobat sudah ikuti tutorial ini, coba aja kursor/pointer/tanda panah komputer sobat arahkan ke gambar, dan gambar tersebut akan membesar atau zoom dan juga berputar.

Contoh nya, coba arahkan cursor blog sobat pada gambar berikut ini:

Apa yang terjadi? Unik kan? Gambar diatas bisa berputar dan membesar saat cursor blog menyentuh gambar tersebut. Apakah sobat tertarik dengan tutorial ini? Mari kita simak:

1. Login Blogger

2. Klik template/rancangan

3. Edit HTML

4. Cari kode ]]></b:skin> (agar mempermudah pencarian, klik kolom Edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)

5. Setelah ketemu kode ]]></b:skin> copy kode dibawah ini, kemudian paste kan kode dibawah ini tepat diatas kode ]]></b:skin>

#fahmifanirius img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}

#fahmifanirius img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}

6. Simpan perubahan

Nah, setelah melakukan langkah diatas, masih ada langkah lagi. Ini adalah langkah dimana sobat harus sedikit paham dengan kode HTML. Buat yang masih awam banget dengan kode HTML, coba cermati kata-kata yang saya tulis.

Disini, saya akan jelasin cara menerapkan agar efek gambar zoom dan berputar di blog dapat berajalan. Lakukan hal ini postingan sobat. Jadi, setelah melakukan cara diatas, buka postingan sobat yang gambar nya akan dibuat zoom dan berputar.

Setelah dibuka, klik HTML. (Letak HTML berdampingan dengan Compose di pojok kanan atas)

Nah, disitu tempat kode HTML postingan sobat, sobat harus bisa mengeditnya.

Disini saya gunakan URL gambar yang ada diatas tadi. Jadi, setelah sobat klik HTML yang berdampingan dengan Compose, kemudian copy kode dibawah ini, kemudian paste kan kodenya didalam HTML

<div id="fahmifanirius">
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcBPIsqAwjSucHMdCKKuMa805oHvUcSguBGtqQzeenB5b3fR6Hffvbj_WFJeKR3UzxwdhXP9ohLjw-PMwbfom0lHUvGEu5tCH2ib-6NNcboWC-vqZWSowtWVPx6IBigIqauReARL-StEi/s1600/images.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcBPIsqAwjSucHMdCKKuMa805oHvUcSguBGtqQzeenB5b3fR6Hffvbj_WFJeKR3UzxwdhXP9ohLjw-PMwbfom0lHUvGEu5tCH2ib-6NNcboWC-vqZWSowtWVPx6IBigIqauReARL-StEi/s1600/images.png" height="200" width="200" /></a></div>

Jadi, sobat tinggal ganti yang tulisannya merah menjadi URL gambar sobat.

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi.  Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Efek Gambar Zoom Berputar Di Blog
Deskripsi	Cara Membuat Efek Gambar Zoom Berputar Di Blog, cara membuat efek gambar membesar dan berputar di blog
Author	Fahmi Fanirius
Author Rating	86%/ 100% Suara Dari 2902 votes