Cara Membuat Widget Social Bookmarking Icon Berputar

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.

Bagaimana Cara Menginstallnya ?

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

Cara Membuat Widget Social Bookmarking Icon Berputar Pada Blog [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/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA95_xZb5SQ3DNt4xhWXfY8mXMwIeye46RcZmfo3vCFXpKFvH-KRda46E6bUnX7Ei9I-q2SplYVUtKmVS1npocG-5p_tDbOFLUjqwRQjgfG9ULYkwG-zqxqfaOOr5JoW_UmwZixXlJOoX6/s1600/facebook.png" /></a>
<a href="http://www.twitter.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xOFpMGePqIp6anFM70rJSoFg7QReqwcpU3osAAcFE-VqXWAjd0bgA-j-Sm4dQJ2yTzMQ6TrierbFuEZRuzfAaXI3g35WOTzEyywJemPbCYAXDt9TXpSw_KKqJitWnGovvLan3h5FVK6p/s1600/twitter.png" /></a>
<a href="https://plus.google.com/u/0/108801075003123456789">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoJm_DwQ4m7TJwzjeIWpcQoNjd4li3MvspSBP9rYgJ1Z4nu99g0LeLRqW7jA37-YfX2zAELrSK8txa7_Bfyjue59BpF5l72vLvhP4Hc64TUjffo1X6kLzIWgiGmaHhbDteZYhWQ90JsEDT/s1600/google-pus.png" /></a>
<a href="http://www.feeds.feedburner.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNrwEEBIwuw0bpYSKy4QnCPsnMMeOAFb_hYXA1msT7XPiWX29g2cUir_S4zoGm7Aank0FV8-gAMid0gKiI62uFbiGxsiGyYgU3xbCbt0qYwR4QtrN9U7ZV1Fh79GV87CmrcwLOr610zBbs/s1600/feedsburner.png" /></a>
<a href="http://www.youtube.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVezvG0s1QvwUCEmlDikhGueogOCMSz1dYOxYL78C_ccBxRo2aTqcv5UmwEiGcmHrRzjw5U9wjWrp7DprIVfbKJg0I8VK8jWPWbfHJZs3EZA3ALsJ-xGUoKmcmcEunVk1ogtxcKY1uHxIL/s1600/youtube.png" /></a>
</p></center></div>
SKIN 02

Cara Membuat Widget Social Bookmarking Icon Berputar Pada Blog [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/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinEY29PgndQyUe2Sy7KEs3JvF-1OmfoTyc79Vwj_eRFGmyrL1pD89pNrbbzWU313DEnIoxmmyVBLfopAfHBvhf56WcDljBM73WGh57RKOTOQuvz-KoYdvJKhAmZVQi9volBmtefcPtF-oN/s1600/facebook2.png" /></a>
    <a href="http://www.twitter.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8P0eCyfWCu3WZWshIgQ-T7t-yjRIRErJA6zfRu3fKMIEgRmr3wDdASBOsByNZbBbCjNUq9Vdasks56T7WuRj5Ev_sMtATyGaScfwrtp-qCTtI86pCgQVXpbwND_pKH1lEYdMQ-ioE_yJ/s1600/twitter2.PNG" /></a>
    <a href="https://plus.google.com/u/0/123456789">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMECe83L80wPxqRSnQ12mbC0iEdFJFoRPGAMUIThqi8p7WqUeisICrysIk5coIaO6Vf7Xi9dD5I4BZ32bukCx_TrUaKzoXp98cFnGoBNc3PNXnTB3MKZQ84PT2xhv836gVMLumV1-VqlKp/s1600/google-pus2.png" /></a>
    <a href="http://www.feeds.feedburner.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu52Jxnsf4Ra0i0o0LE4ZxI2T2mPdWnG84ZF1aHJnHKXtXJns1-rmzzFlmIfmkqtEw7YTywkQALT3HNXnue2ca3yaKW_rYLUhYCfjopFwmSGdgVEH5dPRJsIwfjCuf4Bm80NcUY0j9PPlD/s1600/feedsburner2.png" /></a>
    <a href="http://www.youtube.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK70DNY1Z5fbxAY6mvzsZpCLFwgVkW4Lt6juhAU1hcadMFdJYtKNC5TDxqFVSvMCWbB0HbF02ehHW5P1AdQwACCwu05PpMiqgOi8avJgEDIuA3g6OLZaCoPEJ3cD4LO6WhENbv_O9fGufz/s1600/youtube2.png" /></a>
</p></center></div>
SKIN 03
Cara Membuat Widget Social Bookmarking Icon Berputar Pada Blog [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/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7_UbuDrXwMbkQwD3AVFiabBRXXQy3wB9ZVS52fq-MfRHv1JqarFmtEPCGh0UExLX97ATUOkNnV_eYrwn664l3sISCX_Km4Qyj8LzVwGZ6byKwm_TSSbhH8Yjxu_pgw-JTk5SYIzqwouKk/s1600/fb.png" /></a>
<a href="http://www.twitter.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwjBXxTi4_TYXFJAlewMZ4AeFImA3aLn5e40d6i31HA1VNDXwwmttlDwzNYWwnWyXILD5DSKtXCTh_TxeFe33ANoDBl2Gs74vCCPdnAd8IbANYNmSTbSv1ckXknk0d5Ic3m6PLCjCc6jxE/s1600/twt.png" /></a>
<a href="https://plus.google.com/u/0/1088010123456789">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4CRoqmJD9ONpY6cveOqXwi3ZbYLYFzsTU-FMqCWAgX1q_WGlnIb-hZSOdhjz27ZnCNkJuosXMAs1tYQJDebQC_TQEwVhrFd2xbkGzPym_aKWh-457puCZYoKWH7R390DM6GS-z0YCoTQ3/s1600/g+.png" /></a>
<a href="http://www.feeds.feedburner.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhw6aXj3r6Q9zGAmOPWls6OcbOTVizoX3yyaJYGCCSVZ3dg8-J80N8IF1URsIX3qCaSWskEMVw_xU1Ro6ax4DXhz2K7qK6Ab0ru6nNZesh8x4T4lrgiuFFQU5YoTXrcOjfzPdEYEtI7GB/s1600/fbn.png" /></a>
<a href="http://www.youtube.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMl4GDNMZaC33jm2Z9QJ2yRbX8IUxDiiLhbXEgkzgGry9ItKjrq1gf9gPKhKNKZc5zxW7CaPiQdMY8OMJOnQL1LxMKs5bvWwHL6R9rDoJgTVhi24mcyNW8wNLtIr6Cubs0kX4Pu7Dj7uej/s1600/ytb.png" /></a>
</p></center></div>
SKIN 04
Cara Membuat Widget Social Bookmarking Icon Berputar Pada Blog [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/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWTrOs06uWoiBsyTNBMk7adjh1obvE7dtS7Z19K2eDQ0U6KDbYwvR5GoS0iGZH2Hokx1fgH4gSYplmyJj7trJS6DFpfIlIn_zkHd6auSJzpcGlk7baVqmraJLzGduyC-PfgDXa26j1QFKX/s1600/sil-fb.png" /></a>
<a href="http://www.twitter.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWuEm6ucl4jUHaI1tPkBWxVUB8CALPmM_K92tLA1WWG9cZpv2WpVhdHI8XUD3hd6vWrF4vIgDbAqx_SApuvCgYumYQ2RORVfScJGaGS5RfbSS9hh7omD4K0BeS2Z8YQ-D8Q0eDaNceXCtR/s1600/sil-tw.png" /></a>
<a href="https://plus.google.com/u/0/123456789">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRmzPfmS_9R5JB6pu_L93lA7gSra7AG-CT97k88QjuYAGVujF76r0qSPKG-yvnzpHPdVrnX2I5SJ1iEvMOS0Vn1b1OPnbEBWD6H6I6Tf7oDdugW9rGra-MzVOlTqklF509TGQhnMJEErLz/s1600/sil-g+.png" /></a>
<a href="http://www.feeds.feedburner.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjBJSLnUhf1pyyKDjyMXx2zgbfXZuZZow6asqLiK8M6FALGtafSVYwRTZ095NvrQfoAnrNrN92nCFUlIOLTjUoKQjF-4voQQlLbr1x5uyAa2FQcxzs5BkocEuGZ-Sggeqa8a65mWadtn7/s1600/sil-fbn.png" /></a>
<a href="http://www.youtube.com/agung">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBiCHVu-dBbuMxbvEEQU6VMi1O09J0MDnWiKxSyOSZWoD9FGpkhaUth06De7XOJN3HX11-WjvR-uUmg1xDchyBRAJABSw6l__JaHLVctmya1SJxNUylLhGGg0jWltEqqhmoqtrxvrVktgd/s1600/sil-ytb.png" /></a>
</p></center></div>
Keterangan :
agung ganti dengan username fans page facebook
agung ganti dengan username twitter
123456789 ganti dengan id profil google plus (g+)
agung ganti dengan username feedburner
agung ganti dengan username youtube yang anda miliki
  • Simpan pengaturan dan lihat hasilnya.
Share artikel ke: Facebook Google+ Twitter Digg
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)