"Ah, but I was so much older then, I'm younger than that now."

My Boog Pages

Forward And Back

Non-techies, please turn away.

Some of you may have noticed the nifty "Previous" and "Next" links at the bottom of the page. Believe it or not, these links are actually rather tricky to implement if you're using Blogger. The links were created using Javascript, and in this post I'll explain how they work.

First, a caveat: the links only really work if you're keeping only 1 day's worth of posts on your main page, and if you're archiving daily. Why? Because these links really page back and forth not between posts, but between archive pages. If your home page does not contain the same content as your most recent archive page, your viewers will have either missing or duplicate posts (more on this below).

On to the code. First, the code to initialize the variables. You will need to add this code near the top of the page, and outside of any <Blogger> or <BloggerArchives> tags:

<script language="JavaScript">
	<!--
	var ArchiveArray = new Array();
	var ArchiveLength;
	var PostName = '';
	var PostIndex;
	var PrevIndex;
	var NextIndex;
	-->
</script>

Next you'll need to capture information about the archive filenames. Put this code in your template to do that:

<BloggerArchives>
	<script language="JavaScript">
		<!--
		ArchiveArray[ArchiveArray.length] = '<$BlogArchiveLink$>';
		-->
	</script>
</BloggerArchives>

This code adds a record for each archive page to the end of an array. If you want to display the archive links, you'll need to include the appropriate code inside the <BloggerArchives> tags, but outside of the script.

Now we'll capture the archive file name of the current page:

<Blogger>
	<script language="JavaScript">
		<!--
		if (PostName == '') PostName = '<$BlogItemArchiveFileName$>';
		-->
	</script>
</Blogger>

Of course, the HTML to display the actual content of the posts also needs to go between the <Blogger> tags. This script captures the archive filename of the first post on the page. If you're not using 1 day's posts / daily archives, posts on your main page may have different archive pages.

This script figures out what the archive filenames are for the archive pages before and after the current page. If this page is the first or last, the appropriate value is set to -1:

<script language="JavaScript">
	<!--
	var Index;

	ArchiveLength = ArchiveArray.length;

	PostIndex = -1;
	for(Index = 0; Index < ArchiveLength; Index++)
		if (ArchiveArray[Index] == PostName) PostIndex = Index;

	if (PostIndex != -1)
		{
		PrevIndex = PostIndex - 1;
		NextIndex = PostIndex + 1;

		if (PrevIndex < 0) PrevIndex = -1;
		if (NextIndex >= ArchiveLength) NextIndex = -1
		}
	-->
</script>

Pretty simple stuff. Make sure this code is below the other code on the page, or it won't work properly.

Finally, use Javascript to write the links out to the browser:

<script language="JavaScript">
	<!--
	if (PrevIndex != -1)
		{
		document.write('<a href="' + ArchiveArray[PrevIndex] + '">');
		document.write('Previous');
		document.write('</a>');
		}
	else
		{
		document.write('Previous');
		}
	-->
</script>

<script language="JavaScript">
	<!--
	if (NextIndex != -1)
		{
		document.write('<a href="' + ArchiveArray[NextIndex] + '">');
		document.write('Next');
		document.write('</a>');
		}
	else
		{
		document.write('Next');
		}
	-->
</script>

I've included both the "Previous" and "Next" scripts here, though really it's the same script. Note that the text of the link is always written out, but the link itself is only added when appropriate. That's not totally necessary, but in some cases it may help with spacing, to make the links appear in the same spot on every page.

This may not be the optimal solution, in terms of space, speed, or efficiency, but it does work. If anyone wants to send me any improvements, I'll add them to this page as I receive them. If you do send me some code, please send a link to a sample page, as I don't want to have to try it out on my own site.

Now, what could go wrong with this code if you're not set up to keep 1 day's posts on you home page, and to use daily archives? The problem lies in a key assumption that this code makes: that your home page is identical with your last archive page.

First let's assume that you're set for 7 day's posts on your main page, and a weekly archive. As the folks at Blogger explain it, 7 days worth of posts is not all the posts in a 7-day time period; it's the seven most recent days that have posts. In other words, if you've only posted on 7 days in the past month, you'll have a month's worth of posts on your home page.

Each of your archive pages, however, do contain only a week's worth of posts. So may contain only 1 post, whereas your main page always contains at least 7 (assuming you've posted more than 7 times!).

So, if you have not updated your blog every day, when a user on your main page clicks "Previous", they will see an archive page that displays at least one post that they have already read. Why? Because the 7 most recent days (the contents of your home pages) occurred over more than a 7 day period (the contents of your last archive page).

Similarly, if you are set to, say, 4 day's posts on your main page, but are archiving weekly, users may miss posts. Let's say you post 5 days in a row. Only the 4 most recent posts appear on your main page. All 5 posts appear on your last archive page. So when the user clicks "Previous" it jumps from your home page to your next-to-last archive page, missing that fifth day's worth of posts.

In return for use of all this "cool" code, I ask is that you mention where you got it and link to this post. In a single post is fine, I'm not greedy.

posted by Graham at 7:37 AM permalink

Trackbacks | Comments (2)