Membuat Efek Spinning Icons Social Bookmark Dengan CSS3

Tutorial kali ini kita akan belajar membuat efek spinning pada icons social bookmark dengan bantuan CSS3 transform. Efek spining adalah efek berputar pada icons apabila disorot crusor pointer. Efek ini dapat pula anda terapkan pada image avatar blogger comments, thumbnail pada widget recent posts perlabel atau popular posts seperti pada blog ini. Untuk lebih jelasnya silahkan lihat demo disidebar blog ini:




Baiklah sekarang cara membuat efek spinning pada icons social bookmark
Langkah Pertama

  • Login ke akun anda
  • Pada dasbor>> klik template>> edit HTML
  • Cari kode ]]></b:skin> lalu Salin dan tempel CSS berikut tepat diatasnya ]]></b:skin>

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); }

  • Simpan template
Langkah Kedua

  • Pada dasbor masuk ke menu tataletak>> klik tambah gadget>> pilih HTML/JavaScript
  • Sekarang salin dan tempel kode berikut pada form yang tersedia dan beri judul yang anda inginkan

<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/AVvXsEjBzZDfjdd335vYrVi5A_OuMCL4RrxrlJew2uWw7W1lKio14bJUGQOIN5a3C57XQlGfZqbOFxl_qVDXB6FXzbDrICu-Tb0Yi0b9KwSRHMpypPC4qETyhJ1KJhhKPFYwyvT2a-emqs_LBboY/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpRGJN98R3jseIjQ6SXA6sneeA6EcEggJukzzuPaiN52LdHuI1jebRs1XW5ymJbtBagUHkUf969_svkiuUG3_BayB4tSANaj80Lc1dR7AbXz_-50wnu_xJbOvD-oTSWXZPy9uNyz7VBcXt/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcR_1MR1xYjtBfOiAOipPax17ckPmDBF_MnP6tzyTUcbx5Vvdj44ia58Hdn0ztUV0RPwQIZ3vZxlw6H-GZuRkG3Jyv3_CrIKbnZ8xZ43gQrG-HBo-4WYXLdN8yW-XZscdsYaewVvGCdxKT/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovmjTJTTns5wc7ZYePglrDeJLw1vjTd9MECkhOt_1tNKKY5cR3Ozr91ptYaJCpjfeUEp8LvGELE2MrstdOzS4ENBIsIyKaV0ilJotPFnkieKZgsZnFKn1aCHQa4XqfbRKHP4WB-MpiILt/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtZinSd7DWD8tdMVLSFLZaoInd1W8sR71H0SgIJwCMfbAEPkSoOJWzeJJjtFLeXid2yH-tBY10-zP4Fkl4ysnFi7YSbbUY0WDEVz6ux-UHxN5YvV_E3pLKiaeP2PIvfR75sNmLZYVsH0R/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>

  • Simpan dan lihat hasilnya diblog anda
Model dan Penyesuaian :

  • Mengganti model diatas ada 3 pilihan model ganti saja <div id="socialicons1"> dengan angka misalnyasocialicons2 atau socialicons3 


Sumber 
Share artikel ke: Facebook Google+ Twitter Digg
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)