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

Hello guys, In this guide, we will find out how to Create or make Floating sticky sidebar ads Widget for our blogger website. Well for WordPress there are lots of plugins available to do that but for bloggers, we always need to put our heads on JavaScript codes Right!.

So, this article will be useful for you in that you can Add sticky Sidebar Widgets ads to your Blogger website and increase revenue in Adsense.

Floating Sticky Sidebar Ads Widget on Scroll Blogger Script

What are sticky sidebar widget?

Sticky ads are those that float down the page as a visitor scrolls down. I don’t have to tell you that having ads stick is much better at getting attention than ads that don’t stick. More attention = more clicks = more ad revenue.

There are different sticky options for desktop and mobile. I explain both below and how you can get those sticky ads on your site.

So In this guide, we will be adding fixed on scroll sticky ads to the blogger website or you can also use them on any website. The Second type is Floating fixed footer ads.

Features of floating Sticky Sidebar Ads Widget Trick

Floating sidebar widgets help us to attract our visitors, or we can say to highlight a particular widget over readers. You can use this trick to make any blogger sidebar widget sticky on scroll like as Advertisement widgets, Subscription Widgets, Popular Posts Widget, and much more gadgets too.

This Script and CSS code helps you to highlight a particular sidebar widget in your blogger blog.
This widget will not overlap on the footer bar.
It will not affect your blog on mobile devices if you're using a responsive blogger template.

Also check: Color Picker Tool for bloggers

Steps to Make any Blogger Sticky [Fixed] Sidebar Widget on Scroll

Follow the below steps carefully as it is not that easy, and take a backup of your template before doing any changes. So in case something went wrong then you can again re-upload your backup script.

Open Blogger Dashboard and follow below steps.

Step#1: Adding a New Widget:

The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and name the widget as “My Sticky Gadget”. Now writing anything in the HTML body Like your Facebook like a box or email subscription form etc. And save it.

Step 2# Adding Jquery

Now click on template go to Edit Html and in the Html page click anywhere in the Html code and press ctrl+f or search for jquery.min.js. If you find it then ignore the below code else if you don’t get it just copy the below line and paste it below <head>. If you find another version of this jquery that’s OK it will do fine.


<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2′ type=’text/javascript’/>

Step 3#: Adding JavaScript to your template.

Now search for </body>. Now Copy below code and paste it just above </body> tag. And here replace the #HTML3 with your Widget HTML no. [ Check below Step for knowing your Widget Id number ]



<script type='text/javascript'> 
$(function() {
 	if ( $(window).width() &gt; 990) {     
      var ks_widget_top = $(&#39;#HTML3&#39;).offset().top;
        var ks_sticky_widgets = function(){
            var ks_current_top = $(window).scrollTop(); 

            if (ks_current_top &gt; ks_widget_top) { 
              $(&#39;#HTML3&#39;).css({ &#39;position&#39;: &#39;fixed&#39;, &#39;top&#39;:0, &#39;z-index&#39;:999999 });
            } else {
                $(&#39;#HTML3&#39;).css({ &#39;position&#39;: &#39;relative&#39; }); 
            }   
        };
        ks_sticky_widgets();
          $(window).scroll(function() {
             ks_sticky_widgets();
        });
    }else{
  }
});</script>

Final Step: Location Newly Added Widget and replace the name

More useful script: Responsive Bottom Sticky Ads

After adding the JavaScript code, you have to search for the name of your widget. Since we have named it "My Sticky Gadget". Therefore, in the template coding search for "My Sticky Gadget". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.

Note: To enable the search box click anywhere in the template editor and press "CTRL+F". Now on finding "My Sticky Gadget" you will able to see a newly added widget. Similar like below code and note widget Id.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>

Remember: The ID of your widget should be unique. For example, if you are using id='HTML32' in any of your widgets then you cannot use the same ID for others.

Now click on save the template and you are done!

For a complete demo of the script with a proper installation and usage guide please watch the complete video.

Sticky Sidebar Widget on Scroll Script in Blogger

Amazing Script: Voice to Text Converter Tool Script

In conclusion of Floating Sticky Sidebar Ads Widget on Scroll Blogger

We hope that this article has helped you in creating a floating sticky sidebar widget on your Blogger website.

Well, that’s it in this post, will see you again with a new and useful script for the blogger platform. I hope you like this script and share it with your friends. Thanks for visiting.

Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.

Useful script for blogger:

Blogger Viral Wishing Website Script Collection Download

YouTube Thumbnail Downloader Script

RGB Color Guessing Game Script

Responsive Bottom Sticky Ads