How to create Responsive sticky[fixed] sidebar widget for blogger/Wordpress

B logger is still a popular site and choices for the new blogger who starts their blog without any investment. Although it does not consist of all those features which a paid blogging site like WordPress given. Even though we can do any customization in our blog as a WordPress blog just by editing the HTML code of our blog.

Recently, I was trying to make subscribe/newsletter widget sticky to get some subscribers to my blog by attracting them to the floating newsletter widget and after playing with codes and searching a lot for the solution, finally, I implemented it on my blog and it works as per my expectation.

As you can see the Subscription widget in the sidebar is now sticky and it floats in the sidebar incomplete posts.

In this article, I am going to show you how to make a widget sticky in the blogger(blog spots) as well as Wordpress sidebar. Make a sticky widget in blogger is an easy process. So let’s start with easy tricks to make a widget sticky in the blogger sidebar.

 Benefits of making a sidebar widget sticky

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

          1. Visible to the visitor throughout and thus attract visitor towards it.
          2. Gets more impressions
          3. It will attract more clicks
          4. Page Views can be increased and much more
          5. Your sales/conversion can be increased
          6. You can increase your subscribers and many more...

 How to make a widget sticky in the blogger(Blogspot)?

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

Step:#1» Open your blogger dashboard and click on the theme than on the dropdown menu in the right corner of your screen then select edit HTML.

Step:#2» Click anywhere in the code area and press Ctrl and F from your keyboard, a search box appear then search there for a </bogy> tag

Step:#3» Now copy the code given below and paste it just above the </body> tag.

One  thing you should note here is, if your blog already has the ajax.googleapis.com then don’t paste the below first line else it won’t work.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ $(function() { if ($('#widgetID').length) { var el = $('#widgetID'); var stickyTop = $('#widgetID').offset().top; var stickyHeight = $('#widgetID').height(); $(window).scroll(function() { var limit = $('#footerID').offset().top - stickyHeight - 20; var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { el.css({ position: 'fixed', top: 20 }); } else {el.css('position', 'static'); } if (limit < windowTop) { var diff = limit - windowTop; el.css({top: diff }); } }); } }); //]]> </script>

Make sure to replace the Widget ID with the ID of your widget. And FooterId with you fotter id to stop floating the widget over the footer. You can get your widget ID from, as shown in the image. To Find Your Widget ID, Check out this video👇

Step:#4» Now save the template and see if the widget becomes floating or not. Check it on both the computer and mobile views.

If you are using a responsive template then this floating widget may create a problem in the mobile view so to fix it you need to add some code to hide the floating widget from the mobile view.

Note:-- You can skip step 5 if sticky widget working well, after saving code in step 3.

Step:#5» Search "]]></b:skin>" and then paste the code given below just above "]]></b:skin>"

 #widget Id{width:100%; max-width:320px }  @media only screen and (min-width:260px) and (max-width:989px){  #widget Id{display: none!important;}}

Step:#6» Hit on the save button and save your template.

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.

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 a blogger.

How to make a widget sticky in the WordPress sidebar?

The first thing you need to do is to install and activate the Q2W3 Fixed Widget (Sticky Widget) plugin. After activating the plugin, go to Appearance » Widgets and click on the widget that you want to make sticky.

This plugin will add a Fixed Widget option in all of your widgets. Check the Fixed widget box and click on the Save button to save your changes.

You can now visit your site and scroll down to check your fixed widget. Your fixed widget will now become a sticky floating widget.

One thing more I want to tell you that Sticky Widget plugin comes with options to configure the positioning of the fixed widgets. To do it go to Appearance » Fixed Widget Options to configure the plugin. On this page, you can set the margins, add your own HTML IDs and even disable the fixed widgets on the phone and tablets.

If you are looking for some more leads or need more impressions 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.

We hope that this article helped you implement a sticky floating sidebar widget in your Blogger as well as WordPress website.

Write in a comment box if you face any problem in implanting it on your site and don't forget to share it with you friends.