Make Full Width Post Page by Hiding Sidebar in Blogger

Learn how to make Full Width Post Page by Hiding your Blogger template Sidebar. Hide both Default and custom Blogger template's sidebar.

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.

full widget blog home 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.


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"'>
.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;
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;'>
#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;
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.
Philip Verghese 'Ariel' says: 2/11/2015

Good one, But my doubt is if we go for a wide width page and the sidebar is invisible what is the use since those who place add on the sidebar it will be a damn waste right, as you said its only useful for those who want to use wide image or organize the post on full width page.
Tanks for this tuto.
I am bookmarking it for my future use
~ Philip Ariel

BloggerSpice says: ADMIN 2/11/2015

Hi Mr Ariel..Thanks for bookmarking. I think rather adding 300 X 250 size ads its better to place 970 X 250 Billboard size AdSese ads below of the post title or end of the post. But if you display sidebar then it is not possible for us to display 970 X 250 Billboard size AdSese ads. For this reason this trick is useful.

In case of my Blog when any visitors clicking on 300 X 250 size advertisement on average Google paying me 1-10 cents or sometime 15 cents(Visitors from USA, UK). Now I have placed 300 X 600 size ads and it is generating 40+ cents per click (Visitors from USA, UK). Suddenly this is generating 35 cents from per click (Indian visitors). So from my point of view, using large ad banner is a wise decision. But it may differ in case of your adsense account. Thanks.

protr says: 7/07/2015

admin demo pls ?

BloggerSpice says: ADMIN 7/08/2015

To see the Demo please visit below link

Unknown says: 8/31/2015

It worked! But requires from tweaking if you made some tweaking your default theme too! But it worked..

BloggerSpice says: ADMIN 8/31/2015

thanks Antonio.. Can you please share the code with us? ^_^

Unknown says: 12/03/2015


BloggerSpice says: ADMIN 12/03/2015

Welcome Elizabeth

Jess says: 1/02/2016

Hi! I just tried this tutorial in my demo blog with default theme and it worked perfectly but when I try it in my official blog, it doesn't. I have a edited theme so I think it could make problems to this code... The problem is that when you enter the code, the sidebar disappears but the width of the post remains the same... Could you help me please? :(

BloggerSpice says: ADMIN 1/02/2016

Hi Jess...This is not any problem. just coding identification error. Suppose all of my template's post-wrapper and sidebar-wrapper placed under #main-wrapper so I have used code like below

#main-wrapper { width:99%!important;}

You can see from below image I have divided my template’s homepage into part.

Main-wrapper and sidebar-wrapper

And Main-wrapper and sidebar-wrapper I have wrapped up together by content-wrapper
Here main-wrapper containing my template’s post snippets in homepage. So you have to find out the code in your template. It may be


Different template developer use different code. After finding the code replace all
#main-wrapper with your template's post wrapper code then it will work.

Thank you.

Jess says: 1/03/2016

This is what happens when I open a post on my blog:

And then I noticed that I haven't got content/post/left-wrapper but only these strange codes, so I tought that Artisteer (the program which I used to make the template) uses different codes. Do you recognize any code?
Thanks for your help :D


Jess says: 1/04/2016

Hey! ^_^ I just found out this:
I think that #main-wrapper is #art-main, I tried to replace the code with it but nothing :t

Jess says: 1/04/2016

OMG I just do it!!!!!!!!! Ahahah you saved my life, I was out of control @@, THANKS a lot! I'm following your blog! =D

BloggerSpice says: ADMIN 1/04/2016

That's great... Congratulation…I am really happy to hear that. This is all about finding the right code. And I would like to inform you a simple thing about my Blog Comment section that you don’t have to use any short code for displaying image.

[IMG]....... [/IMG] -> Not Necessary

If you simply add any Image URL then this will display. And even if you share any video link then it will show easily. I have designed this template like this way.

Once again Thanks to be a part of Blogger Spice.

Natalie Pinto says: 1/06/2016

Hi I'm having the same issue as Jess, but the help you provided her is not helping me. I can't find any code that says "wrapper" in my blog template coding. Can you please help? Thank you!

BloggerSpice says: ADMIN 1/06/2016

Hi Natalie .. can you please give me your Blog URL..I have to check it first to give solution. Thank you.


Jess says: 1/06/2016

Hi Mohammad, I'm sorry to write you again for another problem in blog @@,
I wrote a post with full size photos and it looked amazing. The problem came when I returned on hompage and noticed that the photo didn't make smaller and overwrite the sidebar :t What should I do? I don't know if this is normal... Thanks! ^_^

BloggerSpice says: ADMIN 1/06/2016

Hello again Jess.. please follow the simple tutorial from below URL to make your post image responsive.

And if your image size is very large then select the image on post editor and select x-large option. then your post image will be fit according to post body width. Thank you.


Jess says: 1/06/2016

Thanks a lot again, genius! |o|

BloggerSpice says: ADMIN 1/06/2016

Welcome Jess..I am glad to hear that you have solved your problem. For any kinds of further help feel free to leave comment.I will be pleased to help you.


Jess says: 3/05/2016

Hey Mohammad! What's up? I'm still working on my blog and I have always the same problems ahaha!
Let's see if you can help me also this time...

I'm working on a static page and I want to hide the sidebar and the other things and I've done it.
The problem is when I write something and the text doesn't fill all the space where there was the sidebar. :t
What can I do? I'm actually using this code under

Hope you can answer me,

BloggerSpice says: ADMIN 3/05/2016

Hi Jess.. I just visited your Blog. The coding of your Blogger template is little different like below-

.art-content-layout {
.art-content-layout .art-content {
.art-content-layout .art-sidebar1 {

in the above

.art-content-layout is your content-wrapper where post-wrapper and sidebar containing.

.art-content-layout .art-content is for Blog Post-wrapper and

.art-content-layout .art-sidebar1 is for sidebar content. and finally

.art-postcontent is your Blog post.

For make it work, hide .art-content-layout .art-sidebar1

and make 100% width of .art-postcontent code. I hope it will work. :re

Jess says: 3/06/2016

Yeeeeah, I've done it! :f1 :dn Thanks a lot for your avalability :sl

BloggerSpice says: ADMIN 3/07/2016

Jess I am very glad to hear that.Its all about understanding the code, nothing else. :sp

Unknown says: 3/21/2016

i want to create a complete blank page without header footer menus sidebar.I just want to diplay ad of 300x250 on that page like is created by modifying template as page but i want to create a new blank page inside my blogger.Help

BloggerSpice says: ADMIN 3/21/2016

Hi there your webpage is not opening. Kindly send me a screenshot. However plese follow the tutorial from above.

Unknown says: 5/02/2016
This comment has been removed by a blog administrator.
apkimod says: 5/03/2016

all its okey but when i try to visit my site with the mobile, appears a big width, my question is, how i can set this configuration only in pc.

Unknown says: 5/03/2016

why did you delete my comment? did i ask something wrong? its not nice..

BloggerSpice says: ADMIN 5/03/2016

Hi Kaleem Khan... Your hidden URL is suspicious. Your name is Muslim but you have shared hidden Blog URL about Hinduism. Many fake webmaster trying to SPAM in my Blog. That's why I have removed it. Few days ago Google was put my Blog in SPAM list. So I don't allow any suspicious clickable URL.

The above script will work in any template but you need to change the script according to the designer. Read the comments carefully from above you will get the solution. :up

BloggerSpice says: ADMIN 5/03/2016

Hi there..If you are using responsive template then Edit your template and locate below code.

@media only screen and....

the above code use for making a template responsive. It can be found 4/5 times in your Blogger template And you have to add all the original code of your template under each @media only screen and...

for example I have used CSS script

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

here post width will be 99%. and sidebar, footer everything will be hidden.

so you have to change it under each responsive code

@media only screen and...

I think this will be bit confusing for you. But before make any changes please take backup of your Blogger template.

Enrique says: 6/18/2016

Hi bro, Your code is not working on my blog, I just found this code and I have to paste it at the ned of every post on my blog it take a lot of time so, I don't wanna apste this code every I writte a post. Where Do I have to put this code in the HTML on my blog?

< style>
#main-wrapper .main-inner{border:none;}

BloggerSpice says: ADMIN 6/19/2016

Hi Dany. Instruction has given above for adding widget code. You have to add the code snippet above/before


but this script is depend on your template code. My template's "content-wrapper" named as "main-wrapper" and in your template code maybe different. So according to your template code should change.

you can follow the comments of Jess from above interaction. You will get clear idea. Thank you. :t

Elaine says: 8/29/2016

Hi Mohammad!

Your given code almost worked on my template after changing the word coding that the designer used. It display a full width post page however when I scroll down, there's the sidebar. What do I do?

BloggerSpice says: ADMIN 8/30/2016

Hi Elaine Vidal,
I just checked your Blog. Your sidebar code written as #sidebar, only. But in my script I have written #sidebar-wrapper, So instead of that write only #sidebar,

replace all #sidebar-wrapper, with #sidebar,,

I hope it will work now. :-d

_vancaballero says: 9/07/2016

Hi Mohammad!

Thanks for giving us the code. Did a little tweaking on the code and now mine works.

BloggerSpice says: ADMIN 9/07/2016

Hi Vanessa,
Nice to hear that the script is working on your Custom template. Wish you best of luck in your Blogging career.


_vancaballero says: 9/10/2016

Thank you!

M.Waqas Qamar says: 2/17/2017

brother not working this on my site plz check it

BloggerSpice says: ADMIN 2/18/2017

Hi Waqas Qamar,
How did you get this template? who has sold to you? This is completely copyright violation.

M.Waqas Qamar says: 2/18/2017

brother mene buy kia ha is se Md. Hridoy Hossen Owner Of plz fix this problem brother

BloggerSpice says: ADMIN 2/18/2017

So it will be better to get all support from Md. Hridoy Hossen. Please ask him how to fix the issue. And Md. Hridoy Hossen won't receive any updated version of this template in future. I'm working on 1.1 version for release. Thank you.

Anonymous 5/27/2017

hey bro, how can i get that "-->" off ?? please help

Homer Oclares says: 9/16/2017

Hi Mohammad! My blog is and your trick works like magic! Your instructions are also very clear. Thank you so much. =)

BloggerSpice says: ADMIN 9/17/2017

Thanks Homer Oclares. :up

Mohamad Yusop Iberahim says: 3/08/2018

Greetings. My template has two side bars, left and right. I want to hide left bar and make the post stretch to the left consuming left side bar. Is this code could be used for that?

BloggerSpice says: ADMIN 3/20/2018

Hi Mohamad
Just take my script as example. Try to find your theme's left sidebar script

display:none !important;

replace .left-sidebar with your sidebar code.

Now again find the post or main bar code and replace the code #main-wrapper .post

#main-wrapper .post {
padding-left: 1px !important;
padding-right: 1px !important;

I hope it will work 100% :up

Rahul Dey says: 8/22/2018

Hello , It works fine on blogger post page but I want to do it on blog page for example I want to hide sidebar & widget from below page
Thanks .

BloggerSpice says: ADMIN 8/26/2018

Hi Rahul Dey

Just copy the below code and paste it on your specific page for full width page. This will work 100%.

.main-inner .columns {
width: 99%!important;
padding-left: 1px !important;
padding-right: 1px !important;

.fauxcolumn-outer.fauxcolumn-right-outer {
display: none;

Thank you :)

Rahul Dey 8/26/2018

Nothing work . Tried in this blank page .Hoped you will help me .
Plz, cheek & tell me what to do .

Contact Form


Email *

Message *