2011-12-31

Spinning icons dengan CSS3 transform

Kali ini Bang U-sup pingin menulis sebuah artikel tentang Tutorial Membuat Spinning icons 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="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>
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 misalnya socialicons2 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
  • Tutorial diatas bisa kamu baca langsung pada sumbernya : http://www.dynamicdrive.com dalam bahasa Inggris

Dapatkan artikel terbaru seperti Spinning icons dengan CSS3 transform langsung ke Email kamu..!!!


Ada 2 komentar untuk Spinning icons dengan CSS3 transform

  1. nice share gan. cara menambah penghasilan PPC ada di sini nih.Menambah penghasilan PPC

    BalasHapus
  2. This widget will surely help you to increase number of social subscribers also it will attract your readers and grabs visitors attention quickly.Thanks for posting this article and sharing with all of us.
    website design

    BalasHapus