Cara membuat gambar berputar

untuk blog kali ini saya mencoba, dalam kesempatan kali ini akan berbagi trik blogger cara Membuat Animasi gambar berputar di blog. Sebenarnya apa sih perlunya hal semacam ini? Apa akan meningkatkan kualitas blog di Search Engine. Jawabnya tidak, tapi ada kemungkinan iya. Lho koq bisa gitu? Secara umum, trik ini bukanlah trik SEO blog. Hanyalah sekedar trik untuk mempercantik tampilan blog agar menjadi lebih menarik. Nah, jika blog menarik tentu pengunjung blog akan betah berlama-lama nongkrong di blog sahabat. Kalau udah demikian, baru bisa sedikit meningkatkan kualitas blog dalam Search Engine (jawaban mungkin iya). Itu tadi sekedar obral-obrol tentang trik ini, selanjutnya langsung aja kita coba berkreasi ala blogger. Nih dia triknya: Membuat Animasi gambar berputar di Blog Trik ini bisa diterapkan dalam beberapa gambar di blog sahabat, baik gambar di posting blog maupun gambar dalam komentar blog. Nih caranya: 

1. Tentunya login dulu, kemudian pilih menu pilihan Template
2. Klik pada Edit HTML
3. Setelah sahabat masuk pada kolom edit HTML, cari kode ini ]]></b:skin> (untuk memudahkan, tekan Ctrl + F)
4. Setelah sahabat menemukan kode ]]></b:skin> , copy aja kode yang ada di bawah ini tepat di atasnya. Silahkan pilih

Gambar berputar di posting blog 

.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;} .post img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Gambar berputar dan membesar di posting blog

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

Gambar post dan komentar 

.img{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out} .img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)} 

Hanya gambar komentar 

.comment img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;} .comment img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)} Hanya gambar header .header img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;} .header img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

5. Langkah terakhir adalah klik pratinjau lalu Save Template.

selamat mencoba