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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjav_IIOfFh6ALRvIbOBrhZ4kwSb0SBNkNDx3fV4BhACAcl2tL8VNKAIx_SyBfc41_XMsG3loOgmEu0EvuMlVKXLy98-7u_uoFXq8_HUK21X6z81-LIHKqmy6yHsFfvPKliiMeZoYmcew/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjav_IIOfFh6ALRvIbOBrhZ4kwSb0SBNkNDx3fV4BhACAcl2tL8VNKAIx_SyBfc41_XMsG3loOgmEu0EvuMlVKXLy98-7u_uoFXq8_HUK21X6z81-LIHKqmy6yHsFfvPKliiMeZoYmcew/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzhGYtFgnYQaEdkfR5ZHLbBApCr6y9FD13i2-HSBBzfzUwCriwMQlJdLDmpKttGuKQhmajeS1BhCF8Nq04adsI-N1q4tP7A9UG562JE62O_PaTa2f9pkxyLwhktq1aGyGZaTO28-w6w/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzhGYtFgnYQaEdkfR5ZHLbBApCr6y9FD13i2-HSBBzfzUwCriwMQlJdLDmpKttGuKQhmajeS1BhCF8Nq04adsI-N1q4tP7A9UG562JE62O_PaTa2f9pkxyLwhktq1aGyGZaTO28-w6w/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4ab9S0_8hwc6Y9pHZUbLiNn8e7gF4yFHgNN8KcnkpkYcLXX4G4HehcqPvoNO6v3sh0kwLFcCkJsjAIcZrt4OT-s77nYVWMDia6arHHYitRLp4AHXANzFlxjwQNN2Nxz6sxzlXBmNqQ/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4ab9S0_8hwc6Y9pHZUbLiNn8e7gF4yFHgNN8KcnkpkYcLXX4G4HehcqPvoNO6v3sh0kwLFcCkJsjAIcZrt4OT-s77nYVWMDia6arHHYitRLp4AHXANzFlxjwQNN2Nxz6sxzlXBmNqQ/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWN88HeqPBRDDoOox2Nx3FvT7269CFYnttjTFCDM-2BAPe6iI4lMqHwDsRklFhB7twxZXcf_geNNcrXUgBWvEqcYM3H6SkWjQ0e9XZNYvhM3nA3HYjXwvguf5nXNxy6_UD6OVieSvNnQ/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWN88HeqPBRDDoOox2Nx3FvT7269CFYnttjTFCDM-2BAPe6iI4lMqHwDsRklFhB7twxZXcf_geNNcrXUgBWvEqcYM3H6SkWjQ0e9XZNYvhM3nA3HYjXwvguf5nXNxy6_UD6OVieSvNnQ/s1600/twitter.png) no-repeat 0 0}
</style>
Ganti # dengan URL sobat
bawa baskom kemari :)
BalasHapusbuat apa baskom mas bud ...
Hapusbuat nyimpen dulu kodenya kang Ruli..hehe :)
Hapushaha kirain dikulkas nyimpennya mas ...
Hapusblogwalking malam :)
BalasHapusterimakasih ...
Hapuswidget ini cocok da nambah keren kalo di letakinnya di mana ya kang :)
BalasHapusdi sidebar paling atas mas .. tapi jangan dikasih judul widget
Hapuspasti keren kayak kulkas dua pintu hehe
Tertarik Bang. Tapi loading gambarnya berat gak ya ? :D
BalasHapustidak sedang-sedang saja hehe
Hapusmasih bisa di tolelir ko ...
saya baru tahu, kayaknya menarik untuk di terpakan di template saya mas :)
BalasHapusso pasti karena ini cocok deh untuk semua template ...
Hapusini yg saya cari2 ,thank gan :D
BalasHapusBikin jantung deg-deg.an GAN! WOW banget ... thanks for sharing yee sebelumnya ! :) salam blogging kang ..
BalasHapusmantap bro.. izin mke ye
BalasHapus