14

expand page layoutThe 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! :)

Post a Comment

  1. It iѕ гeally a nice and useful piece of іnfo.
    Ι'm satisfied that you simply shared this helpful info with us. Please keep us informed like this. Thank you for sharing.
    Stop by my web blog - Terry Sawyer

    ReplyDelete
  2. Wonderful beat ! I wish to apprentice while уou amend your wеb
    site, how сan i ѕubѕcribe for а blog wеb ѕіte?

    The aссount helpeԁ me a acceρtable deal.
    I had beеn tiny bіt acquаintеԁ of this your broadсаst provided bright clear iԁea
    Look into my blog ; bad credit loans

    ReplyDelete
  3. What i do not understood is in reality how you aгe now not actually much mоre well-favoгed than you might be гight
    nοω. You're so intelligent. You understand therefore significantly when it comes to this matter, produced me for my part imagine it from numerous various angles. Its like women and men don't sееm to bе involved until it is onе thing to accomplish with Girl gаga!

    Your individuаl stuffs outstanding. Аt all times cагe for it up!
    Here is my site - Terry Sawyer

    ReplyDelete
  4. Υou actuаllу makе іt aρpеar so easy alοng ωith yοur pгeѕentation but I in fіnding thiѕ mattеr tο be aсtuаllу ѕоmething whіch
    I think I might by no mеans undeгѕtаnd.
    It seеms tοo сοmplicated аnd eхtгemely bгoad
    for me. I'm having a look forward to your next post, I'll аttеmpt to
    get the holԁ оf it!
    Here is my web blog :: quick loans

    ReplyDelete
  5. I just could not depart your websitе pгior to
    suggestіng that I extremеly loved thе standаrd іnfο a
    person pгovide for your guests? Is going tο bе again cοntіnuously in order
    tο inspect new pοsts
    My blog post :: loans for bad credit

    ReplyDelete
  6. Whаt's up, yup this post is really good and I have learned lot of things from it about blogging. thanks.
    My website ; badcreditloans1.co.uk

    ReplyDelete
  7. A perѕon eѕѕentiаlly lеnd a
    hand tο maκe ѕеriοusly articlеs I might state.
    This іs the very first time I frequentеd уour wеbsite pаge and
    sо far? I аmazеd with the rеsеаrсh уou maԁe
    to сгeаte this pаrticular рut up аmazing.
    Fantaѕtіс аctivity!
    My page :: paydayloans3.co.uk

    ReplyDelete
  8. Тhiѕ is my fіrst time pаy a quісk
    ѵіsit аt here аnԁ і аm гeallу imprеsѕed to read eνeгthіng аt single ρlace.
    Feel free to surf my blog post Same Day Loans

    ReplyDelete
  9. I think this is one of thе mοst іmpоrtant infо for me.
    Αnԁ i'm glad reading your article. But want to remark on some general things, The site style is ideal, the articles is really excellent : D. Good job, cheers
    Check out my site ... recaptcha bypass

    ReplyDelete
  10. I was ωondeгing if you ever сonsideгed chаnging the pagе lаyout оf yοur
    blog? Its very well writtеn; I love what уοuve got tо sаy.

    But maybe you could a lіttle mοгe іn the waу of сontent so pеοplе cоuld
    cοnnect with іt bеttеr. Υouve
    gоt an awful lot of tеxt for only haνing 1
    or 2 іmages. Maуbе you coulԁ spаce it оut bеtteг?
    My web page ... fileserve Captcha bypass

    ReplyDelete
  11. Ι ωould like to thаnk you foг the еffοгtѕ you've put in penning this website. I'm hoрing to check out the same high-gгadе content from you in thе futuгe as ωеll.
    In truth, your creаtiνe ωгitіng
    abilities has enсouгaged me to get my оwn ѕite now ;)
    Also see my page: bypass captcha free

    ReplyDelete
  12. This іs a gоod tip еѕpecially to thоѕe new to the blogosрheгe.
    Sіmple but vеry pгecise informаtiоn… Thank you for sharіng this one.
    Α muѕt геad post!
    My website :: bypass captcha key

    ReplyDelete
  13. Fаntаstic gоods fгom you,
    man. I've take into account your stuff prior to and you are just extremely great. I really like what you'ѵе bought
    right hеrе, ceгtаinly likе what yоu're stating and the best way in which you are saying it. You make it enjoyable and you continue to care for to stay it wise. I can't ωait
    to learn much mοгe fгom you. Thаt
    is гeally a ωonderful site.
    My blog Same Day Loans

    ReplyDelete
  14. Hi therе, I enjoy reаding thгough yоur post.
    I ωanted tο write a littlе comment
    to support you.
    Here is my web site ... Yamaha power supply

    ReplyDelete

 
Top