Tuesday, 5 June 2012

Labnol Like Social Subscription Buttons For Blogger

Labnol.org India best blogger only because of Amit Agrawal, Each an evry widget he made by his own.

I always want to make my blog like labnol so I made a social subscription option same like labnol.

This is very simple to use it,just copy and paste code and little bit of customization.


Installing


  • Dashboard.
  • Click on Layout.
  • Add Gadget.
  • Select Html/Javascript
  • Copy Below Code And Paste it There.

<style>
.labnolSocial {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.labnolSocial span {
float: left;
display: inline;
margin-right: 8px;
}
.labnolSocial span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("http://i40.tinypic.com/97soap.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://i40.tinypic.com/97soap.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='labnolSocial'><span><a href='http://www.twitter.com/technologyblg' id='iconTwitter' target='_blank' title='Twitter'>Twitter</a></span> <span><a href='http://www.facebook.com/lordhtml' id='iconFacebook' target='_blank' title='Facebook'>Facebook</a></span> <span><a href='http://feeds.feedburner.com/lordhtml' id='iconRSS' target='_blank' title='RSS Feed'>RSS</a></span> <span><a href='http://www.youtube.com/' id='iconYouTube' target='_blank' title='YouTube Channel'>YouTube</a></span> <span><a href='https://plus.google.com/113143762085765715608' id='iconGooglePlus' target='_blank' title='Google Plus'>Google</a></span></div>?

Just replace links with your social links.

Small Code :D 



0 comments:

Post a Comment