How to Make a Floating Sharebar on the Left of Your Blog

  If you want your blogger to be spread to others faster, you sometimes need the help of your visitors. Thus, putting sharebars are an easy yet useful way of letting your visitors share about a certain blog post that they enjoy. This is how you do it. First, go and add a widget for your blog, then select HTML code. Copy the following code into the content: 



<style>
#sharebar {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#sharebar .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div title="Get this at wissamidrissi.com">
<div id='sharebar'>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<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'></script>
</a>
<span style='font-size: 55%;'><a href='http://www.wissamidrissi.com/2010/09/sharebar-for-blogger-floating-left.html'>Get this</a></span>
</div>
</div>
</div>


Then, you can put it anywhere you want on your blog, but the floating sharebar will still appear on the left. This way works for most blogging platforms. Enjoy!

4 comments:

JΞMS£Ɲ said...

ermm.. i think somethin's wrong with ur code.
it cant work but when i click ' get this ' on ur sharing bar. the code works...

Wong Zhiwei said...

Oh sry. I changed it already. 100% works now.

GranGoddessa said...

Hello. I am your newest follower and am trying to use your floating sharebar here, but it is cutting off part of my blog letters. Any suggestions?

http://funksanctum.blogspot.com/

Wong Zhiwei said...

This is easy! Just increase the width of your blog in the Blogger Template Designer until your sharebar fits perfectly to the side. I did mine for quite some time, but now it's perfect!