Enhancing on the previous session of Blogger.com 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:
- MainPage – display link to the n + 1 page, where n is the number of posts to display per page
- ItemPage – display link to the previous post
- 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.
// This JavaScript code created by Teng-Yan Loke
// Date: 12 Dec 2006 2349hrs
// Website: http://glob.lokety.com
// E-mail: lokety-at-gmail.com
var nMaxPostsOnMainPage = 2;
var nItemTitleTruncateLength = 50;
var aPosts = new Array(nMaxPostsOnMainPage + 1);
var n = 0;
var sItemTitle;
<BloggerPreviousItems>
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;
i++;
} 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>”);
}
</script>
Main Page
Use the JavaScript function writePrevPostOnMainPage() as before, on the main page. You can use something like:
Item Page
For individual posts, use the following code. You can place this just next to the preceding code of the <MainPage> tags.
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:
Other Months: <form name=”previouspostform”><select name=”previouspostselect” size=”1″>
<option>click here</option>
<BloggerArchives>
<option onclick=”javascript:window.location.href='<$BlogArchiveURL$>’;”><$BlogArchiveName$></option>
</BloggerArchives>
</select></form></p></ArchivePage>
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:
Blogger.com Template Tip: Render Previous Post Link At Bottom Of Main Page
<URL:http://glob.lokety.com/2006/11/bloggercom-template-tip-render.html>
Technorati Tags: blogger, blogger.com, blogger tip, blogger code, previous post, main page, template tip, item page, archive page, javascript code
