Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, May 1, 2011

Remove Blogger Sidebar and Maximize Main Width on Selected Pages

This one is a famous request in Blogger Help Forum - how to hide the sidebar on one of the static pages, and make the main blog show in full width in that page, and in that page alone. Usually, I'd give a personalize solution for each asker, as each one of them had different blog with different template that had different settings. Today, I finally took the time to generalize this tweak. Anyone can use the solution in this page, and you'll get what you want - refer to the title, I'm not gonna repeat what this tutorial does. Or maybe I will. You get to hide your sidebars (doesn't matter left, right or both) and use that space to widen your main posting area, on pages that you choose. You can apply this tweak both on your static pages and/or your post pages (the page that loads when you click on the title of your posts).


Click here for a live demo.

Did I mention that this is a one-step tutorial?
Step 1: 

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed -

Find for </b:skin> - Paste the following directly below </b:skin> - Change the address in Line 1 to the address of your page.
<b:if cond='data:blog.url == "http://yoboy-testblog7.blogspot.com/p/bla-bla.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>

The code in place:


Again, don't forget to change the address in Line 1 to the address of your page. If you want to apply the tweak to more than a page, just copy and paste another set of similar code below the first one, and place the other page's address on the second code. If you want to apply the tweak to all of your static pages, see the Bonus section below.

Bonus: 

If you want to apply the tweak to all of your pages, instead of addressing the page one by one, use the following code:
<b:if cond='data:blog.pageType == "static_page"'>
<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>
To apply the tweak to all your post-pages (the page that opens when you click on the title of your post), which might not be a good idea, use the code below:
<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>

That will be all folks, now go have fun.

587 comments:

  1. This is brilliant thank you for your great work!

    ReplyDelete
  2. @UnmotheredChild: You're welcome. Glad it worked. Cheers.

    ReplyDelete
  3. Works like butter!!! Thank you so much!
    :)
    e

    ReplyDelete
  4. I've applied the code in its proper place but nothing has changed. I was sure to change the address and place it after b:skin...Have you any idea what I could be doing incorrectly?

    ReplyDelete
  5. @Elizabeth: Glad it worked. And you're welcome. Cheers.

    @Anonymous: As long as you're using one of the designer templates, it should work fine. Anyhow, just get in touch with via email, and I'll be able to assist you further. You can contact me using the contact form below:

    Contact Me

    Cheers.

    ReplyDelete
  6. It worked for me.thanks.if u do everything right as mentioned u will succeed.

    ReplyDelete
  7. @Player47: Nicely put.

    Cheers.

    ReplyDelete
  8. Hi, sorry but this one does not worked for me. Dunno why..Can u help me check it for me? thanx

    my blog: http://mazuto.blogspot.com/

    ReplyDelete
  9. Hi, sorry but this one does not worked for me. Dunno why..Can u help me check it for me? thanx

    my blog: http://mazuto.blogspot.com/

    MaZ_OnE

    ReplyDelete
  10. @MAZ-ONE: Well, I was not expecting the tweak to work on a third party template. It's not like there's no other way, there is. If you're using a third party template, you must use a personalized code. In your case, use the code below:

    <b:if cond='data:blog.url == "YOUR-PAGE-ADDRESS-HERE"'>
    <style>
    #sidebar-wrapper{
    display: none;
    }
    #content, .single{
    width: 98% !important;
    }
    </style>
    </b:if>

    ReplyDelete
  11. awesome tutorial! is there any way to hide just one of the sidebars and leave the other one visible?

    thanks :)

    ReplyDelete
  12. Yes there is. To keep left sidebar:
    <b:if cond='data:blog.url == "http://yoboy-testblog7.blogspot.com/p/bla-bla.html"'>
    <style>
    .main-inner .columns {
    padding-right: 0px !important;
    }
    .main-inner .fauxcolumn-center-outer {
    left: 0px !important;
    right: 0px !important;
    }
    .main-inner .fauxcolumn-right-outer, .main-inner .column-right-outer {
    display: none !important;
    }
    </style>
    </b:if>

    And to keep the right one:

    <b:if cond='data:blog.url == "http://yoboy-testblog7.blogspot.com/p/bla-bla.html"'>
    <style>
    .main-inner .columns {
    padding-left: 0px !important;
    }
    .main-inner .fauxcolumn-center-outer {
    left: 0px !important;
    right: 0px !important;
    }
    .main-inner .fauxcolumn-left-outer, .main-inner .column-left-outer {
    display: none !important;
    }
    </style>
    </b:if>

    Don't forget to change the address. Cheers.

    ReplyDelete
  13. yay it worked!! and would it be possible to center the titles of individual static pages?

    thanks a lot and sorry about all the questions!

    ReplyDelete
  14. @Life: Here you go. Probably I'll write a post on this answer - running out of ideas to blog about.

    Go to Dashboard - Design - Edit HTML - Download Full Template (for backup purposes) - Find for </b:skin> - Paste the following directly below </b:skin>

    <b:if cond='data:blog.pageType == "static_page"'>
    <style>
    .post-title.entry-title{
    text-align: center;
    }
    </style>
    </b:if>

    ReplyDelete
  15. I did everythigng as I was supposed to but it still doesn't work.. could you have a look at my blog, too?
    http://snowwhitegonewild.blogspot.com

    I deleted the sidebar but my posts are not centered on the main page of my blog. :(

    ReplyDelete
  16. @jessica: You seem to only have the mainbar in your blog, and no sidebars at all. Have you tried going to Dashboard - Design - Template Designer - Adjust Widths - and adjust your width there, instead of trying to hide it? Usually fashion blogs like yours use stretch template, I'm not sure what's the deal with that. But if you want to have maximum width like one of the fashion blogs that I'm referring to, you might wanna have a look into that. You can get a stretch template by going to Dashboard - Design - Edit HTML - Select Layout Template - Minima Stretch. But beware, this will overwrite your current template. Cheers and God bless.

    ReplyDelete
  17. I put the code in just as you suggested and it did nothing. I am trying to remove the side bars on this pagehttp://www.poweredbycoupons.com/p/coupon-database.html
    I believe I do not have a designer template and would love the html code to not have sidebars for this page. I appreciate your help!

    ReplyDelete
  18. @Powered By Coupons: I can't see any sidebars in that page. I assume it worked?

    ReplyDelete
  19. Hello,

    I have a problem with the width of the page after having removed the sidebar.

    I used the code you gave to @MAZ-ONE instead of the first one as the latter did not work.

    The code works, but the main width is not maximized. Have I done something wrong?

    http://www.st-ainolopa.com/p/illustration.html

    Thanks a lot,
    Kind Regards

    ReplyDelete
  20. @Ainolopa: In your case, use this code instead:

    <b:if cond='data:blog.url == "http://www.st-ainolopa.com/p/illustration.html"'>
    <style>
    #sidebar-wrapper{
    display: none;
    }
    #main{
    width: 100% !important;
    }
    </style>
    </b:if>

    Cheers.

    ReplyDelete
  21. thanks a lot, it works perfectly. You're my hero!
    I wish you a great week,
    Kind Regards.

    ReplyDelete
  22. @Ainolopa: Yay! You're welcome, cheers.

    ReplyDelete
  23. hi
    its not working on template. I use third party template please take look at www.multibaggerstockideas.com

    ReplyDelete
  24. @Jamil: For your third party template, use this one instead:

    <b:if cond="data:blog.url == &quot;http://www.multibaggerstockideas.com/p/charts.html&quot;">
    <style>
    #side-wrapper1{
    display: none;
    }
    #main-wrapper, #main{
    float:left;
    max-width: 900px !important;
    width: 900px !important;
    }
    </style>
    </b:if>

    ReplyDelete
  25. Hi,
    Help please I'm trying to incorporate this in my blog, but I am not bright enough as the source code seems to have such <b:if tags in several parts. My URL is

    http://taxation-tz.blogspot.com/

    Thanks a lot.
    K.

    ReplyDelete
  26. Hi K,

    You will receive that warning if the code is not complete. Try again, and make sure you have everything from <b:if............................. all the way to the last character, </b:if....

    That warning will be generated even if one character is left out. Check the screenshot to make sure you're on the right path. If you're still having problem, contact me using the contact form (Click on 'Ask a Question' on top of this page)

    ReplyDelete
  27. @H A M M E R: You're welcome mate.

    ReplyDelete
  28. Er, looks like I need a different code, too. The truth is, I wouldn't mind having the side bar on some of my pages except my side bar seems too large for my taste! Ideally, I'd like to get those little share buttons (even just facebook and twitter and bookmark) and move them to some corner so they don't have to figure so prominently in the side bar and move the archives to the footer where About is - that is attached to nothing, I think. Then i could definitely lose the sidebar on the static pages and I wouldn't miss it one bit. Or just narrow the side bar in general, maybe? Argh! I'm not even sure what I want to do! Suggestions?

    (by the way - I'm having such fun playing with the code like this! Wish I could read the sizing stuff better so I could figure this out myself. The most I've been able to do is adjust sizes of fonts in the code and also tweak scripts that I've added from other sites to make them fit right. Thanks for being out there!)

    ReplyDelete
  29. @GLE: Use the following code.

    <b:if cond='data:blog.url == "YOUR-PAGE-ADDRESS-HERE"'>
    <style>
    #rsidebar-wrapper{
    display: none;
    }
    #main-wrapper{
    width: 98% !important;
    }
    #content-wrapper{
    background: white;
    }
    </style>
    </b:if>

    As for your current sidebar gadgets, you can't just move your gadgets to another place by using CSS. I can think of a trick. You need to add duplicates for your gadgets. That means there will be two gadgets of the same kind - one at the sidebar, and one more some other place. Let's call these gadgets #Gadget1 and #Gadget2. Next, you need to add conditional code to hide one of the gadgets from some page. For example, you need to hide #Gadget1 from home page. So in homepage, only Gadget2 will be seen. And then you need to add another conditional code to hide #Gadget2 from all other pages. That means in every page except homepage, only #Gadget1 will be seen.

    This will give the effect as though the gadget is switching position from one page to another, but in fact there are two gadgets.

    ReplyDelete
  30. Here's a page where I used the code:

    http://www.gardensje.com/p/about-us.html

    Why didn't the background turn white? I'm still seeing the light green from the old sidebar :(

    ReplyDelete
  31. The only thing I've been able to figure out so far is that the color of the sidebar block that I'm trying to get rid of is #e6f0d3 and that the only instance of that color in the code is ".tabs-widget-content". I can't figure this out!

    ReplyDelete
  32. help me i want to implement it on forum page of my blog so that i can embed a forum to it....
    to be more specific i want to remove the right sidebar and extend the page area to the removed right sidebar area....
    my page link is here

    ReplyDelete
  33. @GJE: Change this:

    #content-wrapper{
    background: white;
    }

    to this:

    #content-wrapper{
    background: white !important;
    }

    BTW, your sidebar background is an image file. It is not something you can change its color or anything. It has been 'hard-coded' to your template. I overwrote the image file with a plain white color, it should work.

    Let me know if your default background decides to stick around. Cheers.

    @Kumar:

    Use this code for your blog:

    <b:if cond='data:blog.url == "YOUR_PAGE_ADDRESS_HERE"'>
    <style>
    #sidebar2{
    display: none;
    }
    #main, .entry, #content {
    width: 660px;
    }
    </style>
    </b:if>

    Insert your page's address accordingly in the code above.

    Cheers and God bless.

    ReplyDelete
  34. You mean we just forgot to tell it that this is important? lol! (You're a good man, YoboY. G-d bless you, too.)

    ReplyDelete
  35. @GJE: Have a nice weekend. Cheers.

    ReplyDelete
  36. thank you ,, but it's not working ,, i use coolwater templates ..

    ReplyDelete
  37. @Arabic: That's because you're using a third party template. It is impossible to develop tweaks for template I've never heard of, that's why I tend to scope my tweaks to Blogger's default templates. But worry not, I might be able to help. What's your blog's address?

    ReplyDelete
  38. I added the code twice to take the bar off two pages. One worked and one did not. The page that didn't is at http://couponterri.blogspot.com/p/community.html. Any help is appreciated.

    ReplyDelete
  39. I post the code twice to take the sidebar off two pages. one worked and one din not. The page of the one that didn't work is http://couponterri.blogspot.com/p/community.html. Any help is appreciated.

    ReplyDelete
  40. @Terri: Your blogger sidebar has already been remove from the page that you mentioned above - the code did work. The sidebar that you're seeing in that page comes from the embedded code that you've entered in that page. It is not your blogger sidebar.

    ReplyDelete
  41. I pasted the code and for this page I want to hide the sidebars on and it did not work.

    http://www.greenmamaspad.com/p/2011-holiday-gift-guide.html

    Any advice?

    ReplyDelete
  42. Worked perfectly! I used it on my astore (amazon) page. Thanks!!

    ReplyDelete
  43. Blog - www.efi-news.com

    Hi great tutorial. I have used your tutorials to change the blog. One question, how do I remove the left side-bar for posts and static pages? This is a 4 column blog.

    Also, would love to put your blog link on our website. Hope that's ok.

    ReplyDelete
  44. @Greens: Glad it worked, and thanks for the feedback. Cheers and God bless.

    @Prakash: Use this code:

    <b:if cond='data:blog.pageType == "static_page"'>
    <style>
    #main-left{
    display: none;
    }
    #main-right{
    width: 100%;
    }
    </style>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <style>
    #main-left{
    display: none;
    }
    #main-right{
    width: 100%;
    }
    </style>
    </b:if>

    Feel free to include whatever link you want. Cheers and God bless.

    ReplyDelete
  45. Thanks a lot buddy. I have put a back-link to your blog.

    ReplyDelete
  46. @Prakash: No problem mate. Cheers.

    @ikui: No problem mate. Cheers.

    @Marianna: Sorry for my late reply. It seems like you've succesfully removed the sidebar from that page. Are you still facing any problem?

    ReplyDelete
  47. Dont know if you have answered this already but the code does not seem to have any affect on my blog pages "http://marvelouz-h.blogspot.com/" im just in the developing stages and the original template is - http://bloggertemplateplace.com/2010/10/typepress-blogger-template.html
    Thanks in advance

    ReplyDelete
  48. @YounG-H: Use the following code:


    <b:if cond='data:blog.pageType == "static_page"'>
    <style>
    #sidebar{
    display: none;
    }
    #content, #post, .post-content, .post-header, .post-date{
    width: 100%;
    }
    .post-footer{
    width: 90%;
    }
    .post-month, .post-day{
    position: relative;
    left: -200px;
    }
    .post-title, .post-title .post-cat{
    width: 100%;
    text-align: center !important;
    }

    .post-title h1, .post-title .post-cat{
    text-align: center !important;
    }
    </style>
    </b:if>

    But it's not over yet. Your template uses image-background for your posts. As such, you need to edit this image to be large enough to cover your entire page. Or alternatively, you can disable this image on your static pages and let simple colored-background to take over. Let me know if you need further help.

    ReplyDelete
  49. Thanks a lot your a genious.. it worked ive been searching for this solution for over 3 weeks..btw is there a way to have a different background image on the static pages from the home page post background??

    ReplyDelete
  50. @YounG-H: Oh yes, there is. But you need to find a suitable background first, then upload the file somewhere (yes, you can upload to one of your posts as well) and get its direct link. Then, replace the link in the code below:



    <b:if cond='data:blog.pageType == "static_page"'>
    <style>
    .post-header, .post-date, .post-bottom-comment, .commentarea, .post-content{
    background: none;
    }
    #post{
    background: url('http://farm3.static.flickr.com/2604/3977045139_c00ae395ca_b.jpg') center;
    }
    </style>
    </b:if>

    Cheers.

    ReplyDelete
  51. thanks,, one final thing though.. my background images were originally devided into 3 sections: Header, the middle part & the bottom, as you can see if your on 1 of my static pages i am wondering if those sections could each be visually modified without affecting the home page. p.s im the one designing those BG images.

    ReplyDelete
  52. @Young-H: Certainly yes. But taking your comment area into account, it seems like your post is divided into 5 sections. So, replace accordingly:

    <b:if cond='data:blog.pageType == "static_page"'>
    <style>
    .post-header {
    background: url(http://i868.photobucket.com/albums/ab245/YounG-H/Blogger/Poststop.jpg);}

    .post-content {
    background: url(http://i868.photobucket.com/albums/ab245/YounG-H/Blogger/Postsmiddle.jpg);}

    .post-bottom {
    background: url(http://i868.photobucket.com/albums/ab245/YounG-H/Blogger/Postsbottom.jpg);}

    .commentarea {
    background: url(http://i868.photobucket.com/albums/ab245/YounG-H/Blogger/Postsmiddle.jpg);}

    .post-bottom-comment {
    background: url(http://i868.photobucket.com/albums/ab245/YounG-H/Blogger/Postsbottom.jpg);}

    </style>
    </b:if>

    ReplyDelete
  53. When I got to edit html this does nothing, but when I enter it in the page html format it pushes the side bar down under my footer. I want to remove the sidebar from these pages.

    http://frugalmomofmultiplekids.blogspot.com/p/coupon-database.html

    http://frugalmomofmultiplekids.blogspot.com/p/couponscom.html

    ReplyDelete
  54. It's not working for me, I've tried a lot of the codes you have posted here and it still doesn't remove the sidebars/gadgets from my page: http://www.nickelanddimingwithnikki.com/p/coupon-database.html Can you take a look at it for me when you have a moment? Thanks so much! I appreciate it!!

    ReplyDelete
  55. @Beautiful Gaia: Something is seriously wrong with your template. If you need help fixing it, contact me immediately. Go to Dashboard - Design - Edit HTML - Download Full Template - Save the resulting xml file somewhere in your computer. Then go to www.rapidshare.com and upload your xml file there. You will be given a link. Go to this page, and leave your link there. I will get in touch with you via email.

    @Nikki M: That's because you don't have sidebar in your page to begin with. Do you want to remove the buttons below your coupon frame?

    ReplyDelete
  56. I tried the Rapidshare and its stuck initialize... I let it sit for 4 hrs and still nothing.

    ReplyDelete
  57. @Beautiful Gaia: It shouldn't take that long. Go to the page below and send me a blank query. Make sure your email address is right:
    http://www.southernspeakers.net/p/ask-question.html

    ReplyDelete
  58. I figured it out, I had to use a different code to remove the widgets from the pages! Thanks!!

    ReplyDelete
  59. I'm having problem with this one. It didn't work in blog. Please Help. This is the page where I put the Code and I want to remove the Right Sidebar.

    http://boingky.blogspot.com/p/your-personality.html

    Help please

    ReplyDelete
  60. It didn't work for me. I want to remove the right sidebar in some of my pages. I already put it and nothing happen.

    This is the page.
    http://boingky.blogspot.com/p/your-personality.html

    Help please

    ReplyDelete
  61. @Bernard: Use this code for your blog:

    <b:if cond='data:blog.url == "http://boingky.blogspot.com/p/your-personality.html"'>
    <style>
    #rsidebar-wrapper{
    display: none;
    }
    #main, #main-wrapper{
    width: 760px;
    }
    </style>
    </b:if>

    ReplyDelete
  62. Wow. It did work but the problem is my BlogPost did not maximize itself on the Right. How is this?

    This is the result
    http://boingky.blogspot.com/p/your-personality.html

    ReplyDelete
  63. @Bernard: Try this instead:



    <b:if cond='data:blog.url == "http://boingky.blogspot.com/p/your-personality.html"'>
    <style>
    #rsidebar-wrapper{
    display: none !important;
    }
    #main, #main-wrapper{
    width: 760px !important;
    }
    </style>
    </b:if>

    ReplyDelete
  64. Wow!! Thanks a lot. it works.
    You're the BEST!!!!!

    ReplyDelete
  65. @Bernard: Glad it worked. Cheers and God bless.

    ReplyDelete
  66. Hello! This tutorial has worked for me, except that the width isn't changing. It's still at 700px. I am using a template that I have customized, and I used your third party template code. The sidebar is gone, but the main wrapper length is still the same. I am doing this for a blog design for someone, so I need multiple pages to be static. Thank you so much!

    ReplyDelete
  67. @Emily: Let me have a look. What is your blog's address?

    ReplyDelete
  68. @Nadiah: The code I wrote above is to remove sidebar and maximize main column's width on selected pages only. Do you want to apply the tweak to your entire blog, or post pages (the page that appears when you click on a post title) or static pages?

    ReplyDelete
  69. Hi friend first I appreciate your hard working..and 2nd: this idea is good and is working very well for me.I want one thing more from you and that is I read your above post where I notice that you mention there three hacks.

    1.you can hid sidebar of any static page which you want.

    2.you can hide side bar of all static pages at once.

    3. you can hide sidebar to all your posts pages.

    Now I want here 1 more thing and that is:

    How to hide sidebar of specific posts pages as we can hide sidebar of specific static pages?

    ReplyDelete
  70. @Admin: Nicely constructed question. You can hide the said things on specific post pages the same way you do in static pages. Just insert the address of your post page instead of your static page.

    ReplyDelete
  71. @Mekey: Use the following:

    <b:if cond='data:blog.url == "YOUR-PAGE-ADDRESS-HERE"'>
    <style>
    #rsidebar-wrapper{
    display: none;
    }
    #main-wrapper{
    width: 98% !important;
    }
    .post-body{
    min-height: 120px !important;
    }
    .author-box-small{
    position: relative;
    top: 30px;
    }
    </style>
    </b:if>

    Cheers.

    ReplyDelete
  72. This worked great!! But now I would like to know if I can narrow margins just for this page? I like the wide width on my blog, but when I place something on the left or right it is over farther then I would like. For example I will be placing three images all in the same row.

    ReplyDelete
  73. @Robin: Can I have a look at the page that you're talking about?

    ReplyDelete
  74. Thank you, here is my blog page: http://robinscreativecottage.blogspot.com/
    I'm going to have a "store" on one of my blog pages. So this is how I'm going about doing it, it seems simple enough for me.

    ReplyDelete
  75. @Robin: I'm sorry Robin, I didn't exactly get you early on. Let me get this right. You're going to create a static page in the above-mentioned blog, and you're going to remove the sidebars and expand the main posting area's width. Right?

    I get you till this point, but I'm not exactly sure about narrowing the page's margin, and the image placement problem that you were talking about. Can I have something to look at to get a clearer picture of the problem that you're currently facing? Feel free to create a dummy blog/page for this purpose.

    ReplyDelete
  76. I'm sorry, I'm not trying to be complicated.
    My blog is 1100 wide, to me that is pretty wide compared to most blogs I have seen, I do like the width and will keep it that way.
    I would like to create one static page without sidebars, and with your code I was able to do that.

    Here is the page I'm working on:
    http://robinscreativecottage.blogspot.com/p/clear-stamps.html
    (the center photo does not align correctly in the center, I don't know why -but that is another challenge I'll work out)

    When I look at this page, my photos are stretched out across the blog page, because that is of course where I set my margins the (1100 I mentioned) But I would like to see my photos closer together, like the left photo directly under the "projects" button. So the margins are wider than I would like for this page. Does this make sense? Perhaps I can only create what I'm trying to do using an HTML table, I have tried that but haven't had much success.
    Sorry this is so long.

    ReplyDelete
  77. @Robin: That makes perfect sense. I can think of two ways. Try either one.

    1) HTML Table, as you've already tried before. See if you find the following tutorial easy to follow:

    Blogger Thumbnail Gallery

    2) Conditional HTML Tag. Go edit your template's HTML, Find for - Paste the following directly below :

    <b:if cond='data:blog.url == "http://robinscreativecottage.blogspot.com/p/clear-stamps.html"'>
    <style>
    .column-center-inner{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    }
    </style>
    </b:if>

    All the best!

    ReplyDelete
  78. Woo Hoo, adding the HTML tag worked perfectly. Thank you again!

    ReplyDelete
  79. Thank you so much! Worked like a charm for my blog :-)

    Check out the difference it made on the static pages - http://ilovethewalkingdead.blogspot.com

    Thanks!

    ReplyDelete
  80. @lain: Your store page looks awesome. You can your center it by adding the CSS below to your Template Designer:

    .post-body iframe{
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    Cheers.

    ReplyDelete
  81. Hi my friend i try to hide my sidebar in one static page but dont work.please help!!!
    My blog is:http://gamerstheelite.blogspot.com

    ReplyDelete
  82. Hi my friend i try to hide my sidebar in one static page but dont work.please help!!!
    My blog is:http://gamerstheelite.blogspot.com

    ReplyDelete
  83. @Godfather: I can't open the link that you gave. Can you check the address again?

    ReplyDelete
  84. I can't believe I haven't seen this post sooner! It worked great on my sidebars. But I also have gadgets below my posts and in the footer, is there a way to remove all of that in my pages too, just leaving the content on my home page and post pages?

    wwwluxeboulevard.com

    ReplyDelete
  85. @Stephanie: Yeabsolutely! Use this code instead:

    <b:if cond='data:blog.pageType == "static_page"'>
    <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;
    }
    .region-inner.footer-inner{
    display: none;
    }
    </style>
    </b:if>

    ReplyDelete
  86. This hides the sidebar in my "Page Elements" section... please help!!!

    ReplyDelete
  87. @Glebber: Did you insert the code directly into your CSS? Whatever it is, just remove/reverse the code. Cheers.

    ReplyDelete
  88. Nope! Inserted where you said to!
    I mean, if I remove the code... it does go back to including the sidebar. But I would really like to use this feature.

    Any ideas?
    Thanks again!

    ReplyDelete
  89. @Glebber: Well, if you've followed the instruction, you will not lose your 'Page Elements' section. What code did you use? When pasting the code that you've used in here, remove all the '<' and '>' so that you can publish your comment.

    ReplyDelete
  90. Okay, so between "]]][/b:skin] and [b:template-skin]"

    I used the following code:
    [b:if cond='data:blog.url == data:blog.homepageUrl']
    [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]

    (I've also tried replacing "data:blog.homepageUrl" with the actual URL... but that didn't work either).

    Thanks again!!

    ReplyDelete
  91. @Glebber: That explains it. Were you trying to hide the sidebar from your homepage? Because hard-css tweaks done to the homepage will be reflected on 'Page Elements' section as well. In other words, if you're gonna hide sidebars from your homepage, they're gonna be invisible from your 'Page Elements' section as well. Hope this helps :) Cheers.

    ReplyDelete
  92. @YoboY

    Oh okay I did not understand this when following the "Remove Blogger Sidebar and Maximize Main Width on Selected Pages" directions!

    Thanks!

    On a related note... is it possible to make some widgets/gadgets to be full/page width? (as in from the very furthest left of the web browser to the utmost right... sort of how many Headers are done)

    Thanks again!

    ReplyDelete
  93. I tried all of the codes you gave but cant seem to get my homepage to hide the side bar. Would you mind looking at http://movieloan.blogspot.com/
    thanks

    ReplyDelete
  94. Wonderful. Worked like a charm. And thanks for the quick response too. :)

    ReplyDelete
  95. @Glebber: That depends to the gadget. Some gadget adapts to the width of its parent element by itself, and others just don't. But the idea remains the same. Here's an example with Archive Gadget.

    @Movie raider: You're using an Awesome Inc. The tweak above will work fine in your template. You must have missed a step or something. Be sure to change the address in the code.

    @Steph: You're very much welcome. Cheers and God bless.

    ReplyDelete
  96. @neckerchief: Don't mention it :) Cheers and God bless.

    ReplyDelete
  97. Hello! i've done what you suggest every single code. But for me this works fine http://hylintugadi.blogspot.com/p/room-69_13.html but how can i remove the about me below this page only? and leaving only the chat with white background on it.

    ReplyDelete
  98. and is it possible to hide the title of this page? http://hylintugadi.blogspot.com/p/room-69_13.html only the title but still appears on page list.

    ReplyDelete
  99. @Hylin:

    Find for </b:skin> - Paste the following directly below </b:skin>

    <b:if cond='data:blog.url == "http://hylintugadi.blogspot.com/p/room-69_13.html"'>
    <style>
    #sidebar-wrapper{
    display: none;
    }
    .post-title.entry-title {
    display: none;
    }
    </style>
    </b:if>

    That should get rid of your sidebar and title, on that page alone. Happy blogging :)

    ReplyDelete
  100. Hello thanks for the quick response!
    Sidebar remove, but the content width are'nt, how to put full width with white background?

    http://hylintugadi.blogspot.com/p/room-69_13.html

    ReplyDelete
  101. Hello i've combined the code for the recent inquiry and it works! Thanks again, but one more thing on the lower right theres still a lil unwhited part. How to whiten it?

    ReplyDelete
  102. @Hylin: Good job! As for the background, I missed the little grey area that used to be your sidebar's background. It's easy to get rid of it. You know the code that I gave you in my last reply? Remove that one and use this updated code instead, or just make changes to the old code to look like the one below, whatever floats your boat :)



    <b:if cond='data:blog.url == "http://hylintugadi.blogspot.com/p/room-69_13.html"'>
    <style>
    #sidebar-wrapper{
    display: none;
    }
    .post-title.entry-title {
    display: none;
    }
    #outer-wrapper{
    background: white !important;
    }
    </style>
    </b:if>

    Cheers.

    ReplyDelete
  103. Hi, I entered the code and added my page to it, but unfortunately it's not working. Here's the page that's supposed to be full width: http://tremblantholiday.blogspot.com/p/reservations.html#

    Help! Thanks :)

    ReplyDelete
  104. @Marie-France: Use the following code for your page (same instructions as above). If it doesn't work, try removing the hash (#) symbol.

    All the best!

    <b:if cond='data:blog.url == "http://tremblantholiday.blogspot.com/p/reservations.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>

    ReplyDelete
  105. Hi YoboY :)
    I think I followed your directions perfectly but it didn't work. I don't think I'm using a fancy template. Here's the page I'm trying to make side-bar less.
    http://organicpinklady.blogspot.com/p/wholesale.html (the link to it is at the waay bottom)
    My blog: http://organicpinklady.blogspot.com/
    Thank you for your help :)
    Juliette

    ReplyDelete
  106. @Juliette: Use this code instead:

    <b:if cond='data:blog.url == "http://organicpinklady.blogspot.com/p/wholesale.html"'>
    <style>
    #sidebar{
    display: none;
    }
    #main-wrapper{
    width: 89% !important;
    }
    </style>
    </b:if>

    Cheers and God bless.

    ReplyDelete
  107. YoboY! You are genius! I'm so immensely grateful for your help. It worked! Thank you! Blessings, Juliette

    ReplyDelete
  108. @Juliette: No problem at all :) Sorry for the late reply..

    ReplyDelete
  109. @David and Colette:

    Glad you find it helpful :)

    ReplyDelete
  110. hello YoboY..
    it really sucks..
    please help me
    I've tried your bonus code but it not works in my blog.
    i am using a third party template
    i want to remove right sidebar from all pages of my blog.
    and want to maximize the posts area.
    Can you please help me on this..
    my blog address is http://erarpitsoni.blogspot.com/

    ReplyDelete
    Replies
    1. This will work for you :)

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

      Delete
  111. Worked great for me. Pasted just like seen and it removed both sidebars on the one page I specified. Lovely!

    ReplyDelete
    Replies
    1. It's always nice when things go smoothly :)

      Delete
  112. Your code didnt work, so i took another one and now, my homepage, is ok. But, i want to hide the side in all my pages (static and posts). What i have to do?? Help me!

    http://www.guimasi.com.br/2012/01/o-vira-lata-barrichello.html

    ReplyDelete
    Replies
    1. The code above is for Blogger templates only. As I've mentioned above, it's impossible to give one code that will work on all templates. You're using a third party template. One of the codes from the comments above should work in your case. But anyways, looks like you've got this sorted - I don't see any sidebars anymore in any of your pages. Or am I missing something?

      Delete
  113. hi i want to remove right side when i open any post in blog wht i do ?

    my blog

    http://uniquestuff4free.blogspot.com/

    ReplyDelete
    Replies
    1. Same steps above, but with this code:

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

      Cheers.

      Delete
  114. same step above? i cant understand?

    ReplyDelete
    Replies
    1. See the instructions I've given under Step 1 at the top of this page? Follow that step, but use the code that I've given in the comment.

      Delete
  115. i did it but nothing has changed:(

    ReplyDelete
    Replies
    1. I've just checked your template, and the code that I gave you in the comment above is nowhere to be found in your template. Make sure you follow the right steps, it should work :) I've tested the code in your template and there's nothing wrong in the code that I gave you. See for yourself:

      http://i.imgur.com/0YwDx.png

      Delete
  116. oh wow yes it works now i was putting my blog url in your code thats why its nt working now its working perfect thank u so much:)

    and this is for right side wht is the code for left side hide and if i want to hide both then?

    ReplyDelete
    Replies
    1. That's great.

      This is for left
      <b:if cond='data:blog.pageType == "item"'>
      <style>
      .lsidebar-wrapper{
      display: none !important;
      }
      #main-wrapper{
      width: 83%;
      }
      </style>
      </b:if>

      This one for both left and right
      <b:if cond='data:blog.pageType == "item"'>
      <style>
      .lsidebar-wrapper{
      display: none !important;
      }
      .rsidebar-wrapper{
      display: none !important;
      }
      #main-wrapper{
      width: 100%;
      }
      </style>
      </b:if>

      All the best!

      Delete
  117. The Bonus code is not working for me, I want to hide sidebar from all static pages on my blog, any work around for this?

    Thanks,
    Sagar.

    ReplyDelete
    Replies
    1. Hi Sagar. Use this for your blog:

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

      Delete
    2. Thanks a lot Yogaratnam, worked for me :)

      Delete
    3. Just call me Yoga. No problem at all :)

      Delete
  118. Hello. The code doesn't works for me. I made every step and nothing change. Can you help me, please?

    My blog is:

    http://americantattoos.blogspot.com/

    and my store page is:

    http://americantattoos.blogspot.com/p/tattoo-store.html

    Thank you.

    ReplyDelete
    Replies
    1. Use this code for your blog:

      <b:if cond='data:blog.url == "http://americantattoos.blogspot.com/p/tattoo-store.html"'>
      <style>
      #sidebar{
      display: none !important;
      }
      #headline{
      width: 98% !important;
      }
      </style>
      </b:if>

      Cheers..

      Delete
  119. Hello Sir ,
    code is not working for me

    my blog page url
    http://www.digitupdates.com/p/forum.html

    Thanks

    ReplyDelete
    Replies
    1. Hi Vishwa,

      Your sidebar has already been removed on that page, through this code (you already have this in your blog):

      <style>
      #sidebar-wrapper{
      display: none;
      }
      #content, .single{
      width: 98% !important;
      }
      #content-wrapper{
      background: white;
      }
      </style>


      The blue sidebar that you're seeing (the one that says 'Howdy, Stranger') isn't part of your original sidebar, rather it is a code that you've entered into that page. That code runs in iframe, and you need to go back to the source of that code if you wanna remove that scripted sidebar.

      Delete
  120. Thanks a lot bro.

    Now i want to remove all footer widgets from my blog but am not able to do that . .
    plz visjt this links to know what exactly my problem is
    http://www.digitupdates.com/p/forum.html#/discussion/2/a-web-hos
    Am not able to scroll my page if the length of the forum icreases
    plz help me
    thank in advance :)

    ReplyDelete
    Replies
    1. You can use the following code to increase the height of your page, but it is not gonna solve your problem. You still need to contact the site where you got your script from, and make necessary changes to it. Right now your script is fixed at 1000px, regardless of your actual page's height. You need to change that.

      <b:if cond='data:blog.url == "http://www.digitupdates.com/p/forum.html#/discussion/2/a-web-hos"'>
      <style>
      #main-wrapper {
      height: 1100px !important;
      }
      </style>
      </b:if>

      Delete
  121. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. The very first code should work fine. Here's a screenshot of the code in action on your blog:
      http://i.imgur.com/qWK4k.jpg

      This is the code that you should be adding. Refer to the instructions under Step 1 to see how to add this code to your template:

      <b:if cond='data:blog.url == "http://manoharganshani.blogspot.in/p/welcome.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. Done. Thanks. Sorry removed comment by mistake.hope you dont mind :)

      Delete
  122. Can you pls help me with my site?

    http://www.technews24h.com/

    ReplyDelete
    Replies
    1. Here you go:

      <b:if cond='data:blog.url == "http://www.technews24h.com/p/store.html"'>
      <style>
      #rsidebar-wrapper{
      display: none;
      }
      #main-wrapper{
      width: 98% !important;
      }
      </style>
      </b:if>

      Delete
    2. i wanna have full width header & footer and centered content(not full width)

      Delete
    3. I don't quite get what you mean. This tutorial is to remove your sidebar on selected pages, and maximize your main content's width. The code that I gave you above should remove the sidebar in your store page (since you didn't specify which page you want to make the tweak to), and it should have maximised its content's width.

      It has nothing to do with header or footer.

      Delete
  123. Thank you sooo much, this trick is the only way I have been able to get the Amazon astore to fit well. You are brilliantly awesome!!! :D

    ReplyDelete
    Replies
    1. Glad your store widget is fitting well in your page :) Have a nice weekend!

      Delete
  124. Hi there. I've been trying everything to remove the sidebar to one page of my blog but never got it to work. I am using a third party theme and the codes above aren't working. Could you check out my site please: http://www.fbgamecheats101.org/p/job-search.html

    Thank you

    ReplyDelete
  125. oh and also, will it be possible to not show the post or any part of the post at all? It's like, the page is clean and what can only be seen is the header and the search button on top and footer. is that possible? Thanks

    http://www.fbgamecheats101.org/p/job-search.html

    ReplyDelete
    Replies
    1. That is possible. But it doesn't seem like there's any sidebar or posts in your page at all. Have you taken care of them?

      Delete
  126. Hello,

    I have a new page (called forum) and i would like to edit this page so that the right sidebar is visible so that i can add gadgets to it. How can i do that ?
    Here is the page i want to edit: http://med50.blogspot.com/p/forum.html

    Thanks in advance.

    ReplyDelete
    Replies
    1. You've added the following code into your template, and this code is removing your sidebar by default. You need to remove this code first:
      .columns, .fauxcolumns {
      display:none !important;
      }

      Then, follow the instructions in Step 1 to add the following code to your template. This code will remove the left sidebar:

      <b:if cond='data:blog.url == "http://med50.blogspot.com/p/forum.html"'>
      <style>
      .main-inner .columns {
      padding-right: 0px !important;
      }
      .main-inner .fauxcolumn-center-outer {
      right: 0px !important;
      }
      .main-inner .fauxcolumn-right-outer, .main-inner .column-right-outer {
      display: none !important;
      }
      </style>
      </b:if>

      Delete
    2. Thanks. i did your first advice but i want to resize the forum so that only the right sidebar appears.

      Delete
    3. Hi Dr Ahmad. The thing is, your code is currently placed at the wrong section. Remove the code from wherever it is currently placed, and put it in the post section of your page. That means, you need to go to Dashboard - Pages - Edit your Forum Page - Switch to HTML mode (as opposed to compose mode) - and place your Forum code in there. Once you've done this, use the code in my previous reply to hide the left sidebar and only enable the right sidebar.

      Delete
    4. You are really awesome :) I have made a little modification to your code (i replaced 'right' by 'left') and it worked.

      I really appreciate your generous help.

      Regards

      Delete
  127. Okay, here's my query:
    I've got a blog: free-gadgets.co.nr built on Blogger.

    Now, I want the sidebar to appear only on the Homepage, and want it totally removed from all the other pages, in a way that the blog content wrapper expands on all the pages except the Home page. Any help you could provide with this?

    Thanks! Anyways, a nice blog there you've got yourself!

    ReplyDelete
    Replies
    1. This is the code that you're looking for:

      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      <style>
      #secondary{
      display: none;
      }
      #primary{
      width: 98%;
      }
      </style>
      </b:if>

      Cheers!

      Delete
    2. Glad to hear that :) Happy bloggin!

      Delete
  128. Having a hell of a time getting this to work on http://www.friartv.com/p/recruits.html. I've tried seemingly every variation you've put up. Any help would be greatly appreciated. Thanks!

    ReplyDelete
    Replies
    1. The very first code seems to be working fine. Here's a screenshot of the code in your blog:
      http://i.imgur.com/OudYP.png

      Here's the code again, with your page address inserted:
      <b:if cond='data:blog.url == "http://www.friartv.com/p/recruits.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. hi this is not working in my blog i want to remove right side bar on all pages

      my blog
      http://uniquefashion4all.blogspot.com

      Delete
    3. When you said you'd like to remove the right sidebar from all pages, were you referring to static pages only or practically every single page in your blog (home page, static page, post page, label page, archive page)?

      Delete
  129. THANK YOU for this excellent post, was tweaking the static pages for few hours now according to different other blogs but your code was the first one which really worked !! Thanks again !

    ReplyDelete
    Replies
    1. After a long morning, it's lovely to see this kind of comments :) You have a good day!

      Delete
  130. I can't seem to get this to work in my blog. It's a third party template. I just want the first column (on the left) and to get rid of the right one. But only for this static page:

    http://www.hotraxx.com/p/about.html

    I would also like the 1st column to be centered. I've tried modifying code here and there, but I can't seem to get any of it to work. BAH! help please!

    ReplyDelete
  131. Hi there,

    Here's the code that you need:

    <b:if cond='data:blog.url == "http://www.hotraxx.com/p/about.html"'>
    <style>
    #rsidebar-wrapper{
    display: none !important;
    }
    #main-wrapper{
    width: 100% !important;
    text-align: center;
    }
    </style>
    </b:if>

    Cheers :)

    ReplyDelete
    Replies
    1. Yay!! Oh thank you so much! I was messing with code options for the past four hours...and even started thinking to just scrap the template entirely. You saved the day!!! Thank you thank you!

      Delete
    2. LOL.. No biggie :) Happy blogging!

      Delete
  132. Many thanks for this wonderful hack with far reaching utility. Loads the posts very fast, with great readability and focus for the visitor especially some one arrives from a search. Works very well for me at http://lastingrose.blogspot.com/

    ReplyDelete
    Replies
    1. Thanks for the feedback Sreedhar, appreciate it :)

      Delete
    2. Hi Yoga, Is there a way I can eliminate the blank space on the left and right (between the sidebar) of the main text area so that I can give a feel like the Mashable site, also increase the width of sidebar to defaultof 360 pixels ?
      I searched hard and couldn't find any setting on this very fluid template.
      Many thanks in advance for your help.

      Delete
    3. This is the look I am trying to get for my front page http://ilovethewalkingdead.blogspot.co.uk/

      Delete
    4. Hi Sreedhar,

      This should expand your sidebar, and utilise the gap at either side of your blog. Let me know if it wasn't what you had in mind. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .main-inner .column-right-outer {
      margin-right: -360px !important;
      width: 360px !important;
      left: -60px !important;
      }
      .column-center-outer{
      left: -30px !important;
      }

      Cheers..

      Delete
    5. Hello Yoga, You are wonderful! Worked like a charm and everything looks fine. I presume I can change the width of side bar by adjusting the 360 px. Now that you have seen my site can I ask you a small trick to slide up my header (which is position fixed) when you start scrolling the page so it gets out of the view. Comes back in normal mode. FYI there is a twitter box slider at the bottom right which does the opposite.
      Really sorry for asking you this off topic

      Best regards
      Sreedhar

      Delete
    6. Hi Sreedhar,

      I'm not sure if I get that. Are you looking for a way to push up your header while scrolling, or when it is in static mode?

      Delete
    7. Hello Yoga, Thanks for your reply. I mean to push it up only while scrolling so the field becomes clear.

      Delete
    8. Hi Sreedhar,

      To have a varying height based in certain conditions (scrolling, in this case) would require javascript. Unfortunately, I'm not very good at that. In any case, this CSS should make things look less bad while scrolling.

      body, #Header1{
      margin-top: -20px !important;
      }
      #HTML27 {
      margin-top: -210px;
      }

      Delete
    9. Hello Yoga, many thanks for your reply. I was wondering if you could do something in css with z index as I already have header1 at margin top:6% and HTML27 at margin top:-3%, just leaving enough for the blogger status bar. The Java script snippet used for the Twitter slide out is
      [script type="text/javascript"]

      $(document).ready(function() {$(".w2btwitterbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-440"}, "medium");}, 500);});

      Wonder iof there Is anything to hover function for scroll ?

      Delete
    10. Hi Sreedhar,

      I'm sorry I didn't quite get the last one. What is it that you're trying to do again? Z-index, hover and scroll are like three different elements. Z-index is a CSS attribute that lets you control element overlapping. Hover is similar to javascript's mouseover function. While scroll primarily refers to javascript/jQuery's document-ready function. That is, to perform a certain action when user scrolls. Are you trying to bring your twitter gadget to the front or something?

      The previous code that I suggested should get rid of the small margin at the top of your blog, thus making your header look slightly better. Checkout the screenshot.
      http://i.imgur.com/0hKPI.png

      Delete
    11. Hello Yoga,
      Many thanks again for your help. I have tried out the css you suggested which moves up the header but hides the CSS menu I have in HTML27. The gap you see is explicitly provided as the header overlaps the menu when someone zooms the page. I have in fact set the Z index of the three elements I have added to the header ( A GOOD lesson from your tutorial not seen anywhere else)vis a vis the SHARE buttons on the left split and the FB Like box and the label menu on the right split under the Adsense banner. Without setting the Z index lower at 6000,5000,and 4000 these elements will hide the adsense and the header when the page is zoomed.
      You see I had been a good student of a great GURU in extenting the envelope!

      Now I have two questions:
      Can I use the scroll function to hide the header while someone scrolls the page so he can see everything clearly. The header comes back when the page is static?

      The second: Is there anyway I can set the size of horizontal and vertical space between elements disappearing all together when the page is zoomed so that they don't overlap, like when viewed in an IPAD or smaller screen ?

      Delete
    12. I'm sorry it took me so long to reply you. Now, to your questions

      1) As far as my javascript knowledge goes, I know how to perform a certain action based on scrolling. But this is how it works. When the user scrolls, the action is performed - once, and only once. It is not dynamic. That means, when someone scrolls, your header will be hidden, and remain hidden. Im pretty sure those who really know Javascript will come up with a better way to solve the problem you're having. I'm not even a noob when it comes to Java..

      2) I get what you mean, but I don't see a way forward. The standard blog width is 960px. As long as you plan your blog's width to be within this size, it should be fine in most devices. If this is a major concern, I'd suggest you to decrease the width of your main area.

      Delete
  133. is it possible to remove the sidebar while viewing a specific post?

    i'm using a template that does not apply the same layout to it's static pages as it does to it's post pages.

    so i want to make a specific post page look like a static page but i want to remove the side bar and maximize the whole layout so it will look like a static page.

    here is the link http://www.shoprandomstuff.com/2011/01/g-pub-restaurant-and-catering-services.html

    i hope you can help

    ReplyDelete
    Replies
    1. Yes it is possible. Follow the instructions in Step 1, but use this code instead:

      <b:if cond='data:blog.url == "http://www.shoprandomstuff.com/2011/01/g-pub-restaurant-and-catering-services.html"'>
      <style>
      #sidebar-wrapper{
      display: none !important;
      }
      #main-wrapper{
      width: 96% !important;
      }
      </style>
      </b:if>

      Cheers.

      Delete
    2. Hi,
      I have tried every variation of code on this page and can not get it to work. I have no idea why.
      I have 2 blogs, one is a 2 column and the other is a 3 column layout. I can not get this working on either of my blogs.
      I would like a "full width" code for specific static pages for both 2 and 3 column "simple" template layouts.
      So far, doesn't work. Any idea why?
      Please help. Thanks!

      Delete
  134. I can't seem to use your contact sheet to ask my question. I have used this code before (great btw), but am now designing a new site using a third party template. I know there must be a code in there overriding this code and wondered if you would be able to help me modify it. The test site I am working on is: www.lb-test-blog.blogspot.com. I have the code for template too if that helps.

    Thanks. So happy I found your site!

    ReplyDelete
    Replies
    1. Hi Stephanie,

      Thanks for informing about the contact form.

      Regarding the tutorial, yeah, it can be done for your new template as well. Do you wanna do it for all your pages or is there a specific page that you'd like to apply the tweak onto?

      Delete
  135. Sorry it has taken me a bit to check back in. Thank you for your reply. I want to do it to all my additional pages so that it only shows on my homepage.

    ReplyDelete
  136. thank you very much
    may god bless you

    ReplyDelete
    Replies
    1. Thank you, that was nice :) God bless you too :)

      Delete
  137. Help, please and thanks. I have one static page that I display full width. I had a 2 column setup and it worked perfectly. My blog is now a 3 column blog (2 sidebars w/posts in the middle) and I can't get it to work! I want to hide both sidebars for this page. I've tried all the code on this page, which seems logical..but it isn't working. I'm using the blogger Simple template, simple 3 column layout.
    Thanks!

    ReplyDelete
    Replies
    1. Hi roadstar,

      Technically, the code posted in the tutorial above should work. If it isn't working, I need to have a look at your blog to see what's wrong. What's your blog's address?

      Delete
  138. I can't seem to make this code work on this blog. What code should I use to make a page full width on this blog:
    Thanks!
    http://torontobluesdiarytemp.blogspot.com/

    (the name of this blog will be changing soon)

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.