Membuat Social Bookmarking Icon Berputar Pada Blog

Beberapa widget Social Bookmarking Icon Berputar Pada Blog, animasi dengan menggunakan script html/javascript blog.

Caranya :

• 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/AVvXsEhuCufMmDpw5fosbL55MbwfxecxQNUTxY-a73mShz1nXGLW5I-ECdsbMVJdJVXBD_-APsfx2mPcRLUqxeDFkm9WmhyS1EA17x_GsZts9ve2SD9Woys26rcSrTXEQHngXlL_MmjeRIPDXBJh/s1600/facebook.png" /></a>
<a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEfo1_kS_gFWgFvyzYAd8PnjLDvAv2uWFrxiPLdqPf7j_YhWnJDoqZCYifnr9dwBvfU4f8SgJe_sbkJpzrLiEMoaWWqLgsblfR9Gcd0AmT1dCUg0G7Vef9nMiFsdrJs2rL4te57uto-1rm/s1600/twitter.png" /></a>
<a href="https://plus.google.com/u/0/108801075003252823592">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI7lR_Bf11oo5-cwkt49-vtgdgeoRS4dFS0oMsuTBEeTWtwZc7n8FTxH1V5GDItYL5dyz7hDmxOm74mzeJo7Ob4xeqDLCuq-JnX0-CkZjeCLSK7lCtBDnNS-MHsltrJjeOGw0VA-SGO5F3/s1600/google-pus.png" /></a>
<a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Kug9NP8SF0dGZ5ufGae08eIq_K3XN8GTwcj_i-lR8wDwq9714alZpYLnr9g73nOq1pnixyN-GS271xAqBUr2K6XZoP4dh9MKWmnTWdi-XcWTqb8Eqr3htOPXk8fyeISmEr-xgdIgvbZc/s1600/feedsburner.png" /></a>
<a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw1qupgTfF7RDbEySpIYqAzNwUx2X0sBgERsG8X7oE6DwfyMW7QpxSDVEoArVyjtnCoaBg1FcrPV3YTQv1nF5OaLc8subwuhCLJY56IvqyCULiCgXXUgx6eXesYsbG2ht1vzYKaxH_Jyqm/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/AVvXsEgId0RoMV5VnRDE0OrsgX3mota4jKuudYqEcAAmhD6jK0UCOcHG6s0Sjlg4n4ZvTd9ttQ-1BBZ-5CXjnLYrk957w8mhlqL70xlAl3iVIAid-SVE9IfMumeoTyWV7DZeDelnxLbxNlLI9teM/s1600/facebook2.png" /></a>
    <a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOAJL5RsQ9WY7HqcZJlN3j3cOFQ4b_2k9AiEskqHYlbci37anccozOS17XruQtRNAKJL398EOnCk-tlWkEYbzQL8YcNLy82Y7cwSMaL2q0PZi6Pt_a1YbUtnnsn4kiSMP0fX7qXaUcgPpc/s1600/twitter2.PNG" /></a>
    <a href="https://plus.google.com/u/0/108801075003252823592">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB0GyaagtptoCr5MZOG32H-ms67qxnneH-42Vt7dbauhvcDmZBu66N5dvN_0xPy-TIE_RnVzraK4NrynYxcSFTp5j6KIavxslugGeY8WLa7A76kdg8V57L7BFKgxGMI1Yy0H_QHenyCszV/s1600/google-pus2.png" /></a>
    <a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-6uCNGK0h8oVwMz9HaJx94BX9BbbiZabgRSk55n_qQOm8qih66KpryGxPBnJrXs87ut7yZpYyxkLFo-EV97gsdtmGIRnVvVG6v9xqpKPNuFbBGp69ndNZb-JKt4iCcGZetsdBy1M4KZ1/s1600/feedsburner2.png" /></a>
    <a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtsHoxnDtguJH17LU0iI3nio34-xMZB0QenMTCHJeVXEUixNf721OHRcd-rsvYjqDt5D_91DKtw-VQtxaKXJnFFk5K7uWU-x2pz0LClf4T3KHt8trM3yunhyKqjXvEO_awyu770YCyMuwY/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/AVvXsEgzBr6HG1SrOmzD9dul_RKe94PNI_VqFtb7yH7mfy_YySG84aV23BrFgZWwKKP8JzPcGS6DYMDF-xVrCuzPv5KZm3MxdgTYkgQuK21eHyzNCNHLJH0_RDFVSXZK77Jo7S0aOMZNActUT_lN/s1600/fb.png" /></a>
<a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPD4gmmiLrOV5QJgSH5MWbiWpK51Sn7NIFoigitCL5Cyz_HzxE7L4fbCV8BHUaHn7_pWapvHGt_3UB22TsaOt5hbsbiSSxz6ovks7g9hoC9akcuTRPVJlzkellu5VIAFqsZbp9ED95qn1/s1600/twt.png" /></a>
<a href="https://plus.google.com/u/0/108801075003252823592">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aISgADzRlpeIhTNm2pHOowdioi9TsKjTkVFe-Ob5cSHdDnshDqifz77UDLMS6RlAs9p_akkfLvxInoDBshwmr6junyehcdmrdfqKTFsvUYRNf6GOWDT7iVM9ymet0GulkFLUHtGJb_4G/s1600/g+.png" /></a>
<a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPwgok8X5QTftSuEhHH-I-5wO_eXEypozlXTWmFlnYNODihdP8p_DkoDSRDnqSbdt84LWxJ4NNRBEc8csseSg2aZtOtB0dJ_jhTm4B3iPTpuIvZDHy8_gx1XMzwqhcKwcTATcuib60VJca/s1600/fbn.png" /></a>
<a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGPk20TkaeRDWoTM7Q1E6lLkJaD2pdHAN_njKgKy3BsO1kV5cU-jSZa9RcKiq0dnVKiEr1IhAl61gfZnif8dv0qx5WnBqipWWhXcxGjNZ-9KCj0z2RJJH-o9zEyUdhLilf5nB36ldkp_c5/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/AVvXsEh4oqpmuD0Evcq1AeIFR_k_034AlV1GChAG0AyG72WL2F72Jn1XqMQmNsnpBf6VO08AIlfVAjmVIQcLT13-4-u_TVnv5U_kImczs6EfPTSoXxlzvg6eK0LkmkKLzZtq25F_k_59zij5u7fs/s1600/sil-fb.png" /></a>
<a href="http://www.twitter.com/lostsector">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6lUJ1-gvpDesBwTV1ouggmlASzGrISclxFocgw7GUSbiDkeHYT3W7B0bh0Je0pFJU14JzzcdREzuzpr5uqK3hwzlXAdn74-5Pwc2G541vTYi2nVZ_eVIWe3A1wbWrq_XVDy-J-D9UCl89/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/AVvXsEig-qOl9smTbJFiaY6LOSruu4QCQUjT_hcruyAFUl7OsvvuESli6gx_F17-774_lwZaTQzK23ZcsPYHiDhxT_fszWv5R2Ttt9458EMm1vaUZ5nSkotwDZu6cWSOJq0C-jpqdR34CbWR3Ua9/s1600/sil-g+.png" /></a>
<a href="http://www.feeds.feedburner.com/lostsectorblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw77-1ZAjUCzX9K3FesxgQOppkZ-1iNuv-gNn49a6vwIa_Np5WKZA1P0g_nCqM9mrp2PVSBlJQk-NFzOIcFJ0fH-qpuW_-r876oJ-TuL-JBGaoYordy9ijn14z0x_imQ4iq46C64SW-5zv/s1600/sil-fbn.png" /></a>
<a href="http://www.youtube.com/lostsectoryoutube">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXxA3l_uX_BqKbgKWG3T4CewZd15Ec_Ll4M-kgAz_tlw0OEH4D43EvNCYPHXrFnpkxJTBqUfWo5exmKRmzcFXjAgNn8qRg8J1sFthJbOlY4LHJAspsTPZEqluTY6vFegDEPoii-52NIoeb/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

You Might Also Like

Cara Membuat Artikel Terkait Dibawah Posting Tempat Cari ilmu