Membuat Efef Berputar (rotasi di tempat)

Salam blogger, dan semoga sobat sekalian dalam keadaan sehat. Berikut tips untuk Sobat yang menginkan tampilan blog akan lebih menarik lagi dengan penambahan efek pada gambar atau icon yang terdapat pada blog.

Tips berikut tanpa menggunakan kode javascript yang rumit, hanya modifkasi dari kode CSS yang akan digunakan untuk menghasilkan efek bergerak berputar dari icon/gambar.

Caranya tidaklah terlalu sulit buat sobat bloger yang baru ingin mengutak-atik blognya. Hanya tinggal penambahan beberapa kode CSS di bagian SKIN dari blog dan penambahan kode pemanggil dibagian body dari blog sobat.

penempatan kode CSS

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

view plainprint?

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.

Nah setelah selesai dengan penempatan kode css pada bagian skin dari blog sobat, kemudian dianjutkan dengan penempatan kode HTML pada bagian body, ini terserah anda, di sidebar juga bisa dalam postingan juga boleh.

penempatan kode HTML

view plainprint?

<p id="efekberputar">  

<a href="mnc-mirror.blogspot.com /">  

<img border="0" src="gambarnya terserah sobat" /></a>  

</p>  

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

ok that's all