Cara Membuat Widget Social Bookmarking Icon Berputar Untuk Blogger

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. Perputaran icon ini terjadi karena efek hover dari hasil modifikasi kode CSS3 apabila tersentuh oleh pointer mouse.

LIVE DEMO

Bagaimana Cara Menginstallnya ?

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

SKIN 01

<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/AVvXsEhcEVItPemMI62vVfsgJzuPcbFBF1YPZc7xOQUFDyPw5OBQ6F0CNX9rKEzeIuC0p_pvcYt52SdeOdwpoLqwRhvmhW79MjgYk1LHMa8Hc5icK0GrQg9N_Cvci8bqV4Jb5BoIl_zOeJpBak9w/s1600/facebook.png" /></a>
<a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGxZeqE-bWCP1YdO21jWyoxQxYkqOAg1-6fQKeERsTnHlEoOj5ITXSkZ3SdXE3luVnKrO41JZ730ceTrBoir77pkmrksN_ZSli8CIAy7lEIpU9nuAM0K54aez2-9i5-ICI2ajVaIsU6bv/s1600/twitter.png" /></a>
<a href="https://plus.google.com/u/0/108801075003252823592">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvdAxbTtv5OY-pGpWpj7SvRId5QQgj6tea-Vr_dbMCw_DEPJ86vhdVZwhmQ5NuYxuA_TzpVO0JkotPVvxt7tomGWaVKY74Uilon2QUbyBN1ip2foAOqm_0UeAri0Rz31f45lVO5XX-ocb/s1600/google-pus.png" /></a>
<a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEindpyFnYiUzHUlEHWoP49G5tdkz-YVcwX6z0xNL_X1WR1kzpmvagbKr5FxwBW5ZiYg2gyvWi0PiZQbWhmja4tGLIFkaOSvGbfGoAfC57gxt6gCWQmWbCmLDGuDMI1HaxRhSCWBa0HTzzgj/s1600/feedsburner.png" /></a>
<a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH4pmwFTOVRKcwiHX40yn8o2P4qbfY1EbWoTpt76G-S9gilVJgN-lg-QLH0PB8iLQtvIu1MtyakxQ_t4886LWifg2mtCVyjqXj9vyc3YC6xFYt3XPx5WOybluupZBwxFck2BU4Ku5hTPun/s1600/youtube.png" /></a>
</p></center></div>

SKIN 02

<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/AVvXsEgfYJ2AR7TSpdXalmeNQ2eX1wkbQotRf6POPhom9a9Qx7Hc8xEKYJ54zuaQDMLXVtbki2uQnABcDwpuNnNaYk8hwYll7MGDuALjIywzpmHZAIGoemTynyor-yoMVhK0NkH2uQZWjDo4u8W5/s1600/facebook2.png" /></a>
    <a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj82Ih5jsRPOAO8rDu398TwdKLhs-O46SbikXOfbohLBM95oMZLnItVrqYzYwQ8YEPxbm1LvmfUEPy1hABJv3cT_b6WW-IB-w-VIsd4sAdkZLOqF6gSn85rJPne5g4TQA_JlhjcKJ48kMPX/s1600/twitter2.PNG" /></a>
    <a href="https://plus.google.com/u/0/108801075003252823592">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2DhBCpvPREJurteNNFI8CRmP-Mf46Ox-LebzMxEn2IFcdGr6FQeGNELRcso2xXeHf8aO11D_g_mfp5pF667RDX-ex-aDDrSc4GaD6TkME16i9yMkdqTwZNJ6tp7_Xf9gO1PLZEQ7ZPVvb/s1600/google-pus2.png" /></a>
    <a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo3OqmDeYz4wpZuxyhcOvPBfvESHf3bS3fksOiPQyQTiPrTaKPKp73rLRihInHf7Udf7ACyeHakNblP8YnO6DPsC6r4dMC5EwAex412ISxVz-65MbaH0XO4dJGJVSC3eWqzMqrUv7_v_z2/s1600/feedsburner2.png" /></a>
    <a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_VPVtWbCXeacdC0PKWU9c_7AWiQ325nAPQ4nPhjSiUxwwZ7nOOAVU7vARX2u1DUeFavoDHEk5jFCHCW5Qdk-Ik3v5eZFtTbqL8P9jAG-LCrU01A9_KPw9ePiqFDkHyqyzImDYgUQUB1E/s1600/youtube2.png" /></a>
