How to make a widget sticky in Blogger

By Ashutosh Jha → Last Updated on Tuesday, October 24, 2017
Blogger is not much customizable and so bloggers working at the blogger platform has to compromise with many features. But the good thing is that with some little tweaks you can attain some of the cool features those are not available by default in blogger.

Recently, I was trying to make TricksRoad Facebook page widget sticky to get some like directly from my blog and after searching a lot for the solution, finally I implemented. 

As you can see the Facebook widget in the sidebar is now sticky and if you are at the bottom of the page also, that sticky widget will be shown to you.

In this article, I am going to show you how to make a widget sticky in blogger sidebar. Make sticky widget in blogger is an easy process and doesn’t involve many changes.

So let’s start with an easy process to make a widget sticky in blogger sidebar.

How to make a widget sticky in blogger sidebar?

Here are some of the easy methods to make a widget sticky in the blogger sidebar-

• Sign in to your blogger dashboard and select the blog where you want to make change (in case you have multiple blogs attached)

• Scroll down and click on the Layout tab
• Now you will have the layout of your blog. Just choose the sidebar widget (or the widget you want) you want to make sticky (in our case, it is Facebook like widget)

• Just copy the name of the widget (to be precise the title; in our case, it is “like us on Facebook”)

• Now move the tab called Template and choose Edit HTML option to move to the blog code.

• In the editor, do a ctrl+F and search the name of the widget you want to make sticky (which you copied). In my case, it is “Like us on facebook”.

• Once you will find that widget in the code, copy the ID of the widget. Usually, it will be something like HTML5 or HTML6 etc. Copy it!

• Again do a ctrl+F and search for </head>

• Now paste the below code above the </head> tag and change the widget ID with the ID you copied-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(function() {
    var ks_widget_top = $('#widget Id').offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop(); 
            
        if (ks_current_top > ks_widget_top) { 
          $('#widget Id').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
        } else {
            $('#widget Id').css({ 'position': 'relative' }); 
        }   
    };
    ks_sticky_widgets();
      $(window).scroll(function() {
         ks_sticky_widgets();
    });
});</script>

Make sure to replace the Widget ID with the ID you copied in earlier steps. One more thing you should note here is, if your blog already has the ajax.googleapis.com then don’t paste the below line else it won’t work.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Now just save your code and you are good to go. Check your blog and the widget you have made sticky will be showing even when you will scroll to the bottom.

Benefits of making a sidebar widget sticky

Here are some of the advantages of making a sidebar widget sticky in blogger-

• Gets more impressions
• Will be visible to the visitor throughout
• It will attract more clicks
• Your sales/conversion can be increased
• Page Views can be increased and much more…

Wrapping it up!



This was all about how to make a widget sticky in the blogger sidebar. This is the easiest way to make sidebar widget sticky in blogger.

If you are looking for some more leads or need more impression on some particular ads or any widget in your blogger blog, you can use this simple method to make a widget sticky in blogger.

Also, it is advisable to not make Google AdSense ads sticky as it is against AdSense policy. But you can make your affiliate banners sticky to get more views, clicks, and sales.

Do try to make a sticky widget in blogger sidebar and let me know if you will face any issue.
Ashutosh Jha

Ashutosh Jha is a professional blogger, Blog and IT Consultant. He writes about Blogging, SEO, Making Money, Internet Marketing and Web Design.
If you liked the post, You can follow him on the below social media.

Website: TricksRoad