Tuesday, June 5, 2012

Labnol Like Social Subscription Buttons For Blogger Blog

Author: Gagan Masoun
Labnol Like Social Subscription Buttons For Blogger BlogLabnol is the famous technology blog run by Amit Aggarwal.Amit Agarwal holds an Engineering degree in Computer Science from IIT and has previously worked at ADP Inc. for clients like Goldman Sachs and Merrill Lynch. In 2004, Amit quit his job to become India’s first and only Professional Blogger. Labnol blog is looking simple but fantastic. He is updating his blog regularly with useful content.

Blogsdaddy.com is also same as like labnol. Today, I want to share this tutorial regarding "Labnol Like Social Subscription Buttons For Blogger Blog."


You can easily get this widget for your blog. Just follow the steps given below and make your blog more attractive.

Install Labnol Like Social Subscription Buttons For Blogger Blog

  • Go to Blogger Dashboard --> Layout --> Add A Gadget --> HTML/JAVASCRIPT
  • Now Paste The Code Shown Below Inside It
<style>
.bdsocial {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.bdsocial span {
float: left;
display: inline;
margin-right: 8px;
}
.bdsocial span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("http://4.bp.blogspot.com/-n6N4LwUzi20/T830BJ0QQkI/AAAAAAAANcA/v02hP7KSzkc/s1600/blogsdaddy.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
h6 {font: 90%/1.5em arial, helvetica, sans-serif;
color: #909090;text-transform:uppercase;margin-bottom:10px;}
#footer-logo{text-align:center;margin:10px 0 20px;clear:both}
#footer-logo a{color:#000;text-decoration:none}
.footer-rss{background:url("http://4.bp.blogspot.com/-n6N4LwUzi20/T830BJ0QQkI/AAAAAAAANcA/v02hP7KSzkc/s1600/blogsdaddy.png") no-repeat scroll 0 -180px transparent;display:inline-block;height:20px;width:42px;margin-right:12px;vertical-align:baseline;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}
.footer-nav{margin:0 auto 20px;width:100%}
.footer-nav a{margin:0 4px; color: #666;}
.footer-nav{margin:0 auto 20px;padding:15px 0 0;border-top:solid 1px #ccc;width:86%;text-align:center}.footer-nav
li{padding:0;margin:0;display:inline;list-style:none}.footer-nav a{font:100% "OFL Sorts Mill Goudy TT", Georgia, Times, serif;margin:0 8px;text-transform:uppercase;text-decoration:none}​
</style>
<div class='bdsocial'><span><a href='http://www.twitter.com/Blogsdaddy' id='iconTwitter' target='_blank' title='Twitter'>Twitter</a></span> <span><a href='http://www.facebook.com/Blogsdaddy' id='iconFacebook' target='_blank' title='Facebook'>Facebook</a></span> <span><a href='http://feeds.feedburner.com/BlogsDaddy' id='iconRSS' target='_blank' title='RSS Feed'>RSS</a></span> <span><a href='http://www.youtube.com/5abiraag' id='iconYouTube' target='_blank' title='YouTube Channel'>YouTube</a></span> <span><a href='https://plus.google.com/106217413057730068740' id='iconGooglePlus' target='_blank' title='Google Plus'>Google</a></span></div>​

  • Replace The Bolded Red Color Links With Your Links. 
  • Now Save Your Template & Its Done..!! 

2 comments:

  1. hey thanks for this, let me know the coding of full template...

    ReplyDelete
  2. thnx for sharing this really great

    ReplyDelete