Membuat Gambar berputar saat disentuh kursor tentunya akan memberikan sensasi tersendiri, selain itu mempelajari sistem modifikasi seperti ini merupakan tantangan khusus bagi saya jika diterapkan pada blog ini.
Melakukan desain ini merupakan salah satu cara untuk mempercantik tampilan artikel blog anda, hal ini juga bertujuan untuk menarik perhatian pengunjung, dengan begitu bisa jadi pengunjung blog anda betah dan akan mengingat ulang bahwa blog anda menjadi salah satu blog favorit mereka.
Melakukan desain ini merupakan salah satu cara untuk mempercantik tampilan artikel blog anda, hal ini juga bertujuan untuk menarik perhatian pengunjung, 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 standar, maka untuk mempercantik tampilan gambar yang standar (tidak bergerak) 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:
7 Cara Modifikasi Gambar Berputar Saat disentuh Kursor
1. Log In ke www.blogger.com2. Buat atau edit artikel blog anda
3. Buka menu HTML bukan Compose
4. Copy dan Paste kode di bawah ini
<style>
<div id="sundaboy">
#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/AVvXsEgmW5xvizg0xEOhqZbMC-cOwaSM_ART6h1EcQfoBZauHBSW2Qex0uyg6CdkP3AjLDpdwZrlaAfywb2HCFuMDJnt0qPAqisiCl7bc85ssdp4nFoiNLm5x_n0Pqk-hh0K8g47EqZaJ4XNIyRI/s1600/OVJ+dan+YKS.jpg" height="200" title="Gimana gambarnya, berputar dan membesarkan!!!" width="184" /></a>
</div>5. Publish atau Perbaharui
6. Klik Pratinjau untuk mengetahui hasil sementara
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 7 Cara Modifikasi Gambar Berputar Saat disentuh Kursor, jangan lupa untuk membaca 7 Cara Membuka Password Memory Card yang Terkunci. Semoga Tutorial Desain ini bermanfaat untuk tampilan artikel anda. Terima Kasih!!.
*) P.S: Jika anda benar-benar mengalami kendala untuk mendapatkan wanita pujaan anda,
saya sarankan anda bergabung di
www.pencinta-wanita.com
, silahkan mendaftar menjadi anggota dan pelajari materi-materi yang dikirimkan Ronald Frank lewat email atau baca langsung di member area, untuk sementara pendaftaran anggota gratis. Daftar sekarang juga dan dapatkan bonus senilai Rp10.000.000,- (dibaca sepuluh juta).
0 comments:
Post a Comment