Bagaimana cara membuat gambar dengan efek berputar di blog

Dengan menambahkan beberapa efek style pada blog bisa membuat  para visitor blog anda akan lebih tertarik. Hari ini saya akan share dan mempublikasikan ke anda bagaimana cara membuat gambar dengan efek berputar di blog. Trik ini singkat dan simple, menambahkannya pun cukup mudah. Tinggal anda mengikuti langkah-langkahnya berikut di bawah ini.

LIVE DEMO dibawah (arahkan krusor anda ke gambar)

LANGKAH-LANGKAHNYA:

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih-> Template -> Edit HTML

• Kemudian cari tag/kode ]]></b:skin>  
• Setelah ketemu letakan kode berikut tepat diatas kode ]]></b:skin> 

.spinningeffect img {
 /* membuat efek gambar berputar by jalu-pangna.blogspot.com*/
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
.spinningeffect img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
} 

Angka yang di sorot warna kuning adalah kecepatan waktu yang di butuhkan (time taken) proses berputarnya gambar.
Angka yang di sorot warna biru adalah jumlah derajat berputarnya gambar, anda bisa menggantinya sesuai dengan selera anda.

Bagaimana cara menggunakannya pada gambar?

• Masuk ke akun blogger anda
• Kemudian pilih Post -> klik Entri Baru 
• Anda akan melihat kotak kosong, kemudian klik HTML pada postingan baru anda (bukan compose) pada sisi kiri atas.
• kopi dan pastekan kode berikut di dalamnya (kotak kosong) dimana anda ingin menampilkan gambar dengan efek berputar.  

<a class="spinningeffect" href="URL/Link Gambar" target="_blank">
<img src="URL/Link gambar" /></a> 

• Silahkan anda ganti URL/Link Gambar dengan URL/Link gambar anda.

HAPPY BLOGGING..!

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 15.02