All You Need To Know About Earning First $100 from Google Adsense Visit Post

How To Make Any Widget Sticky In Your Website or Blog

Posted By : Satyendra Maurya | Last Update : 7:01 PM | Category :
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

>>> 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

No comments:

Post a Comment

Although every comment is appreciated, Keep in mind that any link or keyword in the comments may be the reason for deletion of your comment. Thanks for understanding!

#Techno Geek Network

#Proudly Hosted on Blogger


DMCA.com Protection Status

©2014-2016 Techno Geek Network | Technology and Science is What You Make It! | Designed by Satyendra