Pages

Wednesday, June 27, 2012

Add Post titles to Older and Newer Post links – reloaded

When viewing a single 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...

Previous hacks

There are already some hacks to do this. One of the first is by ETBlue, here's that hack. It works very well, but it skews the stats: the loading of two extra posts by jQuery results in two extra stats hits for an opened post.

I did a hack, too, which adresses the stats problem, it is here. It uses somewhat different method to get the post titles: they are fetched from the blog feed, or generated from the blog url (=pseudo title), so no extra posts are loaded, so we have no stats skew. The problem is that is only gets real titles for 500 latest posts. Older posts get a pseudo title. 500 is sufficient in most cases. The script could be modified to get 1000 posts, or more, but it would take some time to load the feeds.

In a comment of my previous hack Duy Pham gave a link to his Older/Newer post title hack. He has an excellent solution for getting the titles from the blog feed: first get the index using publishing date of the post, then retrieve maximum of 3 posts (previous, this post and next post) from a feed.

Duy Pham's hack was so inspiring, that I started coding the thing same in jQuery (Duy uses javascript), and to be compatible with my previous hack. The result has 2 lines less code than the previous hack, and many more features:

If you had the previous version installed, you can replace the old code. Save the template, and the hack is installed!

Configuration

You can configure the following javascript variables:

olderLink - contains the template for older link, you can use [title] in this
newerLink - template for newer link, you can use [title] in this
olderTitle - template for older link title, you can use [title], [date] and [datetime] in this
newerTitle - template for newer link title, you can use [title], [date] and [datetime] in this

You can use any html, too, for example you can use images. If you use the default olderLink and newerLink, you can also style classes .blog-pager-older-link-title and .blog-pager-older-link-title.

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):

If you don't have Simple template, test and change styles if needed. Values for .home-link 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). Of course you can style everything quite differently than me, that's just CSS. :)

Hi you, i just want to show only the title on hover, not the date of post, and some code unnecessary should be removed, like this: title = title.replace('[date]', date.toLocaleDateString()); since i think it can make my website loading faster. Thanks you

Hi MS-potilas, thanks for helping me out with this great feature. I was just wondering if there was a way to center the Home button on mobile devices. For example, if I calculate the margin so it centers on my Chromebook, it will look out of whack on an iphone. It is just the home button that messes up. I changed the code so the older/home/newer links look the same on all devices, but the home button is way to the left or right when an older or newer link is missing. Do you know if there any way to just center the Home button without using margin?

@Matt DvolatilityHi,unfortunately I'm not very familiar with CSS, so I don't know the best way to center the element (link) when there either is or isn't an element on left and right sides. Maybe some absolute positioning?... Something like the last example here: sitepoint.com/css-center-position-absolute-div/ But I'm really just guessing here... Hope you get it done some way.

Thanks for your reply. Your example in your post works well on my Chromebook (I figured out the margin-left px that works best), but it doesn't seem to work on my iphone/ipad. I think when they resize my template to fit the screen, the absolute px makes the home link shift more to the right. I'm guessing on that though. I tried to make my site fluid once but it didn't work on mobile devices as well. Thanks for the link to that site. I will try to figure out how to fix this issue.

I figured out how to fix it with that link you gave me. Not sure if it works on IE though. I added position:relative; to #blog-pager, and then added left:50%; position:absolute; text-align-center; to .home-link and it somehow worked on iOS devices. Thanks!

@MS-potilas Sorry for responding lately as I had not checked my other mail for quite some time. But thank you so much for this helpful trick you are a genius really appreciate the fact that you kindly accepted my request. Thank you once again and I shall implement this trick ASAP.