Enhanced Social Sharing Widget Slides After A Certain Distance From Top

We previously posted Scrolling AdSense Ad After Moving Down a Certain Distance From Top.

and today we are here with another tweak to the social sharing widget that features Facebook sharing button, Google+1 button and Twitter Tweet feature. One of our commentators requested the post, so here it is dude

When we restrict the social sharing widget to slide (scroll) over after a set distance, it provides an overall clean look to the blog.

Before moving on, you may like to read:

DEMO VIDEO

How To Add Sliding Social Media Sharing Widget To Blogs/Websites?

Step 1: Add a HTML/JavaScript widget to your Blogger blog

In case you're on Blogger you need to add a HTML/JavaScript gadget on your blog. In case you wish to add the widget on your website, you can independently add the HTML and JavaScript in their respective files on your site.

Step 2: Add The Following Code

Now once you have opened up the HTML/JavaScript gadget, simply paste the following code in it and hit save.

<script>

window.onload = function() {

function getScrollTop() {
    if (typeof window.pageYOffset !== 'undefined' ) {
      // Most browsers
      return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
      // IE in standards mode
      return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;
}

window.onscroll = function() {
    var box = document.getElementById('BeH-Social-Fixed'),
        scroll = getScrollTop();

    if (scroll <= 995) {
      box.style.top = "1005px";
    }
    else {
      box.style.top = (scroll + 10) + "px";
    }
};

}

</script>

<style>

#BeH-Social-Fixed {

position: absolute;

}

/*-------BeH Floating Sharing Widget------------*/
#floatdiv {

bottom:15%;
margin-left:-850px;
z-index:10;
float:left;
padding-bottom:2px;
}
#BeHsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !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="AdSense-Fixed">
<div id="floatdiv">
<div id="BeHsidebar">
    <table cellpadding="1px" cellspacing="0">

    <tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="Bloggingehow">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <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>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div></div>

Customization

In case you wish to customize the placement of the social sharing widget, you can adjust the values highlighted in the code.

To Adjust the static height from top: (First value)

box.style.top = "1005px";

To Adjust the padding/distance from top 'while scrolling' : (Second Value)

if (scroll <= 995) {

Third value needs to be the distance between the previous two values for smooth scrolling. So in case you choose the first value to be 100 and second value to be 80, that the third value must be 20 (100-80 = 20 )

Third Value :

box.style.top = (scroll + 10) + "px";

Thats all! Simply adjust these three values and you would get the desired results for the scrolling social sharing widget.

You may like to read:

Google Analytics: 6 Crucial Metrics To Monitor Your Blog's Growth
Google Analytics: How to Add Custom Widgets To Dashboard

Respect Copyrights!

The original widget was designed by our fellow blogger Muhammad from MBT. We enhanced the widget by adding the advanced scrolling feature. kindly respect the copyright. It takes hours to modify a certain widget that we bring in to you guys.

Stay safe nation