HackingUniversity - Hacks . Tricks . How-To's

05 September 2013

Add Labnol Style Social Media Icons in Blogger Blog

labnol-social-iconsToday 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.

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.