Membuat Gambar Berputar Dan Membesar Saat Disentuh Mouse

Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki kreasi tinggi akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Cukup demikian basa-basinya (heheheheheee.. ) mari kita menuju ke pokok pembahasan.

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar di samping ini, maka gambar akan berputar dan membesar. Apabila sobat berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. kelik "Format template" untuk menghindari apabila terjadi kesalahan
4. cari kode </head>
5. Setelah ketemu copy paste code di bawah ini tepat di atas kode </head>


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

6. dan klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

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

<div id="darkims">
<a href="http://indra-thedark.blogspot.com/"><img src="http://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash3/157156_100005685394559_697053044_n.jpg" /></a></div>

KETERANGAN:
kode berwarna merah adala kode pembuka dan penutup
kode berwarna hijau silakan  ganti dengan URL blog nya sobat dan URL gambar yang ingin lu pasang di dalam postingan.
Setelah semuanya selesai kelik publikasikan. 
Demikianlah tips "Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse" dan semoga bermanfaat.