Friday 28 October 2011

Add floating social media sharing buttons to your blog

You might be wishing to having a floating social media sharing buttons on your blog as I do ( see at the right edge of the blog) on my blog. It is attractive and the it is likely that the visitors will share your blog.


Follow the instructions to add it on your blog.
Step 1.Go to Design > Page Elements.

Step 2.Click Add A Gadget.

Step 3.In Add A Gadget window, select HTML/Javascript .

4.Copy the following code and paste it inside the content box.



<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 tenraj.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='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://tenraj.blogspot.com/2011/10/add-floating-social-media-sharing.html/">Get widget</a></div>
</div>

Step 5.Save the gadget.

Step 6.Drag the gadget and reposition it under Blog Posts gadget.

Step 7.Click Save button on upper right corner.

Currently it includes facebook, twitter, stumble upon, digg and google + 1. You may delete any one you don't want though keeping it as it is will do no harm.



Click here for more blogger tricks

No comments:

Post a Comment