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?
That will be all folks, now go have fun.
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.
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.
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:
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"'>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:
<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>
<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.
Category Article Tutorial
