728x90 AdSpace

  • Latest News

    Sunday, November 30, 2014

    How to add floating share buttons to blogger


    How to add floating share buttons to blogger



    floating share buttons

    1.  Log in to your blogger account and Go to Design >> Page Element

    2. Click Add Gadget and select 'HTML/Javascript'

    3. Paste below one of below code.

    <style>
    #sharebar {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;right:0;}
    #sharebar .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>
    <div id="sharebar">
    
    
    <div class="sbutton" id="fb">
    <a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">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">
    <script src="http://widgets.digg.com/buttons.js" type="text/javascript">
    </script>
    <a class="DiggThisButton DiggMedium" href=""></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 style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.bloggertrix.com">Get widget</a></div>
    
    </div>
    </div>
    </div>


    4. Save HTML/Javascript. you are done.
    • Blogger Comments
    • Facebook Comments

    0 comments:

    Post a Comment

    Item Reviewed: How to add floating share buttons to blogger Rating: 5 Reviewed By: bisma
    Scroll to Top