Header Ads

  • Breaking News

    How To Add Floating Social Media Buttons



    You have to just copy and paste some piece of codes in your blog. I am here to guide you in achieving this one without any mistake. All the steps for this task are given below. Just follow the steps carefully to get the floating social media button in your blog.

    Steps To Add Floating Social Media Buttons:

    1) Log in to your blogger account.

    2) Go to Blogger   Layout  Click on Add a Gadget

    3) Select HTML/Javascript 

    4) Copy the Code Bellow and Paste it Inside the Empty Box


    <style type="text/css">
    #social-buttons {
    position:fixed;
    bottom:15%
    margin-left:-721px;
    float:left;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background-color:#fff;
    padding:0 0 2px 0;
    z-index:10;
    }
    #social-buttons .button-share {
    float:left;
    clear:both;
    margin:5px 5px 0 2px;
    }
    </style>
    <div id='social-buttons' title="Get this from helplogger.blogspot.com">
    <div class='button-share' id='like' style='margin-left:7px;'>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
    </div>
    <br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='bloger_girl' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
    <br />
    <div class='button-share' style="margin-left: 3px;" id='su'>
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
    </div>
    <div class='button-share' 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='button-share' style='margin-left:3px;' 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;">Get <a style="color: #3399BB;"href="http://bit.ly/1DvLkPi">widget</a></div></div></div>


    Vertical Alignment - Change the 15% value of bottom. The Code Position the Social Bar Relative to the Bottom of Your Browser Window.  
    Horizontal Alignment Change the -721px Value From the margin-left. Negative value pushes button to the left of the main blog column, positive pushes button to the right.
    Twitter Seting - Replace bloger_girl with your Twitter username.




    That's all




    No comments

    Post Top Ad

    Post Bottom Ad