BloggerWordPress

Fixed Sidebar with Theia Sticky Sidebar jQuery WordPress Blogger

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 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.

In this article, we will show you how to stick the Sidebar with Theia Sticky Sidebar.

Blogger Theme with Theia Sticky Sidebar
Blogger Theme 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 the symbolic structure of your website theme design. Then, you’ve to update it according to the current layout of the website.

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

Find main wrapper block <div> or <main> tag, add the id="main-wrapper" to it. 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.

and then find 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.

Ashok Kumar

Ashok Kumar working in the Search Engine Optimization field since 2015. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on seoneurons.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Related Articles

2 Comments

  1. “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. 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

Leave a Reply

Your email address will not be published. Required fields are marked *