How to Make Sticky Sidebar in Blogger (The Whole Sidebar, Not Just One Widget)

Are you here to learn how to make sticky sidebar? Or floating sidebar? Or fixed sidebar? Although those terms sound similar, they're not the same. In this tutorial, I will teach you how to make sticky sidebar, which is used in this blog. If the blog content is longer than the sidebar, the sidebar will scroll and stick to the top, below the header and above the footer, making it always visible no matter how long the blog content is and vice versa if the sidebar is longer than the content.

For other HTML website, using position: sticky should be enough to make a sticky sidebar. But in Blogger, it's just doesn't work that easy. To make it possible, we must use a Javascript plugin. The plugin that we're gonna use is Theia Sticky Sidebar.

As written in the README.md of the plugin, to install it, your template structure must look similar to this:

<div class="wrapper">
  <div class="content">
    <div class="theiaStickySidebar">
    ...
    </div>
  </div>
  <div class="sidebar">
    <div class="theiaStickySidebar">
    ...
    </div>
  </div>
</div>

But what does it mean? Basically, you just need to add those extra classes to your blog div. Add class content to the div that containing your blog content, add class sidebar to the div of your blog sidebar, and add class wrapper to the div that holds both your content and sidebar div. It is optional to put class theiaStickySidebar so in this tutorial, I won't include it.

To know which div containing what element, you need to use Inspect Element tool in your browser. Open your blog, right click anywhere or press Ctrl + Shift + I to open the tool. When you already open it, simply hover on the code line per line and see which area it highlights. Don't forget to expand or collapse the code by clicking on . 

For this tutorial, I'm showing you how to find the correct div for Blogger default template named Simple Dark. Based on the photos below, the blog content is in div with class name column-center-outer, the sidebar is in div with class name column-right-outer and both of the div is located inside div with class name columns-inner. Now that you've identified it, we can proceed to edit the code in the template.

 

Open Blogger Edit HTML, and search for the classes that you found in previous step. For my template, it's columns-inner, column-center-outer, and column-right-outer. When you have found it, add wrapper, content, sidebar to those div respectively.

Now, your template structure has already satisfied the first requirement. The last thing you need to add is the plugin itself. Simply search for </body> and place these codes before it. If your template already has jQuery, you don't need to include the first line of code.

<script src='https://code.jquery.com/jquery-3.5.1.min.js' integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous" />
<script src='https://cdn.jsdelivr.net/npm/theia-sticky-sidebar@1.7.0/dist/ResizeSensor.min.js' type='text/javascript'/>
<script src='https://cdn.jsdelivr.net/npm/theia-sticky-sidebar@1.7.0/dist/theia-sticky-sidebar.min.js' type='text/javascript'/>

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.content, .sidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 30
    });
  });
</script>

Save the template and watch the plugin do its magic!