Animasi icons dengan CSS3 transform Di Blog

dengan CSS3 transform, widget sebuah icons dengan efek yang apabila disorot akan berputar secara otomatis, widget ini bisa diterapkan sebagai link social seperti Facebook, RSS, Twitter.

Berikut demonya coba arahkan kursor pada icon dibawah ini:

- socialicons1 360 degree spin onMouseover dan onMouseout 

    

- socialicons2 60 degree spin onMouseover and onMouseout

    

- socialicons3 360 degree spin onMouseover ONLY

    

Sekarang cara membuat Spinning icons dibawah ini :

1. Login ke Blogger
2. Pada dasboard cari dan Klik Edit HTML

div#socialicons1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */

-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;
}
div#socialicons1 img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
div#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
div#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
div#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}
div#socialicons3 img:hover{
-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;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg); }

3. Cari kode ]]></b:skin> lalu Salin dan tempel CSS berikut tepat diatasnya ]]></b:skin>
4. Jangan lupa simpan template.
5. Sekarang masuk ke Design >> Page Elements

<div id="socialicons1"> <!-- angka 1 bisa dirubah dengan angka 2 atau 3 untuk model yg berbeda -->

<a href="http://urlanda.com/RSS"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKjxaTSBJGydePl0ESDjR29Jq3qbZLOAt5CpIwElaOgScd9QNt3yJuOxOkoucaMEmOJAMLzwpqp7wAFrWAKVDmdqt1sQbfHAkBZkadOhwrQIZ1c5Bg99A7JZVKFgGtNL8_T9pPMraIhLOr/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyB5x3I6_33_hSnpV_Yv_d_T_GV1PPly2d1RHmIQKXDwswwLC2GvJmH5jazwZeR-HScK2xqVwznQEfyFm8C4lGOwS4wt3v91Ct5ieViPLlubu5PncJoJu3C1fDNHgXTmx8R3OdVwJMh3Oa/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKDcq7RRtlaN6sL6G28okB3fFXHjjUhr5GtL0U-7SfPlC2eiSgZzHHg44rp7FpoR6uUf6D3BSqWYWq0ncAplxwpQonuoe41g9YwTq1p2DQLptT_FhwFt7wdaFwwhUN1QE0as1Jp8kvegi8/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2PnoWDpqw7bNpnW8HpgtIoXi1_It0cXdCHDQmQQLlZIvAJIymQQLAJcgJqM9p_aoWoJZvGynA_9x18ZRCV49wm1F_gQ_aVNbNDZR5pBLLthamav0d3ucZFEfwqME4SQEisg_SYamx86Mj/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM3JSAgMYh6x6ixJUEWmJPVtBbBml49z2tmXq0W4408PVLKFCQ9GMV74k_ILrjG2cVpdta5mCAKTYGKGrUNIPLf7PmWo6NWXGW0VRLUnDkCBkmdahLXkQ4tT2bIbYIH-PiVtDt3PkEP2jM/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>

6. Klik Add Gadget kemudian pilihlah HTML/Javascript
6. Sekarang salin dan tempel kode dibawah ini pada form yg tersedia kemudian simpan
7. Coba lihat blog kamu.

Model dan Penyesuaian :

• Mengganti model diatas ada 3 pilihan model ganti saja <div id="socialicons1"> dengan angka misalnyasocialicons2 atau socialicons3 
• Jika gambar terlalu besar untuk ditampilkan pada Sidebar, dan lebih suka dengan tampilan yang lebih kecil silahkan unduh gambarnya Di sini, kemudian kecilkan gambar tersebut menggunakan Photosop atau Photo Editor lainnya, lalu uploadlah gambar ke blogger dan gantilah URL gambar dengan URL yg kamu Upload(URL gambar yg berwarna Kuning). bisa membca Di-sini bagaimana mengupload gambar di blogger
• Kamu bisa bereksperiment sendiri untuk menghasilkan model efek dengan cara mengedit angka pada kode CSSnya, jika masih belum faham dengan css sebaiknya cara ini tidak usah
• Ubahlah URL / URL dengan punya kamu lihat teks warna Hijau