How to Make Blogger Widgets Sticky(Float)

How to make blogger widgets/gadgets sticky(float), blogger floating widget android: You can make any widget or gadget in your blogger blog sticky or float. This means that the widget will be in a fixed position, floating at the top of the window as users scroll up and down. Any widget that is made sticky is visible to your visitors as the scrolls and it gets more attention and brings about a higher click through rate. 

All widgets and gadgets that have an ID on your blog can be made sticky, but this is best suited for blogger widgets like social media follow and subscription buttons, social sharing buttons, the recent post widget etc. Here's how to create a floating “sticky” Sidebar widget in Blogger.


Also Read:     How to Add HTML Parse Tool in Blogger
                    How To Centralise Blogger Title And Description
                    How to Add Read More Attribution Links to Copied Text in Blogger



How to Find The Gadget/Widget ID of Any Blogger Gadget

First, you'll need to get the widget ID. To do this:
  • From your Blogger Dashboard,
  • Goto Layout.
  • In the layout section, Click 'Edit' on the widget or gadget which you want to make sticky.
  • Get the Widget's ID by checking the address bar.




How to Create a "Sticky" Floating Sidebar Widget in Blogger

On getting the widget ID, 

  • Goto your Blogger Template
  • Click on 'Edit HTML'
  • Search for the tag </body>
  • Copy this code and paste 'above' </body>


<script>
// Tutorial at http://www.techlass.com/2015/03/how-make-blogger-widgetsgadgets-Sticky-float.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML9"); // 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> 

  • Replace the highlighted field ("HTML9")from the code with the ID you copied for the blogger widget/gadget.
  • Save your template.

 Also Read:  How to Disable Right Click On Blogger - Stop Copy Paste
                     How to Create HTML Sitemap In Blogger


View your blog to note the changes. If it didn't work, then you're probably using the wrong widget ID. You can makes ads on blogger float using this method too.




Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments