Tuesday, March 09, 2004
"Recent Posts" Sidebar Code for Blogger Basic 
by Lenka Reznicek [permalink] 
UPDATE: If you're a frequent blog updater, see this post for a variation that features a date header divider.

This is a strange story. At about 3:00 this morning I awoke with a headache and heartburn. Normally, my first instinct would be to stroll into the bathroom, prepare an Alka-Seltzer, and go back to sleep. Not last night, I woke up and I had a wild idea about blogging.

Before you say, "Lenka, get a life!" - it occurred to me that there should be a simple means of generating Blogger™ code to create a list of recent posts, including titles and links to the posts. Then it hit me, like five-alarm chili: the code was already there, in the template. It just needed some tweaking.

I rewrote the Blogger template code between the [blogger][/blogger] tags, and used the permalink URLs to generate links utilizing Blogger's current title fields. This new "mini-post" code can be placed in the template to sit on your sidebar, and replicates the current posts on your blog, without the timedate or post body (although I am sure these could be incorporated somehow as well). There doesn't seem to be a problem using two [Blogger][/Blogger] code areas in the template, but try it first in preview for yourself. The result can be seen on the sidebar - click on any title, and you are instantly taken to that post. Here is the prototype code snippet - just replace the '[]' with '<>', and change the font definitions to your taste, or remove the font tags if you're using CSS:
Version 1 (with byline):

[font face="Arial, Helvetica, sans-serif" size=1]
[a href="[$BlogItemArchiveFileName$]#[$BlogItemNumber$]"][BlogItemTitle]
[$BlogItemTitle$] [a name="[$BlogItemNumber$]"]  [/BlogItemTitle][/a]
by [$BlogItemAuthorNickname$][/font][br]
Variations might include omitting the "posted by" reference if only one individual posts on your blog; I used the author nickname field on my group blog, farkleberriesUSA.

PLEASE NOTE: this code is primarily intended as a simple method of displaying recent posts using Blogger™ Basic's data fields, because the system does not include it as a built-in feature. If you're familiar with other systems' data fields (title, time/date and permalinks) it should be possible to modify the code to use them. Most bloggers I have heard from have not had any problems with the code, or needed only minor modifications. However, the code shown here may not work if you use a third party plug-in (such as W.bloggar) to create your posts.

Unless you are using a framed sidebar (with your post permalinks pointing to a separate frame), try to make sure that the "recent posts" appears lower in the page code than your first instance of [Blogger][/Blogger] tags. Reason? The permalinks will always bring up the first instance of the linked text - if your "recent posts" list appears higher on the page, you may end up viewing the link that appears on the list, rather than the actual post. Also, keep in mind that Blogger basic defines the number (or days) of posts displayed "globally" for your blog - for example, if you set your Blogger formatting to display 7 days' posts per page, only those 7 days of recent posts will show up on your sidebar. If your Blogger post title includes an URL to an outside page, that URL will also automatically appear in the Recent Posts area, and even multiple links in the title field should work.

UPDATE v2: Brian from The Olive Press suggests another handy use of the recent posts code:
"I've discovered a neat, unexpected side benefit. If you archive your posts by month (which I do), the Recent Posts section will be specific for each archive page. So, if I go to October, my sidebar for that page links to the title of every post in that month, which is pretty cool."
Thanks, Brian!

UPDATE v3: Some Blogger users may need to omit the
[a name="[$BlogItemNumber$]"]
portion to avoid generating an extra name declaration in the recent posts list. If you try the first version of this code and find that your post titles do not appear as hyperlinks, use this version instead:
Version 2 (no byline):

[a href="[$BlogItemArchiveFileName$]#[$BlogItemNumber$]"][BlogItemTitle]