Memasang Efek Berputar Pada Gambar di Blog

Bila anda pernah membaca artikel saya tentang bagaimana memberikan efek fading pada gambar maka pasti anda juga akan tertarik dengan efek yang satu ini yaitu bagaimana memberikan efek berputar pada gambar. Efek berputar ini  akan membuat gambar di blog anda lebih menarik dibandingkan gambar statis yang biasa anda lihat saat anda berkunjung ke blog orang lain. Pengunjung anda mungkin akan lebih terkesan dengan blog anda, bila anda memasang beberapa efek pada gambar di blog anda, dan salah satunya adalah efek ini. Meskipun penilaian dari pengunjung blog anda mengenai efek pada gambar ini pastinya akan berbeda-beda menurut selera masing-masing, akan tetapi memasang efek berputar pada gambar di blog anda tidak ada salahnya untuk dicoba.

Memasang Efek Berputar Pada Gambar di Blog

Sebelum anda mengubah atau menambah kode script pada halaman HTML Template anda, sebaiknya anda mem-backup template anda terlebih dahulu. 

Step 1

Masuk ke halaman dashboard > Template > HMTL

Step 2

Letakkan kode berikut di atas kode ]]><b:skin/>

.Kampoengspinning img {
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.Kampoengspinning img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Step 3

Save Template

Step 4

Tambahkan class="Kampoengspinning" ke dalam kode href gambar anda

<a class="Kampoengspinning" href="URL GAMBAR" imageanchor="" style=""><img alt="" border="" height="" src="URL GAMBAR" title="" width="" /></a>

Selesai!
Anda bisa melihat contohnya di bawah ini

Live Demo

Happy Blogging!

Wassalam.

Written by: Rysmah Zainal Arifin

The Kampoeng Blogger, Updated at: 8:47 AM

Posted in: Body , Efek , Gambar