JetTheme Homepage Hide sidebar Show only posts

Should we hide the sidebar in Blogger JetTheme only on the homepage?

I searched many places on the internet and sent many messages to Facebook groups to do this, but I did not get it.

However, I found a JetTheme XML file through GitHub. Where the homepage has six posts and the site bar is hidden. After a lot of searching from there, I found out how to do this. That is why I am making it easy for you or so that you can use it as you wish. So I am presenting the solution to this problem through this post.

To complete this task, you will need to learn or know some coding. Otherwise, you will have a lot of difficulty in doing this. However, you can complete this task by following your own steps, InshaAllah.

Find the following CSS code in your Blogger JetTheme xml file. If you find it, delete the CSS.

.col-lg-8 {
flex: 0 0 auto;
width: 66.66666667%;
}

Now replace the following code above the code you got.

  .col-lg-8{flex:0 0 auto;width:100% !important;}

Then find the text below.

  /*Your custom CSS is here*/

After finding it, copy and paste the following CSS.

  .is-single #sidebar, .is-page #sidebar {display: block !important;}
.item-tag a{
    background: #f67938;
    color: #fff !important;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
}

@media (min-width: 992px){
.is-single  .col-lg-8, .is-page  .col-lg-8 {
    flex: 0 0 auto;
   width: 65.666667% !important;
}
}
.px-5 {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}

Then you need to complete one more task to display six blog posts/articles on your Blogger Homepage.

Find the HTML code below and use only 3 instead of 2. If you want, you can show 4 posts in 2 lines or 6 posts in 2 lines on the home page.

You will see double the posts on the home page if you use 3, 4, 5 and 6 instead of 2

 <div class='row row-cols-sm-2' id='blog-content'>

Examples ⬇

<div class='row row-cols-sm-3' id='blog-content'>

Find the following text below.

col-lg-4 px-3 pb-5 separator-main position-relative ms-auto

Now replace the text below over the found text.

col-lg-4 px-3 pb-5 rounded separator-main position-relative ms-auto d-none

Then save your Blogger JetTheme. Now visit your website. You can see the completed work on the Homepage.