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.

Related Post: