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.

Comments: 45
full widget blog home page

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.


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.

Speak Your Mind

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

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.

admin demo pls ?

To see the Demo please visit below link

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

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

Welcome Elizabeth

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? :(

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.

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


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

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

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.

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!

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


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! ^_^

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.


Thanks a lot again, genius! |o|

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.


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,

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

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

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

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

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

This comment has been removed by a blog administrator.

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.

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

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

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.

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

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

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?

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

Hi Mohammad!

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

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


brother not working this on my site plz check it

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

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

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

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

Thanks Homer Oclares. :up

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *