Wednesday, September 24, 2008

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.

44 comments:

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

    ReplyDelete
  2. 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

    ReplyDelete
  3. 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

    ReplyDelete
  4. 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

    ReplyDelete
  5. 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?

    ReplyDelete
  6. 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?

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

    ReplyDelete
  8. 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!

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

    ReplyDelete
  10. 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?

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

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

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

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

    ReplyDelete
  15. 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

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

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

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

    ReplyDelete
  19. 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

    ReplyDelete
  20. @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.

    ReplyDelete
  21. 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!

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

    ReplyDelete
  23. 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

    ReplyDelete
  24. @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.

    ReplyDelete
  25. Great trick thanks a lot ......

    ReplyDelete
  26. Do I need to change this bit
    ""

    to include the actual urls?

    ReplyDelete
  27. 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 : www.dstorybook.com

    thanks in advance
    thanks

    ReplyDelete
  28. i did it...thank you kaushik...

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

    ReplyDelete
  30. 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/

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

    ReplyDelete
  32. 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?

    ReplyDelete
  33. @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.

    ReplyDelete
  34. 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.

    ReplyDelete
  35. 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.

    ReplyDelete
  36. @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.

    ReplyDelete
  37. 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!

    ReplyDelete
  38. 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

    ReplyDelete
  39. @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.

    ReplyDelete
  40. Awesome blogger tutorials..........Thankyou So much

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

    ReplyDelete

Popular Posts