Cara Membuat Widget Social Bookmarking Icon Berputar Pada Blog

Jumpa lagi shabat blogger, pada kesempatan yang lalu saya telah berbagi tentang bagaimana cara membuat widget social bookmarking all in one, popup like box facebook dengan timerdan popup email subscribe / berlangganan artikel terbaru pada blog, nah pada kesempatan kali ini saya akan membahas tentang bagaiman cara membuat widget social bookmarking dengan icon (gambar) berputar atau bergerak pada blog.

Widget ini selain bisa berputar atau bergerak, juga tersedia dengan berbagai skin yang berbeda-beda dan menampilkan 5 social bookmarking seperti facebook, twitter, google plus, email subscribe dan youtube. Live di bawah ini, sebagai contoh widget tersebut (sorot pointer mouse ke icon social bookmark untuk melihat efeknya) :

LIVE DEMO

Bagaimana, menarik bukan? dan jika sobat berminat menggunakan widget ini, berikut cara pemasangan, kode dan jenis-jenis skinnya :

• Login ke Blogger
• Tata Letak » Add Gadget » HTML/Javascript
• Copy paste kodenya ke dalam box HTML/Javascript
• Simpan dan lihat hasilnya

SKIN 01

KODENYA

<style>p#ls-social-bookmarkspin img {
 /* Social Bookmark Spin Widget By Lostsector */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
p#ls-social-bookmarkspin img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
/* Social Bookmark Spin Widget By Lostsector */
</style>
<center><p id="ls-social-bookmarkspin">
<a href="http://www.facebook.com/lostsector.stars">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSEDBWk_4c9-VlsI4qbt_oAkLKS5-pH3dsYtIIabMZKEux_IZoJNrIBxFhjKwb-vLV4orrB0Y_tH9g40mKSusP9YPWz1YY_ndjb553VyZ2COROqsD9U-GE_VNRQ-Yw1XEwOJxgbrHbUCt/s1600/facebook.png" /></a>
<a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVjANT-_E2xRkp6geSrX821cP3Fv_BR7p49EidnA9ahPy-rRl_5HtgLzJ75Ce_noH2SXBf56qUN1hEb0HL9LhjPgUiyWt7X2FYG3dcFAhRCpE3IM6cBhNnu49dOdBqkDg7-EANV150qWL6/s1600/twitter.png" /></a>
<a href="https://plus.google.com/u/0/108801075003252823592">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeAOqrfz7Mn-GZg5eh4XbUASl3ghDvJWYgDVF_iAOxTci7XKTHsLTe5ua8DSebFJ354gntHfe55XyHVjyYfG6k834qsuLZdeaQ_RbvipNdX0Ea-N88PaI1Cr8YcLgxoaMQkSj0fbejQhv/s1600/google-pus.png" /></a>
<a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjH5t-9y-Z6xcjCNc-28qJQnwLUjDr2Sir6naosBzMyzgyTJXh7enPKIWrA_HK3k0KYCDupKmFneLzsEH2rBOgA9splaJipUG27FODDJm9XXYceZniU56sALPkVHzB9uJW7brQJ9JMBMZY/s1600/feedsburner.png" /></a>
<a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1w870TWw2v0pyqyRrHx_Sky_e2aHnVy69gn_aJhfbOo5ndOuqz1FpMCC_h2Q4l-TZx-lKhcmFi4kIREyMR1kjWtix4sBFpxIVQ7RtjVqtDK4H58iPWhumqOkduWJXHhwaX0HE1ANQjSES/s1600/youtube.png" /></a>
</p></center></div>

SKIN 02

KODENYA

<style>p#ls-social-bookmarkspin img {
 /* Social Bookmark Spin Widget By Lostsector */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p#ls-social-bookmarkspin img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

/* Social Bookmark Spin Widget By Lostsector */
</style>

<center><p id="ls-social-bookmarkspin">
    <a href="http://www.facebook.com/lostsector.stars">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNb8I2ANf0ydpUx0FXBgucLIsICIQXLuBaSwesrguDnCEvifjk-gghI4FpllGrYmKEMAjlLODdBvjvAl713v9hqnuhBwa5A8QoV6wedJtFo8-yrPfWz01exakyrk6SGiKlhiVA3rWFn4-x/s1600/facebook2.png" /></a>
    <a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM2PsdzUAMLssiZPV8LkFYAsGWkBNCQ5XUg7sKX51MWIHCaoYleLEmHy81t6TcLCdyCdP16PYjisY3L-CzToNIiY5s8SOkZMo2ToeuaOGVDX9R4p5pAWDjApvTZg7uDFZC3ZE8tf49ZKdK/s1600/twitter2.PNG" /></a>
    <a href="https://plus.google.com/u/0/108801075003252823592">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhketx0ab6SeCVSqJqe-qAUcYeAm25IGeQ5eDyotHCSMMwZQNbq4rKfCNhfBpXe-1HhO1Zan1PmMoy9bLnEwoE-lcYsqm7SogymUpOvtztHjJmoW76dqTW3QgAKRZmTdTkvWPOzJb-kAtnN/s1600/google-pus2.png" /></a>
    <a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhayhB6r2j4E_Jj5YAVe3P5PluJpWGWZ2oP0U7AHPOB3n4u7IXv4m_t_n19wKR3DEw6MvpzzOBdubr4pMbbv8R1gk7j2LiK90NcXNo9c0GGTYsvnCdkjyLaNWRen9gibIpKExnlpOq3b8Bt/s1600/feedsburner2.png" /></a>
    <a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWexI6gDT0neuNs7KM6lICxFa7cgOCTOX-dIL1MWD0QPEmyq-Eda_mKaGq-sQYBHex0Msd2X37k2sBxAv8LtTFyrSuIS_gzi0nBq2J9YADmLtgGufE8ZlNZAa_4WheHvTpu0uo6W1wKL5/s1600/youtube2.png" /></a>
</p></center></div>

SKIN 03

KODENYA

<style>p#ls-social-bookmarkspin img {
 /* Social Bookmark Spin Widget By Lostsector */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
p#ls-social-bookmarkspin img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
/* Social Bookmark Spin Widget By Lostsector */
</style>
<center><p id="ls-social-bookmarkspin">
<a href="http://www.facebook.com/lostsector.stars">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZlRVmGu1_zb4P2KpNsODh3AFVgng-iEDTN8J6or_IeM-bFHeluY1DGOqtO-YxowDIWkS4A-VDtQWym6VL4UZgqLGclNEuIzXc4OwVXICffXRJdVh7cVEELFM8GagQat7mzvk73aD6gd5P/s1600/fb.png" /></a>
<a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjccx2CktJ20jPMC0xz_0TY8cRNUwQGnsHHDIMj9-ZnVN_9njARzzzN_AJNryz7wNQIMCN9vESsGDc6_zp3vek8NUR2WNn9Fr9EzuR0XgNE0T-mKwnAFYG-FS8blFkbE21YFNl4v4m4VcYt/s1600/twt.png" /></a>
<a href="https://plus.google.com/u/0/108801075003252823592">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIusD8SDAH7RXVt_JvVceE3eMLqmT9GssOy5PDAr6jgh7tTv0riSGTn5SzfAiQYaGEoNZ0ovffUS47ZMTS0XSjT1_-4JQbTOOd3sSS3birw4iNpoMnepEmO4VEGzigW3rJROhSe4iuG4lo/s1600/g+.png" /></a>
<a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimyLoIEHF5lwpSWwd6nsBfMBtYy-jOsXZ80cjfXhZRiN_f_Ll5QY1xKeHQDzEJoVjzgY7U-dGBwopuYOHnhhw1kK7mOOaUfHMnefgtC47m-Z7c1UVmPp8JCd76DZQcgqmjFGtUPEszKlhP/s1600/fbn.png" /></a>
<a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpP9WZLIhtQ2guZX5kqOOOrnYEUeIgL0OJp5Pw6Id1TZlc6RmHjQ45a2r78nvQl2I1cSDOs0vKXXl-X4BhUgQZgn8BZXJsR5GC0aUZ1VoaXtM6pw7Q6if2hgxOalAHeLhCIU5snS7VR_qQ/s1600/ytb.png" /></a>
</p></center></div>

SKIN 04

KODENYA

<style>p#ls-social-bookmarkspin img {
 /* Social Bookmark Spin Widget By Lostsector */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p#ls-social-bookmarkspin img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
/* Social Bookmark Spin Widget By Lostsector */
</style>
<center><p id="ls-social-bookmarkspin">
<a href="http://www.facebook.com/lostsector.stars">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHhaMyCQ8j13OPpoQ6BVaDJyWP-r5cbTEg3VNUXOoR7kymSFdWpqrTVx3PVrQ_yxjE8U3YkPuLYK8VoSPghrccjU5TL_5WuVBWaC6YwO53w3XfLIOJUOwmDZlaQKEDvzJ606NBBWUKpx49/s1600/sil-fb.png" /></a>
<a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpKV9B56VO3vZkGNnttGF6ViqIADr_AxcYpKCPaOEXJL_F-mSat1mF_CMyMBA2NLjt8oxcHKRQO4eKGmX2cooIHwwfMQ0FbRYihVApS0cKcWfuBY1DCk0chc50FfQJGWzhViWixGFgx83K/s1600/sil-tw.png" /></a>
<a href="https://plus.google.com/u/0/108801075003252823592">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvPR5fi2uXAJTnntiQWduLHkJ6DzqXLBMCR6LKW6KhM2vqx6W06NFRsCgyYisf8MGYkGsV2eaf3pMMNrlNBs9105Q8GEqhWZXVvNZTVOJ9hFxcgwPyJdIqFLrnPg_mZpvawATTDYNzfWNX/s1600/sil-g+.png" /></a>
<a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGIRN4B5TxnHMKRjUNvHJkfE4AmyXGZc0t571LoKF8kJSFhzUIycK4qdpnDRANhvnNOnqMNZ_zsHJrzD_onGNphyi4FpC-EZKTn3nOlNgAEnkKrcd7AFjYwkXRP497IbsOjml1FwVUM-z/s1600/sil-fbn.png" /></a>
<a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT-1yTdhcAEoGp49dshOIHMry3Xvp-lykImWouArMHRMLpRNth2dePnN3C5qFdKCrMLWbCnBvf2K_OXuhxHNGt_CpbIO2WGabofmIpib8R9aE2C48kUYpl5WsfYKdrGQKRMIAQ-tyttSMY/s1600/sil-ytb.png" /></a>
</p></center></div>

Keterangan :
lostsector.stars ganti dengan username fans page facebook
lostsector ganti dengan username twitter
108801075003252823592 ganti dengan id profil google plus (g+)
lostsectorblog ganti dengan username feedburner
lostsectoryoutube ganti dengan username youtube yang sobat miliki

Semoga bermanfaat dan salam blogger...!!!