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.

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..