Increase Page Layout Size by hiding Sidebar in Blogger

expand page layoutIf you visit the Search, Advertise , 404 Error page or contact Page of MBT, you will observe that the entire page width expands and the sidebar wrapper which contains all widgets disappears. You will find these static pages and post sections looking like a plain Static HTML webpage with no labels, Author description, Icons and widgets. All that you see is a wide layout with some text and title. This is achieved by overwriting the Stylesheet with custom styles using conditional XML tags to remove certain sections of the blog layout. Sections that can be removed include your blog header, post body, sidebar, footer and what not! Today you will learn an easy way to achieve this and turn your featured pages and posts into a Website Look and not a weblog.

Live Demo

If you wish to hide individual widget sections and not an entire sidebar then read:

How it works?

Different layouts are designed with different CSS classes and IDs. You can remove any style from a HTML div section by using the property of display:none. In most blogger templates following are the Style IDs & classes that are responsible for the appearance of important sections on your blog:
  1. #header                             Styles the Header
  2. #sidebar-wrapper             Styles the Sidebar
  3. .post-title                           Styles the Title of a post or static page
  4. .post                                   Styles the Post-body
  5. .post-header  , .post-header-line-1, .post-header-line-2                Styles all elements that appear below post title
  6. #main-wrapper                 Styles the section which contains post-body #comments                       Styles the Comment section and comment form
  7. .blog-pager                       Styles the Never, Older, Home links (Page Navigation)
  8. #footer                             Styles the Bottom section of the blog
  9. .post-author                     Styles the text "Posted by Mohammad..."
  10. .post-icons                       Styles the Edit Icon
  11. .post-labels                      Styles the Label links
To hide a section we will use a conditional if-statement that will disable the ID on a specified URL only. 

What if in case your template had different classes or IDs?

In that case to identify the ID or class name simply right click that section and click "Inspect element" in Firefox or chrome. Then you will easily identify the class name or Id by viewing the source file.
Tip: You can even test the section by inserting display:none right from your browser inside that CSS code to see if the section is removed. For example if I click the sidebar section of MBT and then insert display:none inside sidebar-wrapper , it will hide all widgets. See below:

CSS View:
disable sidebar

HTML View:

identify sidebar Id

It can't me more simpler. You can ask for any help if needed.

Steps To Increase Page Layout:

The entire process involves simple steps. Follow these instructions:
  1. Go To Blogger > Settings > Template
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. Search for ]]></b:skin>
  5. Just below it paste the following code:

<b:if cond='data:blog.url == &quot;URL-OF-PAGE-OR-POST&quot;'>
<style>
#sidebar-wrapper, .blog-pager, .post-header-line-1, .post-footer{ display:none !important;}
#main-wrapper { width:99%!important;}
.post { width:99%!important; }
</style>
</b:if>
  • Just replace URL-OF-PAGE-OR-POST with the complete URL/link of the page or post where you want a wide layout with no sidebar and footer. A URL should start with http://
  • You can change the width width:99% even in pixels like 960px or lower.
Tips:
 
If you also don't want to display the title of the page then add the following code just above </style>
.post-title {display:none!important;}
Repeat the same process for any section you wish to hide. If you want to hide the post labels, Edit Icon or author description, you can also add them in one line by separating each class with a comma. Like this:
.post-labels, post-icons, post-author {display:none!important;}
  
6.    Save your template and all done!
Visit the new page and see if things are as you planned. :)

Need Help?

In coming tutorials we will share how to embedded php in your Blogger layout. This can be clearly seen if you visit MBT's contact page. The page is a result of conversion of a XML file into simple HTML file. I will share in coming days how to easily achieve this. Again things will be pretty unique and fun to be tried.
If you have any questions related to the tutorial above then please post your queries in the comment box below and make sure to share the page URL you wish to style. Would be a pleasure helping you. Take good care of yourselves and those around. Peace pals! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

34 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Nice widget sir :]

    i have a question , suppose i hide all the sidebar in homepage to increase the width of my layout . but when i will open any post then it will effect the width of the sidebar and the width of the body layout ?

    P.s sorry for my bad english :]

    ReplyDelete
  2. BAsically my question is i want to hide the sidebar in homepage but want to make visible in post pages ?

    is this possible sir ?

    ReplyDelete
  3. Just one Word Superb ;) Can't get better then that :)

    ReplyDelete
  4. Dude not working for me it makes the width of whole blog not specific page

    ReplyDelete
  5. One More Thing Sidebar don't get hide it start appearing when the content ends

    ReplyDelete
  6. Oh and yea I am desperately waiting for the PHP in Blogger thing although I know how to do it somewhat but I would really love to have a perfect tutorial on it especially needed for a contact page.

    ReplyDelete
  7. it is what i am looking for.great info. i have a problem i am not abkle to change my post title color.i am using h3 for title and tried hard but nothin works.Also edited .post h3 id nothing works.others id such as .post h4 are working.pls help

    ReplyDelete
  8. Something error..Its apply whole in my blog, not a specific page and sidebar widgets is not hide..Please reply...

    ReplyDelete
  9. @abhishke


    Sure you can do that! Simply use this code:

    <b:if cond='data:blog.pageType == "item"'>
    <style>
    #sidebar-wrapper{ display:none !important;}
    #main-wrapper { width:99%!important;}
    .post { width:99%!important; }
    </style>
    </b:if>


    :)

    @Faizan

    Buddy your template has exact same IDs. I have updated the code in step#5. I had forgot adding a comma between first two classes. Try and let me know
    Make sure to specify a URL of the page and add it below b:skin end tag
    :)

    @bhavesh

    In that case Blogger has a predefined data type for static pages. Simply use this code instead of the conditional statement in step#5.

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

    Try it and it will work just fine! :)


    @PRamod

    You are using a template by : Josh Peterson. All templates that he designed are styled using groupd variables.
    find and edit this:

    <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#5162c5"/>




    and then this:


    a:link {
    text-decoration:none;
    color: #5162c5;
    }


    @Technononimous Tweaker
    Please contact us via our services page.


    @Sarath S Pillai
    I have updated the code. Please make sure to specify a URL in step#5
    The code works just fine. Let me know if you needed more help.
    :)


    @Akbar
    Our pleasure. :)

    ReplyDelete
  10. @Mohammad Sir, Yes Bro Yesterday I Corrected the Coding Via MBT Page Source. It Worked Like a Charm. Peace

    ReplyDelete
  11. Brother, One Last thing the Step 5 Is confusing lots of Readers. So Rather then Adding the Code in Template we can add it in our specific Post/Pages that would work more properly and Users won't have to mess up a lot. Peace

    ReplyDelete
  12. There is something wrong in your code.I tested it on two of my blogs.Blog Home page also displaying without sidebar.

    ReplyDelete
  13. No sir, I am using Mbt church template and I am unab.le to edit its post title setting

    ReplyDelete
  14. @Faizan
    Oh that's great! Well sure it can be added inside the post editor too but the control will not be global in that case. If in case you wanted to hide sidebar for all static pages, you will then need to paste this code just once inside template instead of repeated adding of style sheet inside editor. :)

    @Prasad Madushanka
    Code is updated buddy please retry.

    @PRamod
    Oh sorry I saw your second blog. For doing that create a separate class as shown below:

    h3.post-title.entry-title {

    color:#333333;
    text-decoration:none;
    }


    You can add further styles to it. To create hover effect of this use:

    h3.post-title.entry-title:hover {

    color:#333333;
    text-decoration:none;
    }


    Let me know if this works. Normally I always set the post title color as the body default text color and that's why you could not overwrite it.

    ReplyDelete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. Mohommad,Your code works.This is a original trick.Thanks lot MBT.

    ReplyDelete
  17. muhammad bhai 1 problem , i have put #sidebar-wrapper{blah blah blah;display:none;} i have done these changes and then putt your given code in the extact place you have told but problem is my sidebars are hidding in that page i have given in that given code but my body of post width is not increasing now what to do?

    ReplyDelete
  18. sORY BRO YOUR CODE NOT WORKING AT ALL !! the code worked for me is this :

    <b:if cond='data:blog.url == &quot;http://xulfihacks.blogspot.com/p/xhack-forum_4.html&quot;'>
    <style type='text/css'>
    #sidebar-wrapper{ display:none !important;}
    .blog-pager{ display:none !important;}
    .post-header-line-1{ display:none !important;}
    .post-footer{ display:none !important;}
    #main-wrapper{ width:980px!important;}
    #mainpage-wrapper{ width:970px!important;}
    .post { width:960px!important; }
    .post-body{ width:960px!important; }
    </style>
    </b:if>

    ReplyDelete
  19. @meesum raza

    For the error page you will have to use the following conditional statment:

    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>

    It will work just fine. :)

    @Zulqurnain jutt
    Humble apologies for the late reply buddy. Well you answered your question in your last comment. As I mentioned our given code is based on the templates we design only. Your template might have different coding so the classes would differ. I have clearly mentioned how can you identify these classes from your source file. Luckily you found them out correctly. In your case there are only two different classes/ids which are:

    #mainpage-wrapper

    .post-body

    both of them controlled the width of the container. Its all about trial and error and I am glad you figured it out yourself. :)

    ReplyDelete
  20. didn't work on my blog. I added the paragraph bellow /b:skin with my http


    http://www.2gotogether.blogspot.it/p/blog-page_776.html

    ReplyDelete
  21. Thank you Thank you

    Been trying to do this for weeks & no one else's code worked!!!!

    ReplyDelete
  22. It does work, but there is something above my blog now (-->)
    How can I remove this? (everythingismakeable.blogspot.nl)

    ReplyDelete
  23. http://i49.tinypic.com/2lbc30m.png
    here is screenshot

    ReplyDelete
  24. when i add this code the width of main-wrapper remains 99%of the homepage too. May I know what shall i do?

    ReplyDelete
  25. thanks man.. thanks a lot worked for me...
    hu hu hu

    using it here : http://www.andro-park.org

    ReplyDelete
  26. It does not work for me. I made a new page called "FORUM" in blogger and i add the nabble code (nabble code: http://pastebin.com/BaAfAhvj ) in the page from blogger itself. (blogger- edit page/html/)

    The forum is now showed up in the specific page as you can see:
    http://tdm-euro.blogspot.nl/p/blog-page.html

    Now this is my problem:
    The forum is showed up only in a small size (left) and does not fill out the whole page.

    Now for the last 5 days i tried almost everything to fix this

    Now am i doing someting wrong? Can you help me please to fix this? I need to fill out the Nabbit forum to the whole page (the white background)

    Do i have to change something in my code?
    Here is my full blogger template code:
    http://pastebin.com/XUu6AHba

    I Hope some one can help me,

    CoolNutz,

    ReplyDelete
  27. Not Working :( :( :( :( :( :( :( :( :( :(

    ReplyDelete
  28. sir, i need to increase the width of the main content area in blogger static pages

    ReplyDelete