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>

// Tutorial at
// Free to use or share, but please keep this notice intact.
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 ( < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
   = width + "px";
        } else {
            bs_sticky.className = iniClass;

.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;}

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


Tech blogger, SEO expert, cryptocurrency enthusiast, and freelancer are the terms that describe me. I'll rather write a thousand words than speak hundred words, and that describes my passion as a content creator.