--> Increase Page Layout Size by hiding Sidebar in Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Increase Page Layout Size by hiding Sidebar in Blogger

If you visit the Search , Advertise , 404 Error page or contact Page of MBT, you will observe that the entire page width expands and the...



expand page layoutIf you visit the Search, Advertise , 404 Error page or contact Page of MBT, you will observe that the entire page width expands and the sidebar wrapper which contains all widgets disappears. You will find these static pages and post sections looking like a plain Static HTML webpage with no labels, Author description, Icons and widgets. All that you see is a wide layout with some text and title. This is achieved by overwriting the Stylesheet with custom styles using conditional XML tags to remove certain sections of the blog layout. Sections that can be removed include your blog header, post body, sidebar, footer and what not! Today you will learn an easy way to achieve this and turn your featured pages and posts into a Website Look and not a weblog.






Live Demo





If you wish to hide individual widget sections and not an entire sidebar then read:



How it works?



Different layouts are designed with different CSS classes and IDs. You can remove any style from a HTML div section by using the property of display:none. In most blogger templates following are the Style IDs & classes that are responsible for the appearance of important sections on your blog:



  1. #header                             Styles the Header



  2. #sidebar-wrapper             Styles the Sidebar



  3. .post-title                           Styles the Title of a post or static page



  4. .post                                   Styles the Post-body



  5. .post-header  , .post-header-line-1, .post-header-line-2                Styles all elements that appear below post title



  6. #main-wrapper                 Styles the section which contains post-body #comments                       Styles the Comment section and comment form



  7. .blog-pager                       Styles the Never, Older, Home links (Page Navigation)



  8. #footer                             Styles the Bottom section of the blog



  9. .post-author                     Styles the text "Posted by Mohammad..."



  10. .post-icons                       Styles the Edit Icon



  11. .post-labels                      Styles the Label links




To hide a section we will use a conditional if-statement that will disable the ID on a specified URL only. 





What if in case your template had different classes or IDs?





In that case to identify the ID or class name simply right click that section and click "Inspect element" in Firefox or chrome. Then you will easily identify the class name or Id by viewing the source file.


Tip: You can even test the section by inserting display:none right from your browser inside that CSS code to see if the section is removed. For example if I click the sidebar section of MBT and then insert display:none inside sidebar-wrapper , it will hide all widgets. See below:





CSS View:

disable sidebar



HTML View:



identify sidebar Id



It can't me more simpler. You can ask for any help if needed.


Steps To Increase Page Layout:


The entire process involves simple steps. Follow these instructions:


  1. Go To Blogger > Settings > Template

  2. Backup your template

  3. Click Edit HTML > Proceed

  4. Search for ]]></b:skin>

  5. Just below it paste the following code:





<b:if cond='data:blog.url == &quot;URL-OF-PAGE-OR-POST&quot;'>

<style>

#sidebar-wrapper, .blog-pager, .post-header-line-1, .post-footer{ display:none !important;}

#main-wrapper { width:99%!important;}

.post { width:99%!important; }

</style>

</b:if>


  • Just replace URL-OF-PAGE-OR-POST with the complete URL/link of the page or post where you want a wide layout with no sidebar and footer. A URL should start with http://

  • You can change the width width:99% even in pixels like 960px or lower.


Tips:

 

If you also don't want to display the title of the page then add the following code just above </style>


.post-title {display:none!important;}

Repeat the same process for any section you wish to hide. If you want to hide the post labels, Edit Icon or author description, you can also add them in one line by separating each class with a comma. Like this:


.post-labels, post-icons, post-author {display:none!important;}

  

6.    Save your template and all done!

Visit the new page and see if things are as you planned. :)


Need Help?



In coming tutorials we will share how to embedded php in your Blogger layout. This can be clearly seen if you visit MBT's contact page. The page is a result of conversion of a XML file into simple HTML file. I will share in coming days how to easily achieve this. Again things will be pretty unique and fun to be tried.


If you have any questions related to the tutorial above then please post your queries in the comment box below and make sure to share the page URL you wish to style. Would be a pleasure helping you. Take good care of yourselves and those around. Peace pals! :)


COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Increase Page Layout Size by hiding Sidebar in Blogger
Increase Page Layout Size by hiding Sidebar in Blogger
http://lh4.ggpht.com/-KWp4pFC0m9I/UDpcAsWjHfI/AAAAAAAAHZ8/g1X2bjUVN2I/image%25255B93%25255D.png?imgmax=800
http://lh4.ggpht.com/-KWp4pFC0m9I/UDpcAsWjHfI/AAAAAAAAHZ8/g1X2bjUVN2I/s72-c/image%25255B93%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/08/increase-page-layout-size-by-hiding.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/08/increase-page-layout-size-by-hiding.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy