Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

social buttons with hover effect like

Today i,m going to tell you that how to add a beautiful Social Networking Buttons to your blogger blog. these networking buttons are inspired from . social networking buttons are one of the best way to engaged your users and it will create a better relation of you with your readers
here's the live demo of social networking buttons and i also add link below with which you can easily take a view of social networking buttons.
Social networking buttons with hover effect

Live Preview Click Here

You can easily install this widget to your blogger blog and these buttons are really beautiful


  • Goto blogger dashboard
  • now Goto page layout tab
  • Then add a gadget and select html/javascript
  • Now paste below code in it.
<style> /************************** Social Buttons from *************************/ .haseebnetgotsocial {padding: 2em 0 1.5em 50px;} .haseebnetgotsocial span  a {display: block;width: 32px;height: 32px;text-indent: -9999px;background-color: none;background: transparent url("") 0 0 no-repeat;} .haseebnetgotsocial span {float: left;display: inline;margin-right: 8px;}
#iconTwitter,#iconFacebook,#iconRSS,#iconYouTube,#iconGooglePlus {transition:background-position .4s ease-in-out;-webkit-transition:background-position .4s ease-in-out; -o-transition:background-position .4s ease-in-out; -moz-transition:background-position .4s ease-in-out; -ms-transition:background-position .4s ease-in-out;} 
#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 0px;}
#iconYouTube {background-position: -99px -33px;} #iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus {background-position: -132px -33px;} #iconGooglePlus:hover {background-position: -132px 0;}
.ads67 {border: 1px solid gainsboro;border-right-style: none;border-left-style: none;}

<div class="haseebnetgotsocial"> <span><a href="" id="iconTwitter" target="_blank" title="Twitter: carelexx malik">Twitter</a></span> <span><a href="" id="iconFacebook" target="_blank" title="Facebook: Carelexx malik">Facebook</a></span> <span><a href="" id="iconRSS" target="_blank" title="RSS Feed: haseebnet blog post feed">RSS</a></span> <span><a href="" id="iconYouTube" target="_blank" title="YouTube Channel: carelexx malik on youtube">YouTube</a></span> <span><a href="" id="iconGooglePlus" target="_blank" title="Google Plus: haseeb malik">Google</a></span> </div>
  • Now kindly replace all yellow colored links with your links
  • Now save it and its done
I hope you like and enjoy my widgets and please keep visiting and if you have any question or feedback please comment below.

This post first appeared on Haseeb.Net, please read the originial post: here

Share the post

social buttons with hover effect like


Subscribe to

Get updates delivered right to your inbox!

Thank you for your subscription