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

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 the </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 the </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!

Paramjot Singh
 

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I’m blogging since 2 years, and here on My Blogger Guides, I’m sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 5 comments
Maina Ndung'u - March 4, 2017

Doesn’t work.
The code in step 4 is full of errors and not acceptable by blogger.

Reply
SAPA TRAVEL BLOG - June 9, 2017

GOOGLE SEARCH BROUGHT ME HERE, THANK YOUR POST. I GOT IT ALREADY. 🙂

Reply
Manoranjan Paul - August 1, 2017

Can I use this floating widget for adsense ad?
Please reply.

Reply

Leave a Reply:

0 Shares
+1
Pin
Tweet
Stumble
Share
Share