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

Demo

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

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

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!

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:

Post titles to Older and Newer Post links – reloaded

Demo

Installing the hack

You need to edit your blog's template. I use jQuery in this hack, 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>

Then find </body> and insert this code (just) before it:

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

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

.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;}
.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}

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

Hope you like this hack!

Small update to Adding Post titles to Older and Newer Post links

Since Blogger has started rolling out local domains, depending where you view the blog, the links inside the blog may not be anymore blogname.blogspot.com/ but may be for example blogname.blogspot.co.uk/ or blogname.blogspot.fi/.

However, the urls are internally still blogspot.com and also in blog's feeds. My hack for Adding post titles to Older and Newer Post links fetches the posts' urls and titles from feed and tries to change the older/newer post links' texts to post titles using the url. Local domains disturbed this, no match was found and a pseudo title was generated instead.

So I had to make a small update that changes the local domain back to .com before matching it with feed urls. Lines 34 and 41 are new, both containing this same code:

href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");

If you have this hack installed, I suggest you make the same update. See the whole hack with installation instructions here, source code updated: Add post titles to Older and Newer Post links.

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

Make "Post a Comment" link bigger

Because of problems with the embedded comment form I decided to change my blogs' commenting use separate comment page. Other option would have been a popup window, which I don't like.

But the Post a Comment link is so small, will people notice it at all? To compare with embedded form:

It looked so small, that I decided to enlarge my link. :)

Here's how I did it. Open template HTML, select Expand Widget Templates. Update 2013: Select "Jump to widget" "Blog1". Search for a block that looks like this:

          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>

And change it to this:

Data provided by Pastebin.com - Download Raw

Now the link is bigger (<H4>) so people will notice it easier. See this article's Post a Comment link here.

"# comments" link in index page hack

I changed this blog's commenting to use full page comment form. With embedded form there are problems with cookies across different domains, I could fix them but my readers might not. So I decided to use the only good option: full page. (some might also like popup window, I don't)

With embedded form commenting, when you view articles in index, suppose you have 5 comments in a post, then there is a link 5 comments which opens the post and jumps to comments section (#comments). This is nice.

But with full page comment form the link 5 comments don't open the post and comments, but the commenting page instead. I think it is better to open the post and comments, and there user can click Post Comment link if he wants to post a comment. When there are 0 comments, the link still may open the commenting page directly.

This can be accomplished quite easily. Open you templates html for editing, click Expand Widget Templates. Find code that looks like:

            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>

That code should be inside <b:includable id='post' var='post'> block (there's another one for mobile devices, block <b:includable id='mobile-post' var='post'>, that one I didn't touch, you can, if you want). Replace that previous code by:

Data provided by Pastebin.com - Download Raw

We insert three adjacent things into original code, highlighted red, old code is black (no need to do anything about this snipped, this is just for clarification):

    <b:if cond='data:post.allowComments'>
1.   <b:if cond='data:post.numComments == 0'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> <data:top.commentLabelPlural/></a>
     <b:else/>
2.    <a class='comment-link' expr:href='data:post.url + &quot;#comments&quot;' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
3.   </b:if>
    </b:if>

Now it works the way I want. I'll install this hack on this blog, except on this particular post, so you can test it – this post works like it was before, all others work like this hack. Instructions are not too detailed, so you should know your way around before trying to apply to your blog.

References:
Blogger Help: How do I leave comments on a blog?

Remove unnecessary links for older / newer posts in Blogger

This hack was inspired by this discussion thread on Blogger forums. First I made the solution (remove the Show older posts link in the grey box) which I describe in the last post, which is already quite good. But then I developed it further, and now it can remove unnecessary links in label searches almost every time, like 95% or 19/20 (it cannot always know if it is ok to remove the link, and then it does not).

This script uses getElementsByClassName, and some older browsers don't have it, so first install the function to your template using the instructions here.

Then you must install the post count hack. You don't have to set the window title, we'll just use the numPosts variable.

After installing those two, open your template html again, search for </body>, and insert this code before it:

Data provided by Pastebin.com - Download Raw

And there it is, many of the unnecessary and even confusing links are now removed in label searches. I'm really no javascript guru and one could possibly check the links some better way, but this works and it is good enough for me. :)