Fixed Sidebar with Theia Sticky Sidebar jQuery WordPress Blogger

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 will usually be shorter than the main, so if you like that your side panel show something every time and not blank anymore.  In this article, I will show you how to fix the Sidebar with Theia Sticky Sidebar jQuery that can be used in both WordPress and blogger blog.

Your website’s HTML structure has to be similar to this in order to work:

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

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

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.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 2: Determine the id/class of main, sidebar or any component you want to stick and insert the following script before </body> (in my example this is #main-wrapper, #sidebar-wrapper)

# is used for “id” component and dot ie “.” is used for the class.

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

Step 3: It’s over 🙂 Save the blogger theme and check it out.

This is as simple if you face any issue regarding the same you can comment below. You can also download our blogger themes for your blogger webpage that already inbuilt Theia Sticky sidebar in it for free. Or if you don’t wanna change your current theme and not able to install. You can contact us and send your blogger theme for modification for free.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.