How to add a beautiful social networking buttons to your blogger blog. these networking buttons are inspired from labnol.org . 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.
and i also add link below with which you can easily take a view of social networking buttons.
You can easily install this widget to your blogger blog and these buttons are really beautiful.
Installation:
- 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 zain-net.blogspot.com *************************/ .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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jh4UaiBaFUFvNNybjbeVNF-pjIAWIeavLiyY3UllFZN8Io-ueCh-tVHAZytyK_l0KLG2hlgcm53EEDiX8pmR673br8mYxsXibMrW2NUf4150K6FAFFK8Mwzm2MlcgpnjCaoj6d89V_w8/s1600/socialbuttons.png") 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;}
</style>
<div class="haseebnetgotsocial"> <span><a href="http://twitter.com/xxxxxxx" id="iconTwitter" target="_blank" title="Twitter: carelexx malik">Twitter</a></span> <span><a href="http://www.facebook.com/xxxxxxx" id="iconFacebook" target="_blank" title="Facebook: Carelexx malik">Facebook</a></span> <span><a href="http://feeds.feedburner.com/xxxxxx" id="iconRSS" target="_blank" title="RSS Feed: haseebnet blog post feed">RSS</a></span> <span><a href="https://www.youtube.com/user/xxxxxxx" id="iconYouTube" target="_blank" title="YouTube Channel: carelexx malik on youtube">YouTube</a></span> <span><a href="https://plus.google.com/10886765464645435354353?rel=author" id="iconGooglePlus" target="_blank" title="Google Plus: haseeb malik">Google</a></span> </div>