</p></center></div>

SKIN 03

<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/AVvXsEixgVgj6Mdnellbf_Mb1mgYanT1v7TZ2EMMxQhaDuZU13de7_6GWMHOh5WV_xK7T9FWMSkwVBINyhyphenhyphendzo2b7CCLqm02InYpO_lb_Gx9lixFCp5PgL-cqYcFFljr3DeY0mktg_aGdYm7oHJK/s1600/fb.png" /></a>
<a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Y-eD7mwKpC0AbLjr6nFyzD1Orjq1inBw4Bt8m7u4tmsEOr1ku7XQmaEWg-q8dMpNjCXDp3Je79myrwF3KrmMfGY2V-4fPpFezKeiijgydP1rOVIOVB-DlIATA-rZEUSMRY42tNuZoJ-j/s1600/twt.png" /></a>
<a href="https://plus.google.com/u/0/108801075003252823592">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtD3N3jotUJyP3_olZ-x6-7O_tw07BtMcURkhPsI8aPmwDyLtBECywfnp26ev_1W7691y8BU0iHNo65x77N8vCr2Cb-HUt4xOwpGnPIbdHvNmmm7EUmQFgAfEJhPA_qLagJuMEgw5774vx/s1600/g+.png" /></a>
<a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZGZB2Aa7oeMLPMETnuts80ueblBpbPe7PBaIM0lIivYT5RKIZgwwHIpxIlmcoW81P3Cco08Us7ej9f6rwCGSO86YYp1Sql7o5B96bjegohCNDJ7PM0Bb5cBTI64GnfF2j2B0e3Hh2tsoQ/s1600/fbn.png" /></a>
<a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJR0cppfCoA-GIiHDWMxKdvRZWtDoYyL8jzP_PjfLdfyR7wClh4A6jK2Ri0yOXHqRClI3UYY_uOYGJ-9ZYbEawMKsmxd8IcwPP1ZakNXP74wb86zhj3RqjaCIucsB38CAbek5aSzgc6a0W/s1600/ytb.png" /></a>
</p></center></div>

SKIN 04

<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/AVvXsEhJsdIgNYv0Iomzs15hM-hSX3g2qiEcdHycI-YxWDj_9WrsMk5ss7ZjJbywYrsRUIq8_ezRE962RqJFnrMUNHuDUt6r4TDkmIx1wlK80d-4H1lEh7WA0NZlc1CPtMSHhtrVei-7FOVYC9wO/s1600/sil-fb.png" /></a>
<a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGtPg9WUInB3w_av_M2ZwBfoz46hHD3wVnuv935KP-KbylumqzUPE2rfCLo6y-pj3vM5bbmvaiHip7XfwQLvRcmU74XB4baIdcb0j58p5GrxGHi_VlJzG4ntVY0TWc8uGv8ABWeCbq1PB6/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/AVvXsEgmH3IMi4tPTa8GJatGV9nYfHw_eiWzQKOUbAMi4UKfKkEQlvgKh4mLeLKKJNkgE7tLESZjOims-wB57etHS8nUoQeK0NyY5SF1dcUb2PKwET24RS86RyhEPdumTeesniuTO-Ak_aK_tmfW/s1600/sil-g+.png" /></a>
<a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGXieUM0qaJBmg4ziCyZccZ2bHoYy8Xwb8JHJQn3176nG78aW2BI4JI_ppuSaq3fmW8pfWKzUenpZc9SLcvtYgLmH1uQ1TK2gGVRFLfB1hMEeDTHDKvwSag_0jiiuSRgAM8VBVevOtu2W/s1600/sil-fbn.png" /></a>
<a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOoVCByIOEf3yQLkGb4Vof4wTmo2fdD0aUYlGNL9yER7eANcl85aILiwpBprrNbOEGoCURKYozDEUaSo-lLHerOGIBpwVhPhSXdwH9fuYPp6EGOYyVBa7VaLvhIr49nMbliZOs4dSpOY2U/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 anda miliki

• Simpan pengaturan dan lihat hasilnya.