- 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
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: 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>
// 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:
<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>
<BloggerArchives>
<option onclick="javascript:window.location.href='<$BlogArchiveURL$>';"><$BlogArchiveName$></option>
</BloggerArchives>
</select></form></p></ArchivePage>
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
No comments:
Post a Comment