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.

Thiea Sticky Sidebar example.

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

or
tag, and add id="main-wrapper" to it. And below this ID
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>

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.

JOIN THE CONVERSATION

Comments

Have a question or something to add? Comments are moderated and appear here only after approval.

3 published comments, including 1 reply. Threads shown oldest first.

  1. DanielReader #

    “Your website’s HTML structure has to be similar to this in order to work:” Are you kidding me? The real problem is making this place. If we knew how to create this code structure, the whole problem would be solved. Can you tell me how this was done?

    1. Ashok Sihmar (Ashok Kumar)Author #

      In reply to Daniel

      Hello This website techaak.com is on WordPress and its theme Newspaper 9.8 support theiasticky sidebar. but you can implement this on your. try it once. we’re using this structure on oyedad.com thanks

  2. George BushReader #

    I wanted to implement that on bana.africa but its not working

JavaScript is required to submit a comment. Published comments above remain available to read.