1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Floating social media sharing buttons

Discussion in 'Plugins' started by gaurangi.tech, Jan 23, 2012.

  1. gaurangi.tech

    gaurangi.tech New Member

    Description
    Floating social media sharing buttons included Facebook Share, Retweet, Stumble Upon, Digg and Google +1 (plus one) buttons in the bar.

    Instructions
    Copy Entire Code Given Below Paste in Text Widget and Save Text Widget


    Demo : Demo Link

    sidebar.JPG

    Code:
    <!-- floating page sharers Start www.blogtechworld.com-->
    <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 blogtechworld.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='gplusone'>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <g:plusone size="tall"></g:plusone>
    </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 style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.blogtechworld.com/2011/10/floating-social-media-sharing-buttons.html">Add this</a></div>
    <!-- floating page sharers End --></div>
    
     
  2. hotaruuser

    hotaruuser New Member

    Hi, thank you!
    I tried them out, but on my theme (luciola-light) they float in the middle, left from the sidebar. I would like them to float on the right side of the sidebar, how do I do this? My css skills are not good enough, unfortunatedly
     
  3. gaurangi.tech

    gaurangi.tech New Member

    Search "float:left" in First row Change it left to right
     
  4. hotaruuser

    hotaruuser New Member

    I tried that already, but it does not change anything. Tested with chrome and ie on vista..., cache emptied
     
  5. gaurangi.tech

    gaurangi.tech New Member

    Change margin-left:-71px; to margin-right:-XXXpx and change XXX to numeric (may be 1000px) value where you toolbar adjust.
     

Share This Page