Template Tip Part 2: Render Previous Post Links

Enhancing on the previous session of template goodies, I’ve finetuned the behaviour of the “Previous Post/Month” link at the bottom of three types of blog pages. The common tip that other bloggers use to display the previous post’s link will not work well in the individual post pages, thus the need to enhance using JavaScript here. They are:

  1. MainPage – display link to the n + 1 page, where n is the number of posts to display per page
  2. ItemPage – display link to the previous post
  3. ArchivePage – display select combobox with all months of posts

You may want to read up on the previous session first before proceeding below.

Place this (updated) JavaScript code anywhere in between your template’s <head> tag. Same thing, adjust nMaxPostsOnMainPage to the number of posts that you have set to display.

<script type=”text/javascript”>
// This JavaScript code created by Teng-Yan Loke
// Date: 12 Dec 2006 2349hrs
// Website:
// E-mail:
var nMaxPostsOnMainPage = 2;
var nItemTitleTruncateLength = 50;
var aPosts = new Array(nMaxPostsOnMainPage + 1);
var n = 0;
var sItemTitle;
sItemTitle = String(“<$BlogPreviousItemTitle$>”).substring(0, nItemTitleTruncateLength);
aPosts[n] = “<$BlogItemPermalinkURL$>|” + sItemTitle; n = n + 1;</BloggerPreviousItems>
function writePrevPostOnMainPage()
var sTmp;

sTmp = aPosts[nMaxPostsOnMainPage].split(“|”);
if (sTmp[1].length == nItemTitleTruncateLength) sTmp[1] = sTmp[1] + “…”;
document.write(“<a href=\”” + sTmp[0] + “\” target=\”_top\”>” + sTmp[1] + “</a>”);

function writePrevPostOnItemPage()
var sTmp;
var sItemTitle;
var i = 0;
var j = 0;

sItemTitle = String(“<ItemPage><Blogger><$BlogItemTitle$></Blogger></ItemPage>”).substring(0, nItemTitleTruncateLength);
do {
sTmp = aPosts[i].split(“|”);
if (sTmp[1] == sItemTitle)
j = 1;
} while (j == 0);
sTmp = aPosts[i].split(“|”);
if (sTmp[1].length == nItemTitleTruncateLength) sTmp[1] = sTmp[1] + “…”;
document.write(“<a href=\”” + sTmp[0] + “\” target=\”_top\”>” + sTmp[1] + “</a>”);

Main Page

Use the JavaScript function writePrevPostOnMainPage() as before, on the main page. You can use something like:

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

Item Page

For individual posts, use the following code. You can place this just next to the preceding code of the <MainPage> tags.

<ItemPage><p>Previous post: <script type=”text/javascript”>writePrevPostOnItemPage();</script></p></ItemPage>

Archive Page

This last part may be no surprise to some of you as you may have seen a variant of this elsewhere. Place this code next to the preceding code:

<ArchivePage><p><a href=”<$BlogURL$>” target=”_top”>Back to Home</a> |
Other Months: <form name=”previouspostform”><select name=”previouspostselect” size=”1″>
<option>click here</option>
<option onclick=”javascript:window.location.href='<$BlogArchiveURL$>’;”><$BlogArchiveName$></option>

Same your template, publish, and test these goodies out!

If you try all these code, please let me know how it goes for you. Leave comments here…

Related posts: Template Tip: Render Previous Post Link At Bottom Of Main Page

Technorati Tags: , , , , , , , , ,


Leave a Reply

Your email address will not be published. Required fields are marked *

Spam protection by WP Captcha-Free