Labnol like Social Subscribe Buttons for Blogger with CSS

Are you looking for Labnol like Social Subscribe Buttons for Blogger hosted websites then you know to right place. In this post I will teach you another trick of CSS and HTML. With this trick you can add Labnol like Social Subscription Buttons with the help of CSS and HTML in your Blogger Blog. These Buttons are officially developed by Amit Agarwal.
These buttons are very modern in style. Also Subscribe Us to get updates!

Here is the image of this widget:-

Features:-

Modern Style Widget.
Mouse hover effect.
Fast and Easy to navigate.
Customization.

How to add this Gadget in blogger:-

Go to www.blogger.com and log in to your account.
Then Click on Layout Option.
In layout, click on Add a Gadget.

Now Click on HTML/JavaScript option.

Copy and paste the following code in the area.

CSS Code:-

<style>
.labnolSocial{display:inline-block;margin:10px
0}.labnolSocial
a{text-decoration:underline !important;float:right}.labnolSocial
span{float:left;display:inline;margin-right:10px}.labnolSocial
span.last{margin-left:0}.labnolSocial span
a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("http://img803.imageshack.us/img803/9103/labnolcss.png") 0 0 no-repeat}#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}.logo{background:url("labnol.org/wp/wp-content/themes/baba/logo-XL.png") no-repeat scroll 0 0 transparent;margin:0
auto;width:420px;padding:0
0 20px 0}
</style>

HTML Code:-

<div class="labnolSocial"> <span> <a title="RSS Feed" href="http://feeds.feedburner.com/GeekoTips" target="_blank" id="iconRSS" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'RSS', document.location.pathname]);">RSS</a> </span> <span> <a title="Follow on Twitter" href="http://twitter.com/GeekoTip" target="_blank" id="iconTwitter" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Twitter', document.location.pathname]);">Twitter</a> </span> <span> <a title="Facebook Page" href="http://www.facebook.com/username" target="_blank" id="iconFacebook" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Facebook', document.location.pathname]);">Facebook</a> </span> <span> <a title="YouTube Channel" href="http://www.youtube.com/user/" target="_blank" id="iconYouTube" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'YouTube', document.location.pathname]);">YouTube</a> </span> <span> <a title="Google Plus" href="https://plus.google.com/000000000000000" target="_blank" id="iconGooglePlus" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Google Plus', document.location.pathname]);">YouTube</a> </span></div>

Customization:-