Labnol Social Media Widget Cloned For Bloggers

Labnol.org was found by Amit Agrawal who is the pioneer for every Indian blogger. He was the person to start a Blogging craze in India and still he rules the heart of every Indian Blogger by his humble and simple nature.

And this quality of his personality reflects well in his blog too. The design of the Labnol.org is very simple albeit it's very attractive. So today we are going to install one very simple but pretty cool CSS3 powered widget in our blogger sites which is inspired from Labnol.org.

Screenshot of Widget

Step#1

• Open Blogger Dashboard → Template →Html Editor → Add a Gadget
• Scroll Down and open Html/Javascript Editor
• Now paste the below given code in it.

<style>
.SlidingSocial a{float:left;display:inline;margin-right:8px}
.SlidingSocial a:hover{-webkit-opacity:1;-moz-opacity:1;opacity:1}
.SlidingSocial  a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigTysgeLrBh80oXda1Sdxg92Fzqfc9d6xts6omFSbPHtjcUDLfd2SZEo_f4peh8k6K6VB0CgN8feqcsoQChvlc26DXt2XzIIiQ6dC59WTI-c3o2zNw3Qh_m_ghD-yHnm1eQI-k68-4l1U/s164/SlidingSocial.png") 0 0 no-repeat;-xwebkit-opacity:.7;-xmoz-opacity:.7;xopacity:.7;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}
#iconTwitter{background-position:-33px -33px}
#iconTwitter:hover{background-position:-33px 0}
#iconFacebook{background-position:-66px -33px}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS{background-position:0 -33px}
#iconRSS:hover{background-position:0 0}
#iconYouTube{background-position:-99px -33px}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus{background-position:-132px -33px}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class="SlidingSocial">
<a href="http://feeds.feedburner.com/trackmyblog" id="iconRSS" target="_blank" title="RSS Feed">RSS</a>
<a href="http://twitter.com/trackmyblog" id="iconTwitter" target="_blank" title="Twitter">Twitter</a>
<a href="http://www.facebook.com/trackmyblog" id="iconFacebook" target="_blank" title="Facebook Page">Facebook</a>
<a href="http://www.youtube.com/" id="iconYouTube" target="_blank" title="YouTube Channel">YouTube</a>
<a href="https://plus.google.com/+Trackmyblog" id="iconGooglePlus" target="_blank" title="Google Plus">Google+</a>
</div>

Step#2

Now replace trackmyblog with your user id name and you are done.

Final Words

This widget uses sprite images ( Click here to know what is sprite images and how to use it? ). This widget is created by Master Amit Agrawal, so full credit goes to him only. It's the simplest widget ever. We hope you liked this tutorial. Socialize us if you like us