Setting a Static Front or Main Page in Blogger - Formulating the Code to Edit the Template
(Page 3 of 4 )
We begin by analyzing the code that will display the content of the post. By default, since the post will be shown on the front page when it is published, we can then set conditions to display our customized home page content (not post content written via Blogger content management system control panel) when the page shown is the front page.
Note that by default, Blogger will display seven posts. We need to display only one post in the main content. To do this, go to: Dashboard---Settings---Formatting and set it to display one post on the main page.
The content function before we start looks like this:
<div class="post-body">
<div>
<$BlogItemBody$>
</div>
</div>
However, we need to show the post <$BlogItemBody$> only on the post pages and not on the front page. This will now be:
<ItemPage>
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</div>
</ItemPage>
We are adding the conditional tag <Itempage> to signify that the command within will only be TRUE on the post pages but FALSE on the main page and the archive pages.
We still lack the command to run the home page, since the above code is for the post pages. For the main content, which will now be static, it will be:
<MainPage>
<div class="post-body">
<br></br>
Insert homepage content here......................
<br></br>
</div>
</MainPage>
Take note the similarity between the first and second set of code. The differences are the template tags and content used.
Here, using <MainPage> means that the content within these tags will be shown only on the front page, and not on the post and archived pages.
As for the archived pages, here is the code used by Blogger to display only a hyperlink to the post pages for articles written in a particular month:
<ArchivePage>
<div id="main">
<p>
<a href="<$BlogItemPermalinkURL$>"><FONT SIZE=3><$BlogItemTitle$></FONT></a>
</p>
<br />
</div>
</ArchivePage>
We do not need to show the dates, so the header code date specified above will be removed. And we need to display post titles and post footers only on post pages, not on archived pages and the front page. So the new code will be:
<Itempage><BlogItemTitle></Itempage>
<Itempage><h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3><Itempage>
<Itempage></BlogItemTitle></Itempage>
And in the code for the footer will be below:
<Itempage><p class="post-footer">
<em><$I18NPostedByAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p></Itempage>
Next: Implementation and Testing of the Code >>
More Blog Help Articles
More By Codex-M
