Hide Sidebar To Show Full Width Posts And Pages

The main purpose of this trick is to hide sidebar gadgets of your blog to show full width of your blog posts. Adding and removing gadget is very easy in blogger but sometimes it gets messy when you don't want the gadget to show on your blog posts.



Hide Sidebar To Show Full Width Posts And Pages

So what this trick will do is hide all your gadgets on your sidebar whenever a visitor will open your blog posts or pages. So that you can show your content that matters.

Your gadgets will only appear on your homepage and they will be hidden on every post and page. You can also hide your gadgets on your homepage only so that your gadgets will appear only when your visitor opens any post or page.

Show full width homepage by hiding your gadgets on your homepage

Some other article that might be useful for you:-

Show gadget only on specific page or post 

Hide gadget on specific page or post

You just need to follow these simple steps to show your full width blog posts.
In case, you want to revert back to normal just remove the code.

Steps to follow


  • Open blogger
  • Go to 'Template' and select 'Edit HTML'
  • Now search for this code </b:skin>
  • Now paste this code just after the above code


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


  • Now save your template



Save yourself from the headache.
Hire me and I'll take care of your problems.

In case, you're using a customised or third party template please try this code if the above code fails to work.

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

I hope you can now view your blog posts in full width. If not then check if you're following all the steps.

Wanna say thanks in comments?

I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

0 comments:

Don't forget to check 'Notify me' box to get notification of reply.