Sunday, July 28, 2013

Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3


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="http://1.bp.blogspot.com/-aFoaagR_vc0/Tv3m_2_OLBI/AAAAAAAABm8/MEmujyAi4Ag/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="http://4.bp.blogspot.com/-ZUhz4ru6RBs/Tv3m_X4XuYI/AAAAAAAABmo/6LQ4IolE0W0/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="http://4.bp.blogspot.com/-qWEX1j-tXHA/Tv3m_u0aWII/AAAAAAAABm0/AwN9Qkkl-Us/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="http://2.bp.blogspot.com/-tyZhlZfCKjQ/Tv3m_0e3ovI/AAAAAAAABnM/MjE8VOFkO7M/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="http://1.bp.blogspot.com/-x4DBFqxf3Jo/Tv3nAadEdNI/AAAAAAAABnY/Q3onklhZIEc/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>
  • Simpan dan lihat hasilnya diblog anda

0 comments:

Post a Comment