Tag: blogger

Blogger.com Template Tip: Render Previous Post Link At Bottom Of Main Page

loketyLeave a comment

More experienced bloggers using Blogger.com have been able to put “previous” links to lead visitors to the previous post of their blog. On the main page, there is a fixed number of posts that you can choose to display, usually 3. Some visitors may be reading your main page from top to bottom. Now, besides having to refer to the list of previous posts in the sidebar, how can you provide a link at the end of last post of this main page for the visitors to continue reading?

I have written a bit of JavaScript and Blogger.com code just for this. You just need to copy the following code in the right places of your template and it will render a link to the previous post after the fixed number of posts on the main page.

Copy this chunk to the <head> section, preferably after the bunch of <meta> tags. Replace the number “3” in the line that contains “nMaxPostsOnMainPage” to the fixed number of posts on your main page, if it is not 3.

<script type=”text/javascript”>
// This JavaScript code created by Teng-Yan Loke
// Date: 7 Nov 2006 1119hrs
// Website: http://glob.lokety.com
// E-mail: lokety-at-gmail.com
var nMaxPostsOnMainPage = 3;
var aPosts = new Array(nMaxPostsOnMainPage + 1);
var n = 0;
<BloggerPreviousItems>
if (n <= nMaxPostsOnMainPage)
{
aPosts[n] = “<$BlogItemPermalinkURL$>|<$BlogPreviousItemTitle$>”;
n = n + 1;
}
</BloggerPreviousItems>
function writePrevPostOnMainPage()
{
var sTmp;

sTmp = aPosts[nMaxPostsOnMainPage].split(“|”);
document.write(“<a href=\”” + sTmp[0] + “\”>” + sTmp[1] + “</a>”);
}
</script>

Place this line just after the </Blogger> tag near the line that has the HTML comment “End #main”. If you want to apply any CSS style to the line, specify it in the <div> tag.

<MainPage><div style=””>Previous post: <script type=”text/javascript”>writePrevPostOnMainPage();</script></div></MainPage>

Save the template and publish your site. It should work now.

Note: avoid using “|” in the title of your posts as it is used programmatically in my code.

I can probably expand this code to:

  • display a specified number of previous posts, instead of just one
  • display a dropdown list of previous posts to quickly jump to any post

If you find this Blogger.com template tip useful, please link back to me using this permalink. Thanks!

Update (December 13 2006): I’ve made some enhancements to this stuff. Click here to see the next post.

Technorati Tags: , , , , , , ,

Share