How To Create A Sticky Widget

• Home
• Widget
• How To Create A Sticky Widget

How To Create A Sticky Widget

Posted by Unknown | 3:38 PM | Leave a Comment

Hello Friends, Today i will show you that how you can Stick your Widget in your Blog. If you want to do. Follow the following steps below

How To Create A Sticky Widget 

1. Go to Blogger > Layout 

2. Click Add Widget and then save

3. Now Go to Template > Edit HTML

4. Get the ID of your widget which you want to stick
5. Search for </body> tag
6. After Search, Paste the folloung below code above </body>

<script>
//<![CDATA[
bs_makeSticky("Your Widget ID"); // 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:#f8f8f8 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style> 

Find “YOUR_WIDGET_ID”. For example if the widget ID is HTML9, then code would look as bs_makeSticky(“HTML9″); 

6. Now Finally, Replace "Your Widget ID"   with your Widget ID
7. Click Save Template & View Your Blog

Important: You Can Change Your Widget Background Also f8f8f8  change this code to your color code