Floating Social Media Buttons from ShareThis.com

I found a different style of a floating social media button 3 days ago from ShareThis, so I updated all my blogsites. But then today, I realized to switch back to my old floating social media buttons. So I have to note this one, in case in the future I wanna use this floating social media button style again. There more choices of styles available at ShareThis.com. You can register to that website and pick your Floating Social Media Button style.

Steps on how to add this style of a floating social media buttons on a blog page

- Go to Design > Layout
- Click Add A Gadget. (Header and Footer)

- In Add A Gadget window, select HTML/Javascript .
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Click Save button on upper right corner.


Copy and Paste this Code on the Header Part:
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>


Copy and Paste this Code on the Footer Part:
<script>
var options={ "publisher": "6a52b69d-0907-4353-b10f-a86520f6e11a", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>


Reference:
http://sharethis.com/publishers/get-sharing-tools

Add a floating social media buttons on your blog page.

This Floating Button Menu stays put even when the page is scrolled

Steps on how to add a floating social media buttons on a blog page

- Login to your Blogger account.
- Go to Design > Page Elements.
- Click Add A Gadget.
- In Add A Gadget window, select HTML/Javascript .
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Drag the gadget and reposition it under Blog Posts gadget.
- Click Save button on upper right corner.




COPY THIS CODE

<!-- floating page sharers Start bloggersentral.com-->
<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 BloggerSentral.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='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'>
<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></div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://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://bloggerehow.blogspot.com/2011/06/how-to-add-floating-social-media.html">Add this</a></div>
</div>
<!-- floating page sharers End -->