Cara Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse

Cara Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse - Memang banyak sekali cara untuk mempercantik tampilan dari sebuah halaman blog, Mempercantik tampilan blog juga ternyata sangat berguna untuk menarik perhatian bagi pengunjung, sehingga pengunjung akan betah berlama lama berada di blog. Seperti yang akan sundaboy share pada kesempatan kali ini yaitu "Cara Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse". Pada umumnya gambar yang diupload ke dalam postingan merupakan gambar dengan tampilan standar yaitu tanpa ada sesuatu yang menarik selain dari isi Gambar itu sendiri. Nah supaya tampilan gambar lebih menarik sekarang sundaboy akan memberikan sedikit sentuhan pada Gambar yang akan menghasilkan Gambar Berputar Dan Membesar Saat Disorot Oleh Mouse.


Cara Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse - Sebuah Gambar akan Berputar Dan Membesar Pada Saat Pointer Mouse berada pada area Gambar tersebut. sehingga akan menimbulkan efek yang cukup menarik pada gambar tersebut. Untuk lebih jelasnya sahabat bisa melihat contoh yang telah sundaboy buat dibawah ini :

Nah sekarang apabila sahabat tertarik untuk Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse, silahkan lakukan langkah langkah berikut ini :

1. Login terlebih dahulu ke Blogger

2. Selanjutnya Pilih Rancangan

3. Pilih Edit HTML

4.  Cari kode </head>

5.  Copy kode dibawah ini dan letakan tepat diatas kode </head>


<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>


6. Setelah itu Simpan template

Selanjutnya untuk bisa menampilkan Gambar Berputar Dan Membesar Saat Disorot Mouse, sahabat copy kode dibawah ini pada halaman posting maupun sidebar blog.


<div id="sundaboy"><a href="http://www.sundaboy.com/"><img src="KODE GAMBAR" /></a></div>


Keterangan :

http://www.sundaboy/ Ganti dengan Url yang dituju pada saat gambar diklick
KODE GAMBAR Ganti dengan Url Gambar milik sahabat


Nah gimana, mudah bukan Cara Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse, apabila sahabat mengerti dengan kode HTML atau CSS sahabat bisa menambahkan sentuhan lain pada kode diatas.

Itulah yang dapat sundaboy share tentang Cara Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse, mudah mudahan dapat bermanfaat untuk kita semua, kurang lebihnya mohon untuk dimaklumi. selamat berkreasi.


Thanks to Link Sumber

Wassalamu'alaikum...

Anda baru saja membaca artikel yang berkategori Tutorial dengan judul Cara Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse. Anda bisa bookmark halaman ini dengan URL http://chopexz.blogspot.com/2013/08/cara-membuat-gambar-berputar-dan.html. Terima kasih!

Ditulis oleh: chopexz™ ↑ - Sunday, August 11, 2013