Stick Or Float Widget In Blogger

This effect will make a widget float downward when visitors scroll down and stay on its original position when visitors scroll up and reach the widget position. The trick is applicable to any widget so far it has a unique ID, regardless of its location, be it top, bottom or sidebar.

How To Add It Blogger

• Go to Template > Edit HTML
• Use ctrl F to find </body> and paste the following code above it.

<script>
// Sticky Widget By RealcomBiz.com
//<![CDATA[
rb_makeSticky("WIDGET ID HERE"); // enter your widget ID here
function rb_makeSticky(elem) {
    var rb_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    rb_sticky.parentNode.insertBefore(scrollee, rb_sticky);
    var width = rb_sticky.offsetWidth;
    var iniClass = rb_sticky.className + ' rb_sticky';
    window.addEventListener('scroll', rb_sticking, false);
    function rb_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            rb_sticky.className = iniClass + ' rb_sticking';
            rb_sticky.style.width = width + "px";
        } else {
            rb_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

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

•  Replace WIDGET ID HERE with your widget unique ID.

How To Get Widget ID

• Visit any page on your blog, but make sure you have already log-in into your dashboard
• Right click on the edit icon (wrench icon) below the widget you want to apply the trick to.
• Select Copy Link Location and paste it into a notepad.
• You should be having something similar to the code below

http://www.blogger.com/rearrange?blogID=****************&widgetType=HTML&widgetId=HTML**&action=editWidget&sectionId=crosscol

Copy the widget ID after the line &widgetId= and place it in the line specified above.

If you have any queries or suggestions, feel free to drop it in the comment.

Note: If this Tutorial and News worked for you (and it should work), please leave a comment below. Thanks.

Browse More Articles

Tweet

Written by Unknown

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.