How to create a floating sticky sidebar widget in blogger in 2024

How to create a floating sticky sidebar widget in blogger in 2024, Hello everyone, in this article we will learn how to create a floating sticky sidebar ad widget for our blog site. There are many WordPress plugins that can do this, but as bloggers we need to learn JavaScript code.

You can add sticky external widget ads to your Blogger page and increase your Adsense income by following the instructions in this article.

How can a sticky sidebar help increase revenue?

Floating widgets that stay on the screen while scrolling generally have better click-through and conversion rates than static widgets. As a result, floating elements appear on many websites. Text options, title bar, footer bar, etc. Themes like sidebar widget containing.

We have previously shown how to create sticky notes in Blogger. In this article, we’ll show you how to create a floating “tag” sidebar widget in Blogger.

Let’s understand the key features and benefits of Sticky Sidebar Ads widget.

What is Sticky Sidebar Widget?

Ads that scroll down the page as the visitor scrolls down are called sticky ads. It goes without saying that persistent ads do a better job of attracting more attention than non-permanent ads. More clicks mean more attention, which increases ad revenue.

Different solutions are available for mobile and desktop devices. Below I will cover both these tags and how to place them on your website.

So you can add permanent posts to any website or Blogger site using this technology. Ads with fixed footers are the second type.

Features of Floating Sticky Sidebar Ad Widget Tip

Floating sidebar widgets help you attract readers’ attention, or in other words, they like some widgets. Using this method you can make any blog sidebar widget (popular ad widget, subscription widget, ad widget, etc.) snap on scroll.

You can use this script and CSS code to color the sidebar widget of your Blogger blog.
This widget will not overlap in the footer bar.
If you adopt Blogger’s responsive design, this will not affect your blog on mobile devices.

How to create a floating sticky sidebar widget on your blog

It’s not that easy, so follow the instructions below carefully and backup your mockup before changing it. If something goes wrong, you can send the backup again.

Go to Blogger Control Panel and do the following.

Step 1: Add a new widget

To make it permanent in the future, you must first add a new widget to the sidebar. On Blogger.com go to Edit >> Add Gadget >> Add HTML/JavaScript >>. Name the widget “My Stick Gadget”. Now write whatever you want in the HTML body, like an email signup form or a Facebook box. Also save.

Step 2: Add Jquery

Now click on Template. Click anywhere in the HTML code of the HTML edit page, then use Ctrl + F to search for jquery.min.js. If you see it, ignore the following rules; If not, just copy and paste the line below. It doesn’t matter if you see this difference in jQuery; It will work 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: Add JavaScript to your template

Check it out now. Now copy and paste the code below directly onto the element. Here replace #HTML3 with your widget’s HTML code. [See steps below to find your widget ID].

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

Last step: Last added widget location; change the name

After adding the JavaScript code you need to find the name of the widget. Since we’re calling this “My Sticky Gadget”, look for “My Libra Gadget” in the template code. If you want to be able to do a proper search, you should use the search box provided by the Blogger Template Editor.

Note: Click anywhere in the template editor and use “CTRL + F” to open the search bar. You can now find the latest widgets by searching “My Flame Widgets”. It is the same as the code below but pay attention to the widget ID.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>

Note that the IDs of your widgets must be different. You cannot use the same ID for multiple widgets; for example if you use id = ‘HTML32’ in one of them.

Click Save Template and you’re done!

How to create sticky sidebar tutorial video

Please watch the entire video for a scripting demonstration with installation and usage instructions.

Finally, Scroll Blogger Floating Sticky Sidebar Ad Widget is ready. Fortunately, this article will help you. You create a floating sticky sidebar on your Blogger Sidebar widget page.

That’s all I have to say about this article. See you later with new and useful blog posts. I hope you like this article and share it with your friends. Thanks for visiting.

Thank you for visiting. For more articles like this, subscribe via email and bookmark our free plugin website.