Add Floating Sharebar Like Social Media Buttons To Blogger/Blogspot

One that readers share content from your blog is via social media sites such as Twitter, Facebook, Stumbleupon, Digg, Google+ and so on. Adding social media buttons to a blog makes it easy for them to share your content, which in turn should lead to more traffic for you.

In this tutorial, I will show you how to add a floating Sharebar like box that contains buttons to popular social media sites. This method of adding the box to a blog is a simple widget based alternative that does not require you to editing any of your blogs HTML code.

Instructions

> Go to blog dashboard
> Design
> Page Elements
> Click Add A Gadget
> Select HTML/Javascript
> Copy and paste the code below into the content box

<!-- Floating Blogger Social Media Buttons START -->
<style type="text/css">
#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 http://bestonblogspot.blogspot.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'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></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='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://bestonblogspot.blogspot.com/2011/08/add-floating-sharebar-like-social-media.html">GET WIDGET</a></div><!-- Do not remove this link -->
</div>
<!-- Floating Blogger Social Media Buttons END -->

> Save the Gadget
> Save all changes in Page Elements

Click through to view your blog where the social media buttons should now be showing.

If you need help or have questions on customising the box, please do get in touch with me via my contact form on Ninetynine Ways and tweet me > gerri50 to get a quick response.