Fixed Sidebar with Theia Sticky Sidebar for Blogger Blog

If you want to add theia sticky sidebar in your Blogger blog for the sticky sidebar, similar to some premium WordPress themes. Then this article will help you understand how a Blogger blog can have a sticky sidebar.

How to enable Fixed Sidebar with Theia Sticky Sidebar?

The most common layout of a web/blog usually consists of 2 parts, the main content (main wrapper) and the sidebar (sidebar-wrapper). The sidebar may be shorter than the main. By enabling theia sticky sidebar, the theme’s sidebar would stick, as shown in the image below.

This article will show you how to stick the Sidebar with Theia Sticky Sidebar.

This tutorial is for advanced users, and if you want to use a theia sticky optimized and advanced SEO Blogger theme, you can download any Blogger theme listed.

Your website’s HTML structure has to be similar to this to work.

Step 1: Edit Theme tags to add theia sticky sidebar in Blogger.

There is a symbolic structure in your website theme design. Then, you’ve to update it according to the website’s current layout.

<div class="wrapper">
  <main id="main-wrapper">
    <div class="theiaStickySidebar">
    ...
    </div>
  </main>
  <aside id="sidebar-wrapper">
    <div class="theiaStickySidebar">
    ...
    </div>
  </aside>
</div>

Find the main wrapper block <div> or <main> tag, and add id="main-wrapper" to it. And below this ID <div class=”theiaStickySidebar”> below this line, as displayed in the above code snippet. Then properly close all the tags to avoid errors.

and then find the sidebar block <div> or <aside> tag and add the id="sidebar-wrapper" and below this <div class="theiaStickySidebar"> below this line as displayed in the above code snippet. Then properly close all the tags to avoid errors.

Step: 2 – Add jQuery given below, just before the closing of body tag i.e.

Now. Red lines provided here should be added just below the jquery.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>
<!-- Must include jQuery -->
<script src='//cdn.jsdelivr.net/npm/theia-sticky-sidebar@1/dist/theia-sticky-sidebar.min.js' type='text/javascript'></script>
<!--your code here-->
</body>
</html>

Step 3: Add a javascript file to the footer

Add the js file to your blogger blog, just above the closing </body> tag. And save the theme file.

<script type='text/javascript'>//<![CDATA[
$("#main-wrapper, #sidebar-wrapper").each(function() {
         $(this).theiaStickySidebar()
})
//]]>
</script>

You can use your blogger theme now. However, this will not support the sticky sidebar when you scroll the feed items.

Or if you don’t want to change your current theme and not able to install it.

This is how you can make a sticky sidebar for your blog or website. In case of any doubt, feel free to ask in the comment section provided below.