Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

How To Hide Blogger Sidebar And Increase Page/Post Layout Size

by Durodola Ridwan | Monday, September 24, 2012 | 18 Comments

Hiding your sidebar to increase page layout will make your static page or post pages to look like a plain static html webpage with no labels or widgets, example of this can be found on this site 404 error page. All what you will see, is a wide layout displaying no sidebar widget. It doesn't matter where your side position is (left or right), the posting or pages area will override the sidebar layout.





How To Increase Page Layout
  • Go to your blogger dashboard
  • Click on "Design" > "Edit HTML" (For old interface)
  • Click on "Template" > "Edit HTML" > "Proceed" (For new interface)
  • Use ctrl F to find ]]></b:skin> and paste the following code below/after ]]></b:skin>

<b:if cond='data:blog.url == "Enter-Your-Page-Url-Here"'>
<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>
  • Replace Enter-Your-Page-Url-Here with the link of the page or post you want to increase it's layout to full width.
  • If you want to apply full layout to all pages, instead of adding it one by one, simply replace Enter-Your-Page-Url-Here with Static_page
  •  If you want to apply full layout to all post-pages, instead of adding link one after the other, simply replace Enter-Your-Page-Url-Here with Item, but it is not advisable that, you apply it to all post-pages.
That's all.
Enjoy! and share this post with friends/followers. Take care pals :)



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

18 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Replies
    1. what is the link of the page/post you want to increase its layout?

      Delete
    2. It is not working!

      Here is my blog http://iplaymetalmusic.blogspot.in/

      And i want to apply this in this post http://iplaymetalmusic.blogspot.in/2012/12/slipknot-before-i-forget-official-music.html

      Delete
    3. Paste the following code below/after ]]></b:skin>
      <b:if cond='data:blog.url == "http://iplaymetalmusic.blogspot.in/2012/12/slipknot-before-i-forget-official-music.html"'>
      <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>

      Delete
  2. Durodola please help me. I have a blog and I want a page to remove the sidebar. This is the page. This is a third party template:
    http://www.poemasalacarta.com/2013/01/contenido-gratuito.html

    ReplyDelete
    Replies
    1. Use ctrl F to find ]]></b:skin> and paste the following code below it

      <b:if cond='data:blog.url == "http://www.poemasalacarta.com/2013/01/contenido-gratuito.html"'>
      <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>

      Delete
  3. Hi, i'm trying to remove the sidebar and make the main post fit 100% of the width.... and remove the jquery slider also...but it ain't working for me :(( can you help me plz?? this is the page in question...
    http://cerfmontreal.blogspot.ca/p/espace-membre_8091.html

    ReplyDelete
  4. Hellooo... can some one help me plzzz.... check the post before this one.... thx

    ReplyDelete
  5. THX ... Visit to my blog http://center60.blogspot.com

    ReplyDelete
  6. How would I edit this code to still show the right or left column?

    ReplyDelete
    Replies
    1. sorry UFO, I don't really understand your question... The code is only meant for hiding sidebar (column). If you want your left or right column to still appear, then don't bother to use the code.

      Delete
  7. Thank you much! Worked perfectly!!

    ReplyDelete
    Replies
    1. You are welcome Vicki, glad that it work for you ;)

      Delete
  8. here are some of the best place to brave frontier gem hack if you want ht them click at the link to the website.this url can give you coins and secrets of 2015.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger