How To Stick Or Float Widget In Blogger

Most big blogs have sticky widget that scroll along when visitors move up and down. The effect is usually applied to navigation menu or subscription box, but what kept most people thinking is how they can add the effect to their blog widget. Does that sound like you?

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.

The effect is added to the first navigation menu on the demo page.

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.

Posted in: Blogging Tips