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👇