Add post titles to Older and Newer Post links

Update June 27th 2012: new version here, I suggest you consider using it instead of this.

When you open a Blogger blog post, there are links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress, from where I migrated to Blogger, can display the post titles. But not Blogger.

Already done, but...

I started thinking, if I could make a hack to display those post titles also in Blogspot blogs. Some googling revealed that this had already been done. I think ETBlue was the first author of that hack, here's Blogger forum post about that. Later it was repackaged and republished by Bloggersentral and WEB.SILOG.. The hack is quite clever, it uses jQuery to load the previous and next posts and uses jQuery selectors to get the titles. Good for me, I thought, saves the me trouble of making a hack.

...it skews the stats! 1 --> 3

After having the mod installed for a couple of hours I noticed, that I had many three-hit visits in my blog. Then I realised, that loading two extra posts by jQuery results in two extra stats hits for an opened post! That may not worry everyone, but I did not like that at all. So to the drawing board, after all.

My first version

So blog posts cannot be read from browser without causing stat hits. I uninstalled the ETBlue/WEB.SILOG./Bloggersentral hack and started devicing my own. My first quick & dirty solution was to parse the url, and create a "pseudo title" from that, so for example:

Url http://yabtb.blogspot.com/2011/11/return-of-better-recent-comments-gadget.html becomes "Return of better recent comments..." and http://yabtb.blogspot.com/2011/11/welcome-to-yabtb.html becomes "Welcome to yabtb". If url is so long, that it might be cut, it is cut once more (to make sure it is not full title) and ellipsis is added. See function urlToPseudoTitle in the hack source, if you need something like this.

This was quite nice solution and works especially on English blogs. And it is much faster than jQuerying two extra pages. I was satisfied for a couple of hours.

But then I noticed a glitch in my Finnish blog. In Finnish language there are letters ä and ö (a with dots, o with dots), which are converted to "a" and "o" in the post url. So if I have title "Monet kipulääkkeet lääkekannabista koukuttavampia", and its url is http://mspotilas.blogspot.com/2012/01/monet-kipulaakkeet-laakekannabista.html, the pseudo title becomes "Monet kipulaakkeet...". Pseudo title is still readable without the dotted letters, but is a bit funny. Once again, back to the drawing board...

The solution

Script cannot read blog posts without stats hits, but it can read blog feeds. Actually I did already something like this in my recent comments gadget: load the post feed and collect post url - post title pairs, to be later used to convert urls to post titles.

It is possible to read up to 500 entries at a time from the Blogger feeds. Most blogs aren't that big, so the limit of 500 entries will be most of the time sufficient. But one could easily add another line to the script to fetch entries from 501 to 1000. And as a fallback, if script did not get post title from feed, for reason or another, it creates a pseudo title from the post url (see previous chapter). Reading the feed entries might take some milliseconds, so the script is executed (0,5 seconds) after page is fully loaded, so it won't slow down page load.

Demo (this blog)

Installing the hack

This hack is quite easy to install, although it requires template editing. I use jQuery in this hack, mainly for simplicity (much easier to execute something at window load, select elements, etc.). So you need jQuery. Check your template, and if it does not have jQuery, insert this before </head:>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

The previous/next links need some styling, so that post titles fit better. For example something like this in Simple template; add these to the styles section of your template (or use Template Designer|Advanced|Add CSS):

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}

If you don't have Simple template, test and change styles if needed. Then find </body> and insert this code (just) before it:

Data provided by Pastebin.com - Download Raw - See Original

Save the template, and the hack is installed!

Fine tuning Home link position

Home link is not centered on blog's front page, last page, newest post and oldest post. Add this CSS to center the link properly:

.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
#blog-pager {min-height:2em;}

Values work with 560px wide text area (250x2+60=560), change accordingly if needed. If "Home" text is very wide in your language, you may also have to change the values (test and see if it works).


Hope you like this hack! It is installed for example in this blog.

Update June 8th 2012: Blogspot uses local domains (like "blogspot.fi") in next/prev links but not in feed. I added two lines to deal with this: lines 34 and 41 are new.
Update June 27th 2012: new version here.