logo blog
Hosting Gratis
Selamat Datang Di Area Berbagi Ilmu
Terima kasih atas kunjungan Anda di blog Saya ,
semoga apa yang saya share di sini bisa bermanfaat dan memberikan motivasi pada kita semua
dan bisa juga bisa mencerdaskan anak-anak bangsa

Cara Memberi Efek Gambar Berputar di Blog

Membuat tampilan gambar berputar 360 derajat saat cursor atau mouse diarahkan di atas gambar merupakan suatu cara untuk mempercantik tampilan blog. Dengan memberikan efek berputar pada gambar ketika mouse diletakan diatas gambar tersebut sangatlah menarik dan juga memperbesar ukuran gambar secara otomatis. Efek gambar berputar ini hanya untuk gambar dibagian posting atau artikel gambar lainnya kemungkinan tidak akan berputar seperti pada gambar postingan atau artikel.

Pada kesempatan kali ini saya akan membuat share Cara Memberi Efek Gambar Berputar di Blog, dengan memberikan efek berputar serta zoom atau memperbesar gambar secara otomatis ketika cursor atau mouse diletakan diatas gambar tersebut maka akan sedikit lebih bagus dan simpel bagi blog yang posting dengan memiliki banyak gambar, oleh karena itu dengan memberikan efek berputar pada gambar di blog ini akan sangat membantu visitor melihat gambar yang Anda kirimkan untuk pengunjung atau visitor lihat. Langsung saja bagi kalian yang ingin mengetahui cara membuat gambar berputar diblog silahkan baca dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>

/*Image Rotate*/ .post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.5) rotate(360deg) translate(0px);-moz-transform:scale(1.5) rotate(360deg) translate(0px);-webkit-transform:scale(1.5) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}

Catatan : 
Semakin besar nilai dari kode berwarna Hijau, maka kecepatan berputas semakin lama.
Semakin besar nilai dari kode berwarna Biru, maka gambar akan semakin besar.

5. Klik Simpan Template

Dengan menggunakan kode css diatas memang sudah valid CSS3, tetapi akan menimbulkan warning pada css level 3, namun Anda tidak perlu khawatir karena kode warning yang muncul pada css3 ini memang tidak mempengaruhi terhadap kualitas blog jadi masih ama saja untuk dipakai.
Enter your email address to get update from Area Berbagi Ilmu.
Print PDF
Next
« Prev Post
Previous
Next Post »

1 comments:

Copyright © 2014. Area Berbagi Ilmu - All Rights Reserved | Template Edited And Created by Bagus SWR Powered by Blogger