Add Floating Share Buttons Like Mashable to Blogger




Instructions To Follow:

STEP #1


Log in to Blogger, go to Layout -> Edit HTML

and mark the tick box "Expand Widget Templates"


STEP #2

Now find (CTRL+F) this code in the template:
]]></b:skin>


And immediately before it, paste this code:

#sharebox {background-color:#FFFFFF;border-color:#C1CDCD;border-style:solid;border-width:1px;left:103px;bottom:40px;margin-top:10px;position:fixed;width:64px;}#sharebox .float {margin:7px}.FBConnectButton_Text{font-size: 8px;padding:2px 4px 3px !important;}



Step#3 Now find the bellow code
<div class='post-header-line-1'/>
just before it, paste this code:
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='sharebox'><div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div><div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><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'/><script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div><div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div></div></b:if>

Now click Save Template

Thats it and remember, the floating widget is visible only for blog post, so this widget won’t be visible on your blog homepage.

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes