Sliding Social Icon Cool

Sliding Social Icon Cool
Sliding Social Icon Cool - Lama sudah saya tidak membuat artikel tentang sebuah widget untuk blogger. Sekarang disela-sela nungguin adzan magrib yang lumayan masih lama , saya  akan  berbagi sebuah widget yang cukup atraktif sebagai tombol sosial berbagi dengan efeck slider yang sangat cantik dan dinamis. 


Nah bagi sobat yang sudah melihat demonya dan tertarik untuk memasangnya silahkan
  • Masuk pada Tataletak 
  • Add Gadget / HTML Javascript 
  • Masukan kode dibawah ini 
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0 0}
</style>

Ganti # dengan URL sobat 
Save dan lihat hasilnya.


15 komentar

bawa baskom kemari :)

blogwalking malam :)

buat apa baskom mas bud ...

terimakasih ...

widget ini cocok da nambah keren kalo di letakinnya di mana ya kang :)

buat nyimpen dulu kodenya kang Ruli..hehe :)

Tertarik Bang. Tapi loading gambarnya berat gak ya ? :D

saya baru tahu, kayaknya menarik untuk di terpakan di template saya mas :)

haha kirain dikulkas nyimpennya mas ...

tidak sedang-sedang saja hehe
masih bisa di tolelir ko ...

di sidebar paling atas mas .. tapi jangan dikasih judul widget
pasti keren kayak kulkas dua pintu hehe

so pasti karena ini cocok deh untuk semua template ...

ini yg saya cari2 ,thank gan :D

Bikin jantung deg-deg.an GAN! WOW banget ... thanks for sharing yee sebelumnya ! :) salam blogging kang ..

mantap bro.. izin mke ye