Make Blogger Sidebar Fixed (Sticky) That Scrolls with You!


Blogger Sidebar Fixed Sticky

You can arrange your blogger sidebar in several ways. Here I will show you some way of displaying sidebar as like fixed, sticky, animating. So lets see some example!
  1. Fixed Sidebar– with only CSS [See Example]
  2. jQuery Sticky Sidebar that Scrolls with Visitor! [See Example]
  3. jQuery Sticky Widget (only a specific widget will be Scroll ) [This page is a example!, Sticky Widget is almost same as Sticky Sidebar, there whole sidebar stick around and here only a single widget stay sticky.]

1. Let's see, how to make Blogger Sidebar Fixed with only CSS

Follow the instruction below: 

  • Go to your blogger blog Dashboard > Template > Edit HTML 
  • Search (CTRL + F)  for the following code:
  • ]]></b:skin>
  • And just before ]]></b:skin> paste the CSS code below:
  • .column-right-inner { position: fixed; }
  • Save Template. We're Done!
Note: .column-right-inner is the right sidebar class. If you want to make Fised a left sidebar then replace it with .column-left-inner

2. Let's see, how to make Sidebar Sticky+Animating with jQuery

Follow the instruction below: 
  • Go to your blogger blog Dashboard > Template > Edit HTML 
  • Search (CTRL + F)  for the following code:
  • </body>
  • And just before </body> paste the following jQuery code:
  • <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type="text/javascript"> $(function() { var offset = $(".column-right-inner").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $(".column-right-inner").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $(".column-right-inner").stop().animate({ marginTop: 0 }); }; }); }); </script>
  • Save Template. We're Done!
Note: .column-right-inner is the right sidebar class. If you want to make sticky a left sidebar then replace all those class with .column-left-inner from the jQuery code.
And topPadding = 15; change the value if you need to increase/decrease space on top of the sidebar.

3. Let's see, how to make a Widget Sticky with jQuery

For example, you could make an AdSense Ads widget stycky which stick around with visitors.

Well to do soFollow the instruction below:
  • At first find-out your widget ID (ex. HTML7)
  • Go to your blogger blog Dashboard > Template > Edit HTML 
  • Search (CTRL + F)  for the following code:
  • </body>
  • And just before </body> paste the following jQuery code:
  • <script src='http://resources.infolinks.com/js/infolinks_main.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/> <script type='text/javascript'> $(function() { var offset = $(&quot;#HTML7&quot;).offset(); var topPadding = 35; $(window).scroll(function() { if ($(window).scrollTop() &gt; offset.top) { $(&quot;#HTML7&quot;).stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $(&quot;#HTML7&quot;).stop().animate({ marginTop: 0 }); }; }); }); </script>
    Note: Replace #HTML7 With Your Widget ID
  • Save Template. We're Done!

Don't forget to say thanks. Do you want to know anything else about this ? Don't hesitate to ask.

Subscribe To Get Update In Your Email

12 comments:

  1. Thank you very much for making such an easy article with this topic. It's really enjoyable and helpful.

    ReplyDelete
  2. well thank you for your effort, but this didn't work for me... i even looked for a .column-right-inner class but didn't find it in my blog's html. so the right sidebar class must be named something else and i can't find it cause i'm not very good with HTML language ! but i want to know what happens when i find mi right sidebar class and replace it in each .column-right-inner phrase used in the code you gave us ? everything will worf fine ?

    ReplyDelete
  3. nice trick. how to add two widget id, ex HTML4 and HTML5?

    ReplyDelete
  4. Thanks you.
    good for any ads on blog..

    ReplyDelete
    Replies
    1. dont apply this tips for banner ads, you will be attention from google

      Delete
  5. Hey, this worked well for me, but now not all of my sidebar is visible because it stays at its original height on the page (in line with my posts). I want it up top, so that it starts in line with my header. How do I do this? I will also probably have to shorten the width of my menu bar, and again, don't know how. Any help would be MUCH appreciated. Thanks so much.

    ReplyDelete
  6. thank you it's work, i've tried code number two (animating with jquery) but the problem is i just want to sticky only one widget in sidebar, when i imlemented your code, all widget in mysidebar are sticky too, i've tried to make rule just for id that widget, still not working. is there any solution for my problem

    ReplyDelete
  7. sorry, there is some thing wrong as the footer of my blog doesn't appear even with continous scrolling down, the pages become very very tall and have no down limit

    ReplyDelete
  8. Well. My question is how to fix the page? I mean the Page widget under the header. Thanks.

    ReplyDelete
  9. i can't make in my blog fixed with css

    ReplyDelete
  10. thank you! it has helped me a lot ^^

    ReplyDelete
  11. i am sorry, i did it, what you more than so much,,,
    i am not english speaker, so i can not tell you with much thanks, ilove you sooooooooooooooooooooooooooooooooooooooooooooooooooooooo much

    ReplyDelete