Menciptakan Efek Berputar Untuk Gambar

Hanya tinggal penambahan beberapa kode CSS di bagian SKIN dari blog dan penambahan kode pemanggil dibagian body dari blog


Tempatkan kode CSS berikut tepat diatas ]]></b:skin>

p#efekberputar img{ /* untuk efek berputar 360deg ketika dilewati cursor dan ditinggal */ 
    -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; 
    } 
     
    p#efekberputar img:hover{ 
    -moz-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 

kemudian SAVE TEMPLATE anda.



Selanjutkan dengan penempatan kode HTML pada bagian body, ini terserah anda, di sidebar juga bisa dalam postingan juga boleh.

Penempatan kode HTML

<p id=" efekberputar"> 
    <a href="http://www.joglio.blogspot.com./"> 
    <img border="0" src="gambarnya terserah anda" /></a> 
    </p> 


preview

Arahkah cursor pada gambar paling bawah di sidebar kananblog ini, dan lihat efek yang dihasilkan.

Untuk Jenis dan jumlah gambar terserah dari sobat blogger sekalian, yang terpenting adalah kode pemanggil CSSnya harus tepat " <p id="efekberputar"> kode HTML </p> "