If you have been hunting for a way to add the ever present floating side social media sharing app to your blogspot blog, well today is your lucky day. Just like you, I also was searching for something that would do the trick.

I kept looking and looking until I came across the blog post by the prolific Jide Ogunsanya in his popular Ogbongeblog.com. In fact after I followed the step by step process that follows below,
the app just showed up on this blog (I hope you have been using it to share to your audience?). Anyways the technique is simple but it takes being careful because you will lifting the HTML code below. Let’s begin.
This what we are aiming for (notice the bar on the right of the image below):
Floating social media share app

  1. In your blogger panel click on Layout and select Add a Gadget from any of the layout area.
  2. From the gadget window, select HTML/Javascript.
  3. Copy code highlighted below and paste it inside the HTML/Javascript box. 

____________________________________________________

<!– floating page sharers Start Share This With Friends–>
<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 
0;z-index:10;}
#pageshare .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 id=’pageshare’ title=”Share This With Your Friends”>
<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’>
<a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”vertical” >Tweet</a>
<script src=’http://platform.twitter.com/widgets.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’ style=’margin-left:3px;width:48px’>
<script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script>
<a class=”DiggThisButton DiggMedium”></a>
</div>
<div class=’sbutton’ id=’gb’>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<fb:like layout=”box_count” show_faces=”false” font=””></fb:like></div>
<!– floating page sharers End –>

________________________________________________

4. Notice the this line in the code above: 
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border-radius:5px;-moz-border-

If you leave the code as it is, it will float the page sharer to the left, but if you want it to go to the right, change the ‘left’ to ‘right’ (omit the quotes) only.

5. Click ‘Save’ and you are done.

Let me know if it works for you. Shoot me a comment otherwise.
About the author

jncchief