Blogger Tutorials

How To Make Any Widget Sticky In Your Website or Blog

This is tutorial to make any widget sticky i.e. to fix it at top-fixed position even if the user scrolls down to your website. You can make any of the widget sticky by following these simple steps given below.Here I am showing this tutorial for blogger but this code can also be implemented on any platform such as wordpress.
Sticky widget on technogeekzone.com

Here the steps to be followed to make any widget sticky:

>>> Go to Blogger Homepage

>>> Select your Blog to make it’s widget sticky

>>> Click on Template button as shown below

Advertisements

>>> Then click on Edit HTML

>>> Search for </body> tag by open search box using ctrl+f

>>> Just above the </body> paste the below script codes

<script>
//<![CDATA[
bs_makeSticky(“HTML6“); // 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 {position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>

>>> Replace HTML6 with your widget ID.

If You don’t know how to get widget ID of any widget you want to make sticky then you can learn from Here by visiting this post- How to Get Widget ID of Any Widget In Blogger or Any Blogs

Article written by:

Satyendra is a Biotechnologist from the city of Nawabs, Lucknow. Apart from blogging, his other interests are Indian rap knowledge, affiliate marketing, poetry, and basically anything nerdy.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

back to top