Blogger.com Template Tip Part 2: Render Previous Post Links
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:
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.
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:
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
- 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
Labels: blogger
02:34 hrs permanent link
 |
Stumble It!
add to del.icio.us
0 Comments:
Post a Comment
Links to this post:
Create a Link