Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Minggu, 30 Juni 2013

Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse - Anda sudah tidak heran lagi jika anda melihat gambar berputar dan membesar, dan kali ini saya akan membahas tentang cara membuat gambar berputar dan membesar saat disentuh oleh mouse. Apabila blogger anda menggunakan gambar berputar dan membesar, blogger anda akan terlihat lebih bagus dan menarik lagi. Apakah anda ingin membuatnya juga? ikuti langkah-langkah dibawah ini.

1. Login ke blogger.
2. Pilih template.
3. Lalu anda pilih edit html.
4. Kemudian anda cari kode </head>.
5. Setelah itu anda salin kode dibawah ini dan taruh diatas kode </head>

<style>#oktri 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;}
#oktri 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. Simpan.

Cara penggunaan:
Apabila anda ingin mengupload gambar untuk berputar dan membesar secara otomatis hendaklah anda menggunakan kode yang saya akan bagi, <div id="oktri">Alamat Gambar Anda</div>.
Contoh:

<div id="oktri"><a href="http://muhammadagielk.blogspot.com"><img src="http://i41.tinypic.com/zx4j7.jpg"></a></div>

Tulisan yang ditandai dengan warna merah merupakan alamat gambar anda.