On Scroll Fixed Sidebar Widget for Blogger

We all know that visitors come to our site to visit the main post content and not to see the sidebar content. With the long posts the main sidebar usually goes off to the top Specifically your ads content or Social profiles Widget. As the solution many sites today are using these type kinds the scripts to fix the element when touch to your top of the browser screen so that the particular widget or element remain visible until user read the post.

The Special Feature about the script we are providing is that is loads faster than other and do not put much load to the page loading. The script is also very user friendly to customize as per your Site Structure. The Script works with 98% of the Blogger Templates available. Demo is not available yet by us, But we Will try to do it soon as possible. Lets learn how to install:

Insatllation 

• Go to Blogger dashborad 
• Open Template and then click on Edit Template
• Search for </body> tag usually found at your last part of the template
• Paste the following Script before the Tag.

<script>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html 
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style> 

•  Change YOUR_WIDGET_ID with the elment ID you want to fix for example HTML1, POPULARPOST1