MEMBUAT WIDGET SOCIAL BOOKMARK

Tutorial kali ini kita akan belajar membuat efek spinning pada icons social bookmark dengan bantuan CSS transform. Efek spining adalah efek berputar pada icons apabila disorot crusor pointer. Kalau penasaran silahkan lihat bagian bawah posting ini ada beberapa tombol soacial bookmark yang jika disentuh kursor mereka berputar-putar. Nah, itulah dia yang saya maksud...


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

• 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/AVvXsEhcSCbP59Z6Dm7l-lj-9xuy541bw5jZI7mttMDiQr6LuHXMZx19WIcmU0yiKlj3C_lflcSzle1XdIP_2LsFF9gdyWrx8cbyfJxFjQdEe07R5rUEIPDomJXb5yNQzRLe271_R1HfncdOonaX/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIQLXKt4u5hJrxwKGRfz860BogSvaC5ZTG-XklwIQ1k7Dln_O9xoqi9JmwNaP5-4f4_gZfPenXgP1XIhgXqIda0kJOaCzYIP8muFV2-9wvE-m1Tj8bhAuFzZkSCyO8iV_PX4-Frg6b4YH/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGyb6Lg3GDyncLyDYkJpw4Ao1qpU4SdcJo4F4vTMKnGAqKvsrLtmCFCCegSpTfa51Dl1Vs07X478_WXxjdXw981bqM4AguNKraTRf1hAjnQZIbKRgelddPU28NNzvIjWPzB7cTRw524cZ6/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOAI1EyHGJ8p_r134T3Dgky2Dd1oaziXuEyiNFbCpg6SsLLZ_raKWnlf08klNS9hd9HKP8M0VKyUMoJpqzB-lEcgBAUZ9SdZ7MRfOjmk-O0qI8wMhhs_dFCxLSpzBx13VWEzXcElleasWo/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwCvQYCbgYV7ceNrUIa3UDSbtyx_ctEas-lNxm8Q8ssyXotOdAY-rS-SycZSKGV40zgKC1ADww9UgDZ1t3kHVC2ZmHfyguMmcGBXhO1Bod0sL2XXLPGfxwR1Y93udmvCFKOrI6ky4q2UbJ/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>

• Simpan dan lihat hasilnya diblog anda

Catatan :
* ganti tulisan berwarna merah di atas dengan alamat social bookmark anda
* ganti tulisan berwarna biru di atas dengan alamat gambar yang anda inginkan