Tips dan triks CSS | membuat gambar berputar dipostingan blog dengan kode CSS

Tips dan triks CSS | membuat gambar berputar dipostingan blog dengan kode CSS --Memang enak berkreasi dengan blog. Apalagi yang mahir CSS, saya tidak begitu mengerti tentang CSS tapi yang namanya prinsip berbagi kalau udah tahu ya bagi-bagi. tips dan triks css ini didapat dari pak iskaruji dot com, dan katanya beliau juga memperolehnya dari dynamicdrive.com.

Kayaknya berantai ya tips ini, hehe.. Nah buat sobat yang belum tahu berikut adalah cara membuat gambar berputar dipostingan blog dengan kode CSS :

DEMO KLIK DISINI

Sobat harus memasukkan kode berikut di diatas kode ]]></b:skin> pada template.

.gambarmubeng 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}
.gambarmubeng img:hover{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}

Jika sudah di Save templatenya. Selanjutnya, cara menggunakannya pada postingan blog silahkan sobat buat entri baru pada mode edit html, masukkan kode berikut lalu terbitkan.

<div class="gambarmubeng"><a href="http://www.masterendi.com/2010/12/ebook-panduan-dasar-bermain-blog.html"><img alt="panduan bermain blog" border="0" src="https://lh5.googleusercontent.com/-0xDKWVa-4QA/TvG0UXamdUI/AAAAAAAABHw/ClXgFgBNqpY/s300/banner%252520animasi%252520ebook.gif" /></a></div>

 Kode warna pink adalah kode gambar, silahkan diganti dengan gambar sobat..
Selamat mencoba and have fun..