Pages

Wednesday, November 27, 2013

27

Add post titles, thumbnails, and summaries to Older and Newer Post links

By default Blogger shows links to Newer Post, Home, and Older Post at the bottom of a post. There are hacks that add post titles to those links, couple by me, too, here's the latest: Add Post titles to Older and Newer Post links – reloaded. In one comment I was asked if it would be possible to display also thumbnail and post summary. It is.

I have installed this hack in my MS-potilas blog, which is in Finnish (you'll see the idea without understanding the language):


Installing the hack

You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. If you already have it loaded, you can leave the first line out of the hack.

Open blog's template, and put this code before </head>:



If you have any previous hack for Newer/Older post links, remove it. Save the template and test.

Configuration

You can configure the following javascript variables:

maxSummaryLength - how many characters can summary text be
olderLink - contains the template for older link
newerLink - template for newer link
defaultOlderImage - if older post has no thumbnail, use this image instead
defaultNewerImage - if newer post has no thumbnail, use this image instead

In olderLink and newerLink templates you can use html and fields [title], [date], [datetime], [img], [thumburl], and [summary]. You can also edit the CSS to make everything look different. Hope you like this hack!
See the hack
for this dynamic
views icon: