Trending: Bloggossips


Sunday, October 3, 2010

How To add a Floating Share Button on Blogger..


Share buttons are very popular among the bloggers, and with the popularity the presentation of the share buttons has really changed alot. Now in this post, I'll teach you how to create an Floating Share Buttons for your blog.



Floating share buttons has now been very popular as it is preferred by many big site like Mashable. As these buttons are very good looking and effective on attracting readers to share buttons, these buttons have been in demand for long.

So regarding that I've written this post to teach you how to add it to your blog. Just follow these steps:

1. First go to your blogger account, sign in and go to Design>>Edit HTML. Then click on Expand Widgets and Search for following code:
]]></b:skin>
Then Just before that Paste these Codes:

#sharebuttons {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}

#sharebuttons .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px ;
}


2. Now you'll need to search for this code:
<div class='post-header-line-1'/>

And immediately before it paste the following code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebuttons'>
<div class='float'>Your Twitter Script: </div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a>Your Facebook Script:<div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
Your Buzz Script:</div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>

</b:if>
Your Twitter Script:  
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
 Your Facebook Script:
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
Your Buzz Script: 
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/> 

 Now Save your work and enjoy :)..

0 Responses to “How To add a Floating Share Button on Blogger..”

Post a Comment



Enter your email address:

Delivered by FeedBurner