How To Make Any Widget/Gadget Sticky In Blogger

0
How To Make Any Widget/Gadget Sticky In Blogger
In this tutorial i'm going to explain how to make any widget/gadget stick on your blog thus making the widget visible at all time while the visitor scrolls.It will float there until its original location comes back when the page is scrolled back up.

This Sticky trick is for any widget/Gadget or element that has an ID.Perfect for navigation bar,Email subscription box & social media profile sharing buttons.

How to add any widget/gadget sticky in your blog/website:

(Method 1)
1. Login to your blogger account and go >>template>>edit template
2. Now click anywhere in your code area and find using ctrl+</body> 
3. Now Paste below Code Just Above </body>
<script>
// Sticky widget by BloggersStand.blogspot.com
//<![CDATA[
bs_makeSticky("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:#f2f2f2 !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> 
Note:How to get to know your widget id,just look below example for widget id.

how to get to know widget gadget id in blogger blogspot

Customization:

  • To Change Background Color,Replace f2f2f2 with Your Hex Color Code.
  • Replace WIDGET_ID with your widget id.
Save your template..Done !
(Method 2)

1.Log in to your blogger account and go to >> layout >>Add A Gadget>>HTML/JAVASCRIPT
2.Paste below code Just in your Html/javascript gadget box.
<script>
// Sticky widget by BloggersStand.blogspot.com
//<![CDATA[
bs_makeSticky("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:#f2f2f2 !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> 

Customization:

  • Replace WIDGET_ID with your widget id to make sticky.
  • To change background replace f2f2f2 with your Hex color code.
Save your Template,Done !!
how to make any gadget widget sticky stick in blogger blogspot,add stick widget in wordpress,sticky bar for blog website
In this tutorial i'm going to explain how to make any widget/gadget stick on your blo g thus...
SUMMARY

how to make any gadget widget sticky stick in blogger blogspot,add stick widget in wordpress,sticky bar for blog website

You Might Also Like:

We hope this article helped you to learn How To Make Any Widget/Gadget Sticky In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Make Any Widget/Gadget Sticky In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand