Remove Sidebar from Specific Blogger Page and make full width page in blogger

I have earlier posted about how to remove blogger sidebar but there I explained how to remove the blogger sidebar from the entire blog.

There I received many comments that how to remove sidebar from specific blogger page and not from the entire blogger blog. I searched for some tweaks and finally was able to do so.

In this article, we will see how to remove sidebar from specific blogger page and make full width page in blogger. As we know, blogger platform is not that much customizable compared to other blogging platform like WordPress, Joomla, etc. But if you know some basic HTML and CSS, you can make tweaks to some extent.

Benefits of having full width specific blogger page

One might ask why we need to remove the sidebar from some specific blogger page. Let me share some points where we may need a bigger width page which can act as a landing page. You can use such pages as a landing page which provides better CTR.

You may need to show some design which requires more width
You may want to hide sidebar from specific blogger page and make it like a landing page
You are promotion some offers where you need more spaces and many such requirements

No matter what is the reason behind this, if you are looking to hide the sidebar from specific blogger page, this article is for you.

I will share the code to hide sidebar from a specific page or hide the sidebar from all the static blogger page. By this way depending on your need either you can remove sidebar from a specific page or pages or from all the static blogger page.

How to remove sidebar from specific blogger page and make a full-width blogger page

Please follow the below steps to hide the sidebar from specific blogger page.

Step 1: Login to your Blogger dashboard

Step 2: Backup your existing template (good practice before making any change) by navigating, Dashboard - Template - Backup/Restore - Download Full Template.

Step 3: Again, navigate to template and click on Edit HTML button to access the Blogger HTML code.

Step 4: Find for the term "</b:skin>" . You can simply use ctrl+f to find this pattern.

Step 5: Paste the below code right below the "</b:skin>" line.

<b:if cond='data:blog.url == "your blog page URL"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

Step 6: Make sure to change the URL (paste your page url for which you want to remove sidebar in place of "your blog page URL") in the first line to your blogger page URL for which you want to remove the sidebar.

How to remove sidebar from more than one page in Blogger

The above section explained how to hide sidebar from a specific blogger page. What if the user wants to remove it from more than one page?

Well, just paste the above code once more and make sure to change the URL to the page from which sidebar should be removed. Repeat the steps for as many pages as you want and it will work.

How to remove sidebar from all the blogger page?

Well, so far we talked to hide the sidebar from some specific pages. But what if you need to hide blogger sidebar from all the static pages? You can use the following code for this and hide sidebar from all the blogger pages.

<b:if cond='data:blog.pageType == "static_page"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

How to hide sidebar from all the blogger post?

So far we have seen how to remove sidebar from blogger pages. But what if when you need to hide sidebar from all the blogger posts. Here posts mean when you click on the post title from home page and the next post page opens, how to remove sidebar from blogger posts.

<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

You can use the below codes at the same place to hide the blogger posts sidebar completely and get full width posts.

How to remove the sidebar from blogger?

We have reached to the last option where someone might want to remove the sidebar from the blogger blog itself. This includes all the pages, posts, homepage etc.

Well, we have already covered this topic in an earlier post and you can follow for reference- how to remove blogger sidebar.

This was all about how to hide sidebar from a specific page in blogger, how to hide sidebar from all the blogger pages, how to hide sidebar from all the blogger posts etc.

Do try these as and when you require and let me know for any issue if you experience.

Post Tags:

Blogger

Ashutosh Jha

Ashutosh Jha is a professional blogger, Blog and IT Consultant. He writes about Blogging, SEO, Making Money, Internet Marketing and Web Design.
If you liked the post, You can follow him on the below social media.

Website: TricksRoad

Social Links:
Rss
Facebook
Twitter
Linkedin
Youtube