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 should a blogger theme edited to enable this feature.

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, sidebar of the theme 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, if you want to use a theia sticky optimized and advanced SEO blogger theme, then you can download any blogger theme listed.

Your website’s HTML structure has to be similar to this in order to work. The red lines should be added in the theme HTML file, blue line should be updated to the older one.

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

<div class="wrapper">
  <div id="main-wrapper">
    <div class="theiaStickySidebar">
    ...
    </div>
  </div>
  <div id="sidebar-wrapper">
    <div class="theiaStickySidebar">
    ...
    </div>
  </div>
</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 you’ve to update the jquery file if it is older than current version 3.5.1 (in January 2021) with Google js jquery library provided in blue lines. Red lines provided here should be add 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 your blogger theme now. This will not support sticky sidebar when you scroll the feed items.

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

This is as simple if you face any issue regarding the same you can comment 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 *

Back to top button