Setting a Static Front or Main Page in Blogger - Implementation and Testing of the Code
(Page 4 of 4 )
We can now implement this in any Blogger Classic Template; some versions will show the changes better than others. This can also affect some AdSense banners if you have them; you can put this on after making adjustments. Below are the simple steps you need to follow.
1. Make sure that you are using a Google Blogger Classic Template. If not, then convert to a Classic Template, by going to Dashboard---Layout---Edit HTML and then scrolling below the page to find "Revert to Classic Template."
Important: note that converting to the Classic template will drastically change the view of the blog.
2. Go to Dashboard---Settings---Formatting, change it to one post per main page, and then click Save.
3. Go to Dashboard---Template, then scroll down the code to somewhere in the middle and look for: (highlight it all) IMPORTANT: Do not forget to back up your template first.
<!-- Begin content -->
<div id="content">
<!-- Begin main column -->
<div id="main">
<Blogger>
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</div>
<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>
</div>
<!-- End .post -->
4. Highlight all of the above and replace it with this:
<!-- Begin content -->
<div id="content">
<!-- Begin main column -->
<div id="main">
<Blogger>
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<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>
<MainPage>
<div class="post-body">
<br></br>
Insert homepage content here......................
<br></br>
</div>
</MainPage>
<ItemPage>
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</div>
</ItemPage>
<ArchivePage>
<div id="main">
<p>
<a href="<$BlogItemPermalinkURL$>"><FONT SIZE=3><$BlogItemTitle$></FONT></a>
</p>
<br />
</div>
</ArchivePage>
<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>
</div>
<!-- End .post -->
5. Click save, and then at the template, carefully replace the section marked "Insert homepage content here..." with your preferred home page content. Also, standard HTML coding will apply, like the use of <p> and <br>, for example.
6. Test your blog, It should show:
Static home page content without the header data, post footer information and a post titles. In other words, you should see a clean display of home page content.
Post pages should be not distorted; they should be the same as before.
Archived pages should be clean and contain links to important articles written on that date. Also, they should not look distorted. If they do, that particular template is not compatible with these adjustments, or there may have been a mistake in the cut-and-paste process.
The sidebar should be clean and consist of a normal post and archive list.
This innovation is not guaranteed to work under all conditions. For instance, complex widgets in the content, and certain Classic templates, may not be compatible. But the concept of how to approach the programming is what is important. Good luck!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
