Membuat Gambar Berpusing - Erend Elektronik

Membuat Gambar Berpusing -  Sedikit mengenang kakekku. Almarhum kakek adalah seorang ahli pembuat baling-baling bambu yang ditanam ditengah sawah. Bila musim padi, suara yang dihasilkan dari putaran baling-baling bambu ini bisa mengusir hama tanaman padi seperti tikus dan hewan pengerat lainnya.

Namun kali ini saya bukan mengajak sahabat untuk membuat baling-baling bambu untuk pengusir hawa di sawah ini, karena sayapun dari cucu sang ahli belum tentu bisa membuat seperti yang kakek saya bikin. Kita disini akan Membuat Gambar Postingan Berpusing atau Berputar bila gambar tersebut tersentuh panah mouse.

Cara pembuatannya sangat mudah, kita tidak perlu menyediakan bambu untuk baling-balingnya. Kita tinggal coot gambar yang mau bikin berputar dengan sedikit merybah kode atau menambahkan kodenya dari gambar itu. Kita contohkan gambar baling-baling kipas saya, kodenya sebagai berikut :

<a href="https://1.bp.blogspot.com/-VbWkNa1eah0/XS8tavXLx3I/AAAAAAAAFJ4/Jzrxjzg_AfkIwtBuYWcKWgHY05WrpcluQCLcBGAs/s1600/Baling.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Gambar Berpusing" data-original-height="403" data-original-width="495" height="260" src="https://1.bp.blogspot.com/-VbWkNa1eah0/XS8tavXLx3I/AAAAAAAAFJ4/Jzrxjzg_AfkIwtBuYWcKWgHY05WrpcluQCLcBGAs/s320/Baling.png" width="320" /></a>

Jika mau berputar gambarnya maka kita hanya perlu menambah ID di gambar dari kode berpusing tsb. Langkah selanjutnya untuk penerapan dalam Gambar Postingan. Sobat harus menambahkan kode

<div id="balingbambu"> sebelum URL gambar dan jangan lupa di tutup dengan kode </div>

contoh seperti di bawah ini:

Kode selengkapnya jadi seperti ini :

<div id="balingbambu"><a href="https://1.bp.blogspot.com/-VbWkNa1eah0/XS8tavXLx3I/AAAAAAAAFJ4/Jzrxjzg_AfkIwtBuYWcKWgHY05WrpcluQCLcBGAs/s1600/Baling.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Gambar Berpusing" data-original-height="403" data-original-width="495" height="260" src="https://1.bp.blogspot.com/-VbWkNa1eah0/XS8tavXLx3I/AAAAAAAAFJ4/Jzrxjzg_AfkIwtBuYWcKWgHY05WrpcluQCLcBGAs/s320/Baling.png" width="320" /></a></div>

Untuk selanjutnya letakan kode dibawah ini, dibawah postingan sobat, atau diakhir tulisan dan disimpan dalam kotak HTML bukan dalam keadaan Compose.

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

Artikel Terkait