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.
ReplyDeleteRaguveeradayal
thank you for sharing
ReplyDeleteThis 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
ReplyDeleteHi, 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?
ReplyDeleteAgain 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.
ReplyDeleteUpload 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?
ReplyDeleteI'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?
ReplyDeleteI 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.
ReplyDeleteI 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!
ReplyDeletethank you !!!!!
ReplyDeletei 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?
ReplyDelete@tommibpusher: That shouldn't have happened. Something must have gone wrong when you were editing. I suggest you start over again.
ReplyDeletethanks for sharing such a informative article!!! i am able to add homepage to my blog
ReplyDeleteHELP ME!!!
ReplyDeleteCan you help me out. Add Djraj10 on Skype to tell me the Basic Instruction cuz I ain't got it!!!
ReplyDeleteblogger designer template has different code, not bale to find.it has no wordds like div id or main wrapper...confused
ReplyDeleteI 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??
ReplyDeleteThanks
@IEP Rochelle: If you send me the template, maybe I can take a look.
ReplyDeleteCould you please go into detail about how to remove the sidebar, footer, and header? I'm horrible at manipulating the html code.
ReplyDeleteNever mind, I got it! Wow, it's amazing how being a dedicated blogger increases your knowledge of html.
ReplyDeleteHi there,
ReplyDeleteGreat 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.
ReplyDeleteHi 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:
ReplyDelete<!-- 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.
ReplyDeleteHi again,
ReplyDeleteOk, 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.
ReplyDeleteJust create a new DIV section called start page and define your own styles and use that instead.
Great trick thanks a lot ......
ReplyDeleteDo I need to change this bit
ReplyDelete""
to include the actual urls?
dear kaushik,
ReplyDeletei 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
i did it...thank you kaushik...
ReplyDeleteGreat tips! It's done. Thanks a bunch, Kaushik.
ReplyDeleteits hard for me to do it my god!
ReplyDeleteIt has to be more simple than that I thought. And yes - it is!
ReplyDeleteI 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...
ReplyDeleteHi Kaushik!
ReplyDeleteI 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.
ReplyDeleteHi Kaushik!
ReplyDeleteThank 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,
ReplyDeletewhen 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.
ReplyDeleteHello,
ReplyDeleteI'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!
ReplyDeleteThanks 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.
ReplyDeleteAwesome blogger tutorials..........Thankyou So much
ReplyDeletehey. thanks for this.. im gonna use this on my blog.
ReplyDelete