Create Your Own Sticky Or Floating Widgets in Blogger

Most big blogs have sticky widget that scroll along when visitors move up and down at the top or at the bottom. The effect is usually applied to navigation menu,subscription box.Now in this article I am sharing How to Stick Widgets in Blogger ?This effect will make a widget float downward when visitors scroll down and stay on its original position when visitors scroll up and reach the widget position.Just place the position of that widget.
blogger
Check out below code and implement that code into your theme to create Your Own Sticky Or Floating Widgets in Blogger.
Most big blogs have sticky widget that scroll along when visitors move up and down at the top or at the bottom. The effect is usually applied to navigation menu,subscription box.Now in this article I am sharing How to Stick Widgets in Blogger ?This effect will make a widget float downward when visitors scroll down and stay on its original position when visitors scroll up and reach the widget position.Just place the position of that widget.     How To Add Sticky Widget in Blogger ?   Go to Template > Edit HTML Search for </body> and paste the following code above it.   <script> // Sticky Widget By triposoft.com //<![CDATA[ rb_makeSticky("WIDGET ID HERE"); // enter your widget ID here function rb_makeSticky(elem) {     var rb_sticky = document.getElementById(elem);     var scrollee = document.createElement("div");     rb_sticky.parentNode.insertBefore(scrollee, rb_sticky);     var width = rb_sticky.offsetWidth;     var iniClass = rb_sticky.className + ' rb_sticky';     window.addEventListener('scroll', rb_sticking, false);     function rb_sticking() {         var rect = scrollee.getBoundingClientRect();         if (rect.top < 0) {             rb_sticky.className = iniClass + ' rb_sticking';             rb_sticky.style.width = width + "px";         } else {             rb_sticky.className = iniClass;         }     } } //]]> </script> <style> .rb_sticking {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);} </style>    Just Replace WIDGET ID HERE with your widget ID.   How To Find Widget ID in Blogger ?   First Log-in into your dashboard. Then Right click on the edit icon. Just Copy the Link Location. You should be having something similar to the code given below   http://www.blogger.com/rearrange?blogID=****************&widgetType=HTML&widgetId=HTML**&action=editWidget&sectionId=crosscol  Copy the widget ID after the line &widgetId= and place it in the line specified above.   If you have any still doubt feel free to ask us by dropping an comment in comment box given.Stay Tuned at Triposoft.com

Read This Also : ADD WP Style  Follow Widgets for Blogger

How To Add Sticky Widget in Blogger ?

  • Go to Template > Edit HTML
  • Search for </body> and paste the following code above it.

<script>
// Sticky Widget By triposoft.com
//<![CDATA[
rb_makeSticky(“WIDGET ID HERE“); // enter your widget ID here
function rb_makeSticky(elem) {
    var rb_sticky = document.getElementById(elem);
    var scrollee = document.createElement(“div”);
    rb_sticky.parentNode.insertBefore(scrollee, rb_sticky);
    var width = rb_sticky.offsetWidth;
    var iniClass = rb_sticky.className + ‘ rb_sticky’;
    window.addEventListener(‘scroll’, rb_sticking, false);
    function rb_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            rb_sticky.className = iniClass + ‘ rb_sticking’;
            rb_sticky.style.width = width + “px”;
        } else {
            rb_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.rb_sticking {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style> 

  •  Just Replace WIDGET ID HERE with your widget ID.

How To Find Widget ID in Blogger ?

  • First Log-in into your dashboard.
  • Then Right click on the edit icon.
  • Just Copy the Link Location.
  • You should be having something similar to the code given below

http://www.blogger.com/rearrange?blogID=****************&widgetType=HTML&widgetId=HTML**&action=editWidget&sectionId=crosscol

  • Copy the widget ID after the line &widgetId= and place it in the line specified above.

If you have any still doubt feel free to ask us by dropping an comment in comment box given.Stay Tuned at Triposoft.com

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

1 Comment

  1. gaanesh

    thq so much sir worked well on my blogger blog…but how to make it sticky on only mobile view?

      

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

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