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.
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:
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:
<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:
<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.
Thank you Sri Kaushik. This is for which I was waiting for a very long time.
Raguveeradayal
thank you for sharing
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
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
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
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?
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?
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.
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!
thank you !!!!!
i failed to implement same on side bar?
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?
@tommibpusher: That shouldn't have happened. Something must have gone wrong when you were editing. I suggest you start over again.
thanks for sharing such a informative article!!! i am able to add homepage to my blog
HELP ME!!!
Can you help me out. Add Djraj10 on Skype to tell me the Basic Instruction cuz I ain't got it!!!
blogger designer template has different code, not bale to find.it has no wordds like div id or main wrapper…confused
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
@IEP Rochelle: If you send me the template, maybe I can take a look.
Could you please go into detail about how to remove the sidebar, footer, and header? I'm horrible at manipulating the html code.
Never mind, I got it! Wow, it's amazing how being a dedicated blogger increases your knowledge of html.
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
@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.
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!
'column-center-inner' seems like the main wrapper.
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
@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.
Great trick thanks a lot ……
Do I need to change this bit
""
to include the actual urls?
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
i did it…thank you kaushik…
Great tips! It's done. Thanks a bunch, Kaushik.
its hard for me to do it my god!
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/
can any one tell me how to add multiple post in a blogger page (other than home page ), any other scripts needed…
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?
@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.
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.
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.
@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.
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!
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
@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.
Awesome blogger tutorials……….Thankyou So much
hey. thanks for this.. im gonna use this on my blog.