Membuat Animasi gambar berputar di blog

Santri Balaghy, 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.

Demikian Trik blogger tentang cara Membuat Animasi gambar berputar di blog oleh Santri Balaghy. Jika artikel ini memberikan info yang sahabat cari, jangan lupa like dan share ya.
Kami ucapkan selamat mencoba!

Semoga bermanfaat,
Salam Sahabat Balaghy!

Sumber: blogcapoenk