How to Add Floating Social Bookmarking, Add This Button and Sharing Icons to Blogger

Posted by Oluwajoba Odesanya In , , | 2 comments»
The floating social bookmarking and sharing plugin used to be very popular but now bloggers don't really care much about it anymore. Some blogs however still use it. 

In order to do add the floating, fixed social bookmarking and sharing plugin to your blogger site, 



  • Log in to your blogger account 
  • Click on Layout and select Add a Gadget
  • Add an HTML/Javascript gaadget
  • Paste the code below into the gadget and save it



floating share bar




Paste this code into the gadget

<!-- floating page sharers Start -->
<style>
#pageshare {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;}
#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;/*bs-fsmsb*/-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="Get this from amazingeworld.com">
<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='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='gplusone'>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.amazingeworld.com/2011/06/how-to-add-floating-social-media.html">Get this</a></div>
</div>
<!-- floating page sharers End -->


The floating bar might appear on the middle of the screen but you can tweak the left position by changing this value from this line of the code at the top


#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-


Tweak the -71 value to change the left position

How to make it appear only in posts:


  • Click on Template
  • Click Edit HTML
how to configure floating social bar
  • Find this code or the nearest. It varies sometimes with the template you are using
</b:if>
<b:include data='post' name='postQuickEdit'/>
</div>
  • Paste the code you pasted in the gadget anywhere after those lines of code
  • Click on save template and check if it works


2 comments:

Bhavika Says:

HOw can I hide this on the home page n show it only on internal pages?

Oluwajoba Odesanya Says:

Hi Bhavika, i have edited the post so it should be clearer now

Post a Comment

Post your comment or feedback