Desain Gambar Berputar Plus Membesar Saat Tersentuh Kursor

Entah kenapa belakangan ini saya suka menulis tema desain di blog Terwujud.com, soalnya selain hobi menulis Artikel di blog, saya juga sedikit aktif desain foto melalui corel draw dan Photoshop (susah dihilangkan kalau sudah hobi heehee). Jika artikel sebelumnya membahas Modifikasi Gambar Kamuflase di Blog Saat Tersentuh Kursor, maka kali ini saya akan memaparkan tentang Desain Gambar Berputar Plus Membesar Saat Tersentuh Kursor.

Melakukan desain ini merupakan salah satu cara untuk mempercantik tampilan artikel blog anda, hal ini juga bertujuan untuk menarik perhatian pengunjung (benar bukan!!), dengan begitu bisa jadi pengunjung blog anda betah dan akan mengingat ulang bahwa blog anda menjadi salah satu blog favorit mereka.

Jika biasanya gambar tampil secara default, maka untuk mempercantik tampilan gambar yang default tersebut menjadi menarik, anda cukup mengikuti step by step cara yang saya jelaskan. (Arahkan Kursor pada gambar di bawah ini untuk melihat Demo secara langsung). Berikut Penjelasan:

Desain Gambar Berputar Plus Membesar Saat Tersentuh Kursor

1. Log In ke www.blogger.com
2. Buat atau edit artikel blog anda
3. Buka menu HTML bukan Compose
4. Copy dan Paste kode di bawah ini

<style>

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

</style>

<div id="sundaboy">

<a href="http://www.terwujud.com/2014/01/antara-ovj-dan-yks.html" target="_blank"><img alt="Terwujud.com" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq23Cs41NI6RRprRXBuREkt4FKObFD2hr7bWBaid1dsZBwhU5ECCDza5aVikbkMsNshFr8dCMpZg81yBoZAw9vsS_mhzRmm5TvN_taTQwEHfl5ssE80nkEBoOoyKA7n0DQ5RD2A6Da2Bk4/s1600/OVJ+dan+YKS.jpg" height="200" title="Gimana gambarnya, berputar dan membesarkan!!!" width="184" /></a>

</div>

5. Publish atau Perbaharui
6. Lihat Hasilnya

Keterangan:

• Tulisan  scale(1.5) untuk memperbesar gambar. Silahkan ganti sesuai keinginan anda
• Warna Merah dapat anda sesuaikan dengan keinginan anda, mulai dari link gambar, url gambar, title gambar serta tinggi-lebar gambar.
• Tulisan rotate(360deg) merupakan kecepatan berputarnya gambar, anda bisa gandakan jumlahnya dari 360 menjadi 720 atau sesuai dengan kehendak masing-masing.

Demikian artikel tentang Desain Gambar Berputar Plus Membesar Saat Tersentuh Kursor, jangan lupa untuk membaca Cara Desain Gambar dengan Efek Miring di Blog. Semoga Tutorial Desain ini bermanfaat untuk tampilan artikel anda. Terima Kasih!!.