How to add a start page to your Blogger blog

In WordPress there is an option where you can choose what to display on your homepage – your blog posts, like everybody else, or a static page that works as a welcome page. In Blogger there is no such option, or is there? You will find out soon. Blogger is extremely customizable and a lot of WordPress features can be replicated in Blogger with some clever coding. Today I will show you how to add a static start page to your Blogger blog that shows only when you visit the homepage. At first you might like to see a live demo.

Since every blogger template is different, particularly the custom made ones, you will first have to understand the structure of the blogger template in order to know where to make the edits. At first backup your blogger template, which is a must before you do any sort of editing.

A typical layout of a blogger template, with one sidebar and a single footer is shown in the figure below. Some templates have an extra wrapper enclosing the main wrapper and the sidebar. Note, that almost all CSS based sites have this same basic layout.
blogger-layout

We will place the start page at the location where the main wrapper appears. So the first thing you have to do is to locate the main wrapper within the CSS description. Different template authors use different names for the main wrapper. To locate the main wrapper, follow this trick:

Press CTRL+F and search for “<b:widget id=’Blog1′“. The DIV section within which the widget Blog1 resides is the main wrapper. Once you have found the name of the main wrapper, find it’s CSS description in the template.
After you have located the main wrapper, copy the content within the { } brackets of the main wrapper description and paste it immediately underneath the closing } bracket. Name this section ‘startpage’. Keep margin and padding settings, if any, intact. You can play with color settings if you wish to give the start page a different look. The edited template will now look like this:

#content {
    float: left;
    width: 540px;
    height: 100%; 
    background: #fff;
    }

#startpage {
    float: left;
    width: 540px;
    height: 100%;
    background: #fff;
    }

Now press CTRL+F to launch the search box again and type <body> to locate it in your template. DO NOT expand the widget templates. Right after the <body> tag, the actual blogger template will begin (all the stuff above it is CSS). In a typical blogger template you will first see the div section for the ‘outer wrapper’ (Refer to the image of the layout above). Then comes another div for the Header section. Finally you will see the main wrapper. There might be other sections in between depending upon the template. The main wrapper will look something like this:

<div id=’main-wrapper’>
        <b:section class=’main’ id=’main’ showaddelement=’no’>
        <b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
        </b:section>
  </div>

Edit the template so that you get this:

<b:if cond=’data:blog.url == data:blog.homepageUrl’> 
   <div id=’startpage’>
    <!– Start Page Goes Here–>
    </div>

<b:else/> 
     <div id=’main-wrapper’>
        <b:section class=’main’ id=’main’ showaddelement=’no’>
        <b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
        </b:section>
      </div>
</b:if>

What we have done is added a new section called startpage which shows up only when you visit the blog homepage. The blog posts are removed from the home page. If you click on any post from the links on the sidebar or visit the labels and categories section, the startpage will disappear and your blog posts will show up. Now all you have to do is design your start page using any HTML editor like Frontpage and copy the code in place of <!– Start Page Goes Here–>.

The blog as it looks from the Layout page

It’s possible to remove the sidebar, footer and even the header and make the start page take up whole of the screen. You just have to use the correct width parameters in the CSS and then place the sections you want to remove within the <b:else/> and </b:if> sections.

Try it. It will make your blog unique.

This Article Has 44 Comments
  1. Thiruppullani Raguveeradayal Reply

    Thank you Sri Kaushik. This is for which I was waiting for a very long time.
    Raguveeradayal

  2. kang dede Reply

    thank you for sharing

  3. Roschelle Reply

    This is clearly an awesome idea. I'm just terrified that I would mess it up royally. I think I might create a test blog to try this type thing out on before incorporating it into my functioning blog. Thanks for sharing

  4. chandamama kids' blog Reply

    Hi, First of all thanks so much for your tutorial! I am pretty much a beginner so these changes are a bit challenging but I followed your instructions and it all looked pretty good except that my image does not appear (?!). (I uploaded the image (created in Adobe) in webs.com.) Any idea what can be the problem?
    Again thanks for sharing, very useful and appreciated! Chantal

  5. Kaushik Patowary Reply

    Webs.com appears to have hotlinking disabled, which means the image wouldn't appear on anywhere else other than on sites hosted on webs.com.

    Upload the image on a free image hosting site such as Imageshack or Photobucket

  6. chandamama kids' blog Reply

    Kaushik, Thanks so much for your quick help but unfortunately some how I cannot figure it out. I did upload the image in photobucket instead but same problem a thin white strip on the page but no image….? Do I need to add some thing when copying my code instead of Start Page Goes Here?

  7. Anonymous Reply

    I've followed your tutorial and it's worked. Now, the only but is that now there are missing elements in the "page elements" page. For example I cannot see my sidebar, which makes it a little difficult to add/delete widgets. Is this normal or maybe I messed with something else?

  8. Kaushik Patowary Reply

    I think you messed up. The sidebar should show up unless you removed it from the homepage. Only the items removed from the homepage doesn't show in the Page Elements layout, in this case the – Blog post.

    I have added a new screenshot to the article it illustrate this.

  9. Anonymous Reply

    Yeah, my fault. I have just gone through the template and it turns out that I'd miswritten some of the stuff in the CSS… Sorry for the trouble… and thanks again for the trick!

  10. Unknown Reply

    thank you !!!!!
    i failed to implement same on side bar?

  11. fabrizio mingarelli Reply

    wow works very well but my "newer pages" link doesn't work anymore. it liks to the first page and not to previous. any solution?

  12. Kaushik Patowary Reply

    @tommibpusher: That shouldn't have happened. Something must have gone wrong when you were editing. I suggest you start over again.

  13. Pia Reply

    thanks for sharing such a informative article!!! i am able to add homepage to my blog

  14. Djraj10 Reply

    HELP ME!!!

  15. Djraj10 Reply

    Can you help me out. Add Djraj10 on Skype to tell me the Basic Instruction cuz I ain't got it!!!

  16. Shreya's Shop Reply

    blogger designer template has different code, not bale to find.it has no wordds like div id or main wrapper…confused

  17. EPC Holcomb Reply

    I tried, but I couldn't. I am using a template "simple" and I haven't been able to find #content or main-wrapper. any help??
    Thanks

  18. Kaushik Patowary Reply

    @IEP Rochelle: If you send me the template, maybe I can take a look.

  19. Lynn Reply

    Could you please go into detail about how to remove the sidebar, footer, and header? I'm horrible at manipulating the html code.

  20. Lynn Reply

    Never mind, I got it! Wow, it's amazing how being a dedicated blogger increases your knowledge of html.

  21. Alejandro Villamarin Reply

    Hi there,

    Great Article! I can't find the main-wrapper id you mentioned. The div containing the bwidget only has class attribute, no id. Is this still working nowadays?

    Best regards,
    Alex

  22. Kaushik Patowary Reply

    @Alex, don't worry if it doesn't have the outer wrapper. Just find the main wrapper, that is where the work needs to be done.

  23. Alejandro Villamarin Reply

    Hi again Kaushik, thanks for the quick response, but I'm still not sure which div is the main wrapper, let me show you a chunk of my template:

    <!– corrects IE6 width calculation –>
    <div class='columns-inner'>

    <div class='column-center-outer'>
    <div class='column-center-inner'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>
    </div>

    What div you recon in the one that is the main wrapper? Thanks!

  24. Kaushik Patowary Reply

    'column-center-inner' seems like the main wrapper.

  25. Alejandro Villamarin Reply

    Hi again,

    Ok, but when trying to find the css defined for that class, I found that is spread in several places:

    .main-inner .column-center-inner,

    .main-inner .column-left-inner,

    .main-inner .column-right-inner {

    padding: 0 5px;

    }

    *+html body .main-inner .column-center-inner {

    margin-top: -$(date.space);

    }

    #layout .main-inner .column-center-inner {

    margin-top: 0;

    }

    /* Mobile

    ———————————————– */

    *+html body.mobile .main-inner .column-center-inner {

    margin-top: 0;

    }

    .mobile .main-inner .column-center-inner,

    .mobile .main-inner .column-left-inner,

    .mobile .main-inner .column-right-inner {

    padding: 0;

    }

    Thus, there seems to be a "mobile" version…I'm not really sure about how to proceed now…thanks

  26. Kaushik Patowary Reply

    @The Internet Mosquito: If you don't know the basic CSS stuff, it will hard to proceed.

    Just create a new DIV section called start page and define your own styles and use that instead.

  27. Sarvani Reply

    Great trick thanks a lot ……

  28. Anonymous Reply

    Do I need to change this bit
    ""

    to include the actual urls?

  29. Azlin Reply

    dear kaushik,

    i did try to follow the instruction but nothing appear. is it because of the template that i use? im using simple x photo gallery template

    Link to my template : http://simplexdesign.blogspot.com/2010/01/simplex-gallery-has-some-update.html

    My blog : http://www.dstorybook.com

    thanks in advance
    thanks

  30. Azlin Reply

    i did it…thank you kaushik…

  31. Unknown Reply

    Great tips! It's done. Thanks a bunch, Kaushik.

  32. SuperPrince Reply

    its hard for me to do it my god!

  33. JCLarsen Reply

    It has to be more simple than that I thought. And yes – it is!
    I simply deactivated all the little things that makes a post appear as a blog-post. Just edit Blog-post in Design un-check all. Now I have a post that appears as a page. http://ipo-weekend2011.blogspot.com/

  34. Anonymous Reply

    can any one tell me how to add multiple post in a blogger page (other than home page ), any other scripts needed…

  35. Moorfrosch Reply

    Hi Kaushik!

    I need your help!
    I edited my template using your tutorial. Everything is working fine if I use static text only.
    But if I tried to add HTML codes to the static text like
    then Internet Explore block the prewiew mode with this message: "Internet Explorer has modified this page to help prevent cross-site scripting attack".

    Can you please help me out?

  36. Kaushik Patowary Reply

    @Moorfrosch: Whatever code you are trying to add is triggering the message. You should review the code because IE thinks it's dangerous, and maybe it is.

  37. Anonymous Reply

    Hi Kaushik!

    Thank you for your answer.
    I still have no idea, where is the problem with my code.
    I only used "p" and "h1" tags. Nothing special. What do you think why IE saying this scross-site scripting thing?

    If I make this change with firefox (no error messages while editing the code), than IE display my blog without any problem or scross-site scripting message.

  38. Maninder Singh Reply

    Hi Kaushik,

    when i try to save html code i get the following error:

    http://i41.tinypic.com/2h6cylf.png

    Kindly confirm if something has gone wrong while editing the template.

  39. Kaushik Patowary Reply

    @Maninder Singh: That looks like a Blogger problem, but also depends on what you were trying to do. Usually, errors in the template doesn't produce this error message.

  40. Unknown Reply

    Hello,

    I'm trying to use a template but i'm having a little bit of trouble with the static page.
    I was able to set up a landing page, but I'm unable to set up the condition for the static pages.

    Could you please help me?

    My web address is http://www.annadusekphotography.blogspot.com/p/about.html

    Thank you!

  41. toolpaddz Reply

    hi kaushik!
    Thanks for the great tutorial! I have one question, though. I'd be glad if you found the time to answer this!
    Is it possible to just define a page already created in the blogger settings (say something like the photo gallery, one's resume, etc.) as the start page? What would I have to insert instead of "!– Start Page Goes Here–" to link to this page?

    Thanks in advance!
    Patrick

  42. Kaushik Patowary Reply

    @toolpaddz: No, that won't be possible. You could use meta redirect to redirect the homepage to another page, but I won't suggest you to do that.

  43. Riken Maharjan Reply

    Awesome blogger tutorials……….Thankyou So much

  44. jayr Reply

    hey. thanks for this.. im gonna use this on my blog.

Leave a Reply to Pia Cancel reply

Your email address will not be published. Required fields are marked *