Add Floating social media sharing buttons to Blogger

How to Add floating social media sharing buttons to blogger? We all know that traffic in our site is very important and it gives us higher ranking on google search.Thus, we have to find a way on how to do this.One of the solutions to this desires is by putting a Social Networking widget button in our site pages. Through the technology that evolves now a days it is the latest trend to get  share your posts all over the world. This is a one way solution to increase your blog traffic.  Did you notice that on most of  the blogs are using Floating Social Buttons in left side or in right side of the page?So, here’s a tutorial on how to add a Mashable-like floating bar of social media buttons to a Blogger blog. Here includeds Facebook Share, Twitter,   Digg This and Google +1 (plus one) buttons in the bar. Each of them comes with a live counters and real time.

 Steps of Adding the Floating Social Buttons buttons

1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add a Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box. 

 <!-- 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 borits.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'>
<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://borits.blogspot.com/2011/10/add-floating-social-media-sharing.html">Get this</a></div>
</div>
<!-- floating page sharers End -->

Good Luck and Enjoy sharing with your blogs!!! :)

Categories: Blogger Tips