Floating Social Sharing Widget For Blogger

on
You don't  have to modify your HTML code for installation this social tool bar, each of the social tool has rounded corner, it enable viewers to see how many times your post is liked, number of time you post is shared and you can still customize it the way you like it if you understand HTML. Get the tips bellow.

To add the button
—Logging to your Blog account
—Go to Design, Page element
—Click add a gadget

Look for HTML/Javascript then copy and paste the bellow code into the box and  Save.
    <!-- floating page sharers Starts www.brilliantinfo.net-->

    <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;-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='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='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 style="clear: both;font-size: 9px;text-align:center;"><a href="http://brilliantinfo.blogspot.com/2011/04/add-movable-social-sharing-button-to.html">Get this</a></div>

    </div>

    <!-- floating page sharers End -->
Note: It does not matter where the position of the widget is saved in your blogger dashboard and does not really need a widget title, just save the script and it will be there in your sidebar.
You may also like to install Horizontal Floating Social Sharing Button like the one in this blog, it moves along when you scroll up or down

Comments

Post a Comment