Nov 3, 2016

How To Make Blogger Sidebar Widget Fixed (Sticky) on Scroll

data:blog.title
How To Make Blogger Sidebar Widget Fixed (Sticky) on Scroll Using CSS & jQuery?On Scroll Fixed (Sticky) Blogger Sidebar Widgets are very helpful to promote any content. 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.

Make Blogger Sidebar Widget Fixed, Sticky Sidebar Widget in Blogger, Make Sidebar Widget Floating on Scroll in Blogger

How To Make Blogger Sidebar Widget Fixed (Sticky) on Scroll?

This trick is here today because of one of my reader. He asks me; "How to make a sidebar widget sticky in blogger on scroll without facing any problem because I'm using a Responsive Template and when I'm using this trick from other blogs than it is generating issue on mobile view."

Recommended - Make Any Blogger Widget Fade In and Fade Out On Scroll in Blogger?

So today I brought up a method that will not make any error while someone opens your blog on a mobile device. In this trick, I've used CSS language and jQuery language which is different from other blogs, and you'll not face any bug after using this.

Features of This Sticky Sidebar Widget Trick


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


Nice Nah? Now, let's get straight to work if you're interested in applying this hack on your blogger blog.

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

STEP 1] Login to your Blogger account and select your blog in which you want to apply this technique.

STEP 2] Now select Template and then click on Edit HTML button.

STEP 3] Now search for </head> tag and paste below jQuery just above of it but in case you already have this type of any jQuery library link inside <head> ... </head> then skip this step and head over to the Step 4. :) (See Below Screenshot.)

Add jQuery Library link, Sticky Sidebar Widget in Blogger, Floating Blogger Sidebar Widget, Make Fixed Sidebar Widget

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

STEP 4] Now search for </body> tag and paste below jQuery script code just above of it.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#PopularPosts1').length) {
    var el = $('#PopularPosts1');
    var stickyTop = $('#PopularPosts1').offset().top;
    var stickyHeight = $('#PopularPosts1').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 1;
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 1
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>
  </b:if>

Customization to Make Sidebar Widget Sticky in Blogger


  • Change #PopularPosts1 with your Widget ID that you want to make fixed (Floating).
  • Change #footer-wrapper with your Footer Widget ID so that it will not float over the footer wrapper.

STEP 5] Now, To make it responsive paste below CSS code just below of ]]></b:skin> tag inside blogger template.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<style>
#PopularPosts1{width:100%;max-width:320px}
</style>
 </b:if>
STEP 6] Change 320 (This is the width of the widget in pixel.) as per your need that fits with your blog.

STEP 7] Now click on Save Template button to save this setting on your blogger blog.

Must Read - Top 10 Highest Paying URL Shortener Sites to Make Money Online.

Conclusion:

So above guide is about "How To Make Blogger Sidebar Widget Fixed (Sticky) On Scroll WIthout Facing any Issue" and I hope after using this technique you'll not face any error but in case you face any problem, then drop a comment below. I'll help ou out of sure.

Did you like this trick? Don't forget to subscribe to get latest free updates direct into your mailbox for free. Do share with your blogger friends so that they will also promote their blog content.

Thank You!
Stay Blessed & Stay Happy!
Search Tags: Make Sidebar Widget Sticky in Blogger on Scroll, How To Make Sidebar Widget Floating in Blogger?, Create A Sticky Sidebar Widget in Blogger, Make Blogger Widget Sticky on Scroll without Facing any Issue.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.