Cara Membuat Efek Gambar Berputar di Blog

Cara Membuat 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 blog Ficri Pebriyana akan membuat sebuah tutorial Cara Membuat 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 :

Demo

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.

Cara Membuat Efek Membesar atau Zoom Pada Gambar

Sekian artikel mengenai Cara Membuat Efek Gambar Berputar di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini