How to Make a Blogger Widget Sticky?

We will learn in this article how to make a blogger widget sticky.

You must have seen either the Top Menu or the right/left sidebar fixed at its place while scrolling a blog or a blogger template. 

Some of the latest responsive blogger templates have this feature already in them, which makes the top menu or the sidebar/s sticky. But if the template you are using does not have this feature and you don’t want to change the template of your blog and you want to make its widget/s sticky. 

Step 1

Go to you blogger dashboard, click on ‘Template’ and then click on ‘Edit HTML’. 

Now the first thing which is always advisable to do is to take a backup of you template. So, just take a backup of your template. 

Step 2

Find the following code in the XML Code of your Template:

</body>

Now, just above this code, paste the following code:

<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 NAME/ID HERE”); // 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:#198dc9 !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> 

                                                                                                           

(Source: bloggersentral.com)

Step 3

Replace the text ‘YOUR WIDGET NAME/ID HERE’ with the name or id of the widget, which you want to make sticky.

Step 4

Save your template and see the result.

Keep Blogging !!