Membuat Gambar Berputar dan Membesar Saat Disentuh Mouse

Belajar blog memang tidak akan pernah ada akhirnya, karena akan ada banyak lagi ilmu baru, apalagi untuk mempercantik tampilan blog. Blog yang ringan, sederhana dan memiliki informasi yang dibutuhkan banyak orang maka blog tersebut akan diminati semua orang dan memiliki banyak pengunjung. Saya juga ingin mempunyai blog yang seperti itu, walaupun saya pemula dan tampilan serta isi di blog saya masih banyak kekurangannya. Udah ah basa-basinya ya sobat (hehehehe )

Mungkin sobat semua pernah menjumpai di blog / website yang gambar didalam postingannya bisa berputar dan membesar jika disentuh mouse kan. Jika belum pernah melihat, maka coba sobat arahkan mouse ke gambar diatas, maka gambar tersebut akan berputar dan membesar. Pada postingan kali ini saya akan berbagi ilmu tentang cara membuat gambar berputar dan membesar saat disentuh oleh mouse. Dan langkah-langkahnya dapat Anda lihat di bawah :

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Setelah masuk dashboard blog sobat, pilih menu Template
3. Kemudian pilih menu Edit HTML

4. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

5. Sobat cari kode </head>

6. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

<style>#fawaiq 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;} #fawaiq img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

7. Dan sobat klik save / simpan template.

8. Langkah selanjutnya untuk penempatan gambar dalam postingan.

Sobat harus menambahkan kode  <div id="fawaiq"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini :

<div id="fawaiq">
<a href="http://mohnurfawaiq.blogspot.com"><img src="http://4.bp.blogspot.com/-iZJIZ24cdus/URTWmh3BQuI/AAAAAAAAAhY/5_Uxdgeo
_r4/s320/fawaiqblog.jpg"></a></div>

Keterangan :
a. Kode berwarna merah adalah kode pembuka dan penutup.
b. Kode berwarna hijau silakan sobat ganti dengan URL blog sobat dan URL gambar yang ingin sobat pasang dalam postingan.

9. Setelah semua selesai klik Publikasikan

10. Coba lihat postingan sobat, dan arahkan mouse ke gambar maka gambar tersebut akan berputar dan membesar

11. Jika berhasil alhamdulillah, jika belum berhasil jangan putus asa, ulangi lagi sampai bisa dan baca langkah-langkahnya dengan teliti

Demikianlah tips "Membuat Gambar Berputar dan Membesar Saat Disentuh Mouse" 

Semoga bermanfaat untuk sobat, kalau masih bingung silakan ditanyakan dan berkomentar.

Related Posts:

Tweet