Add Labnol Style Social Media Icons in Blogger Blog

Today we are posting another social media icons which you might have seen on Labnol. These icons include all the social icons connecting your account together. So these could be used in order to get more followers or subscribers on your channel.

So now this widget includes five major social media icons RSS Feed, Twitter, Facebook, YouTube and your Google Plus ID, so demo of this widget below.

RSSTwitterFacebookYouTubeYouTube

So now embedding this widget on blogger is really simple so you just need to follow below steps as usual and everything will be good.

1. Open Blogger > Layout > Add Gadget.
2. Now choose HTML/JavaScript Gadget and add below code into it.

   <style>.social-icons-labnol{display:inline-block;margin:10px 0}.social-icons-labnol
   a{float:right;text-decoration:underline!important}.social-icons-labnol
   span{display:inline;float:left;margin-right:10px}.social-icons-labnol
   span.last{margin-left:0}.social-icons-labnol span
   a{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1LAoJHgsS7WGgw92uKUzTTFfDsrsUy60p2ZzMN09GwlHzsG7bPjBqX4_qQFaIZrZQPzaps2r5K3RX7EbYWOahbm8LKZtx75criLv_ATz3qk9T-PvLZsY_QiKPpx5Q1curWvKPQhF5S6Bo/) 0 0 no-repeat;background-color:none;display:block;height:32px;text-indent:-9999px;width:32px}#twitter-social-icon{background-position:-33px -33px}#twitter-social-icon:hover{background-position:-33px 0}#facebook-social-icon{background-position:-66px -33px}#facebook-social-icon:hover{background-position:-66px 0}#rss-social-icon{background-position:0 -33px}#rss-social-icon:hover{background-position:0 0}#youtube-social-icon{background-position:-99px -33px}#youtube-social-icon:hover{background-position:-99px 0}#gplus-social-icon{background-position:-132px -33px}#gplus-social-icon:hover{background-position:-132px 0}</style><div class="social-icons-labnol"><span><a title="RSS Feed" href="http://feedburner.google.com/fb/a/mailverify?uri=hackinguniversity" target="_blank" id="rss-social-icon" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'RSS', document.location.pathname]);">RSS</a></span><span><a title="Follow on Twitter" href="http://twitter.com/RJCreationzzz" target="_blank" id="twitter-social-icon" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Twitter', document.location.pathname]);">Twitter</a></span><span><a title="Facebook Page" href="http://www.facebook.com/hackinguniversity.in" target="_blank" id="facebook-social-icon" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Facebook', document.location.pathname]);">Facebook</a></span><span><a title="YouTube Channel" href="http://www.youtube.com/user/RJCreationzzz" target="_blank" id="youtube-social-icon" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'YouTube', document.location.pathname]);">YouTube</a></span><span><a title="Google Plus" href="https://plus.google.com/u/0/108117168464941766416/" target="_blank" id="gplus-social-icon" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Google Plus', document.location.pathname]);">YouTube</a></span></div>

3. That's it now your code is pasted in just make few changes like changing on the blue lines with your desired username or URL's
4. Now after you have completed editing everything, hit Save and align the gadget where ever you want this gadget to be rendered.
5. Now refresh your blog and see this awesome social media widget rendered and ready to gain few more followers.