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.
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
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 == "item"'>
<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.
