Make Full Width Post Page by Hiding Sidebar in Blogger

Though I have already shared to make full width Blogger home page and static page but there are some user those who wants to hide sidebar in Blogger post page. 

The main function of this trick is that your Blogger home page will display everything like Header, post, sidebar, footer but when you click on any post then sidebar will be invisible on post page.

Recommended: Make Blogger Home Page Full Width and Hide Sidebar

By using a conditional tag we can easily do this job. This trick generally apply for those kinds of Blog who wants to display their Blog post in a full width page. In addition you can display wide images with full width related post widget. Some Blog designer adopt this trick for tweaking their Blogger Template.  I hope your Blog visitors will love it.

Recommended: Make Full Width Page in Blogger Default & Custom Template

Trick For Default Blogger Template User

Both Default and Custom Blogger template user can able to apply this trick. So first we will go for default Blogger template user like Simple, Picture Window, Awesome int. So please follow the instruction.

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard

Step #2: Click on Now click on -> Template -> Edit HTML

Step #3: Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step #4: Copy the code from below and Paste the code after/below </b:skin> 

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

Step #5: Now simply hit the Save template Button. 

Trick For Custom Blogger Template User

Now its turn for Custom Blogger template user. But there are some problem in this code because all designer are not using same word in coding. Suppose in case of main-wrapper declaration some designer use main-area, similarly instead of sidebar-wrapper some designer use right-wrapper.  So if the code don't work then you have to find the exact code that used in coding. So please follow the instruction and change the code according to your template coding.

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard

Step #2: Click on Now click on -> Template -> Edit HTML

Step #3: Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step #4: Copy the code from below and Paste the code after/below </b:skin> 

 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#main-wrapper .post {
padding-left: 1px !important;
padding-right: 1px !important;
}
#main-wrapper { width:99%!important;}
.post { width:99%!important; }
#sidebar-wrapper,#sidebar-wrapper .left,#sidebar-wrapper .right, #midsidebar-wrapper .post-header-line-1, .post-footer{
display:none !important;
}
</style>
</b:if>

Step #5: Now simply hit the Save template Button. 

That's it. Now check your Blogger site and see everything is showing on homepage but when you enter into a Post page then your content will stretching to full width. And your sidebar is not visible. I have told before that this trick will help the user those who wants to use wide image or organize the post on full width page. If you have any query about this then feel free to leave a comment below.