Script Gambar Berputar Dan Membesar Saat Dilewati 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 tampilan yang menarik akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Salah satunya yaitu Script Gambar Berputar Dan Membesar Saat Dilewati Mouse.

Pasti kalian pernah melihat gambar membesar kemudian berputar saat kalian arahkan cursor ke gambar tersebut, jika kalian ingin membuat gambar postingan kalian seperti itu maka sebaiknya kalian simak baik - baik Script Gambar Berputar Dan Membesar Saat Dilewati Mouse berikut ini:

1. Seperti biasa kalian harus login dulu di akun blog masing - masing

2. Pilih rancangan / design / template dan klik edit HTML kemudian lanjutkan

3. Expand Template Widget untuk menghindari apabila terjadi kesalahan penempatan. Jika tidak mengetahui caranya kalian bisa simak postingan saya selanjutnya mengenai expand widget html.
Baca : Cara Cepat Expand Kode HTML Template Blog

4. Kalian cari kode </head> cara mudahnya dengan menggunakan fitur Find CTRL + F

5. Setelah ketemu, lanjut copy paste code di bawah ini tepat di atas kode </head>

<style>#aemplus 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;} #aemplus 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. Kemudian klik save / simpan template.

DEMO SCRIPT

Jadi setiap kalian menambahkan gambar pada postingan kalian dan ingin membuatnya berputar kemudian membesar ketika dilewati oleh cursor mouse tinggal kalian tambahkan code <div id="aemplus"></div> pada url gambar yang hendak kalian buat berputar dan membesar pada postingan tersebut. Pastikan pada mode HTML kalian menambahkan kode tersebut sehingga terlihat seperti ini kira - kira

<div id="aemplus"> URL </div>

URL gambar biasanya diawali dengan tanda <a href='bla bla bla...........> hingga tanda akhirnya adalah </a> baru kalian akhiri dengan tanda </div> dan jangan sampai salah penulisan.