How to Create A Post or a Page in Blogger without Sidebar ?

How to display custom google search result on your own site when the minimum width required for search results is 795px and your post area is far too small? This question may have haunted you and thats probably the reason you are here.


Using this code, your power to customize the page is not just limited to just removing the sidebar from a specific page. A little understanding of the given code gives you the ability to remove any component from a specific post or page using css.

<b:if cond='data:blog.url== "url of the post or page"'><style type='text/css'>#sidebar {display:none !important}.post{width:150%;}</style></b:if>

The given code snippet removes the sidebar and expands your post area to 150% only in the page with url that replaces "url of the post or page" in the above code.

Insert the code given above between <head> and <b:skin>




Click to enlarge

Since, this code may not be applicable for all templates (because the div classes and ids used for various elements in your template may not be the same as mine) you may need to tweak this code a little. I recommend you to use "Firefox browser with firebug plugin" or "Google Chrome" browser to begin with the customization. Using "inspect element" property in these browsers which appears when you right click on any object of your blogger blog to detect the "div id" or "div class" of the elements. Then determine their property using css.





I've created this page: http://blogtalksite.blogspot.com/p/homepage.html using the code visible just below.

<b:if cond='data:blog.url== "http://blogtalksite.blogspot.com/p/homepage.html"'>
<style type='text/css'>#header {display:none !important} #topnavbar{display:none !important}#NavbarMenu{display:none !important;}#sidebar {display:none !important}#middlebox {display:none !important;}#page{background:#ffffff !important}#start_message{display:none !important;}.post{width:182%;}.entry1 h2{display:none !important}.tags{display:none !important}.info{display:none !important;}.blog-pager{display:none !important}.blog-feeds{display:none !important;}#front-popular{display:none !important;}</style></b:if>


Using the code written above I was able to:
Remove Header, Top navigation bar, menu bar, sidebar, middle box (popular posts, recent comments, subscribe), featured article section, post title, social sharing buttons, post footer and blog footer and expand my posts area to 182% for the given page.