How to Remove Blogger Sidebar and Maximize Main Width on Selected Pages

Removing sidebar from Blogger Static Pages is actually a great way to differentiate you pages from your posts.

Most often pages are created in Blogger for Contact me, About me, Advertise here and so on. Static pages are often used to sell products and services and are very important to every Blogger in the Blogosphere.

Formally creating a static page was impossible in Blogspot Blog unlike the easy platform of creating a static page on Wordpress. Without waiting much of your time let us go straight into today's tutorial

METHOD 1: 

Using the New Blogger Interface:  

=> Go to Dashboard 

=> Click on Template 

=> Click on Backup/Restore Your Blogger Template in Case This Doesn't Work For You 

 

=> Download Full Template to Back up Your Blogger Template

Read More: How To Back Up/Restore Blogger Blog Template Here

=> Click Close After Downloading Succesfully 

=> Click on Edit HTML to Proceed 

On the Template, find the code " </b:skin> " without quotes by clicking CTRL + F to find code .
Paste the following directly below </b:skin> - Change the address in Line 1 to the address of your page.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<b:if cond='data:blog.url == "http://mynaijaplace.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>

Check the picture below to see 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 method 2 section below.

Note that this first method is used to remove sidebar one after the other from pages. If you find this stressfull and will like to apply this to all pages then look below for method 2

METHOD 2:

If you want to apply the tweak to all of your pages, instead of addressing the page one by one, use the following code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

I hope this works for you.

Share your experience with us below using the comment box.

Having any issues using these codes after reading the steps carefully below? Then Share you experience with us too.

Do not forget to subscribe to this blog to receive daily tips on blogging tips and making money tips.