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

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
2. <b:if cond='data:blog.pageType == &quot;item&quot;'>
3. <style type="text/css">
4. .oldernewerpost {
5.   cursor: pointer;
6.   padding-top: 5px;
7.   text-align: center;
8.   width: 160px;
9.   overflow: hidden;
10. }
11. .oldernewerleft  { float: left;  }
12. .oldernewerright { float: right; }
13. .home-link {
14.   margin-top: 5px;
15. }
16. .oldernewerpost:hover {
17.   background-color: #EEEEEE;
18. }
19. .oldernewerpost a:hover {
20.   text-decoration: none;
21. }
22. .oldernewerpost img {
23.   /* thumbnail properties */
24.   margin-top: 2px;
25.   padding: 2px;
26.   width: 72px;
27. }
28. .oldernewerpost .title {
29.   line-height: 1.1;
30.   font-size: 11px;
31.   font-weight: bold;
32.   padding: 0 5px 5px;
33. }
34. .oldernewerpost .summary {
35.   border-top: 1px dashed #777777;
36.   border-bottom: 1px dashed #777777;
37.   color: #404040;
38.   font-size: 10px;
39.   line-height: 1;
40.   padding: 5px;
41.   text-align: left;
42. }
43. </style>
44. <script type='text/javascript'>
45. // Post titles, thumbnails and summaries to Older Post and Newer Post links (without stats skew)
46. // by MS-potilas 2013. See http://yabtb.blogspot.com/2013/11/add-post-titles-thumbnails-and.html
47. //<![CDATA[
48. //
49. // Configuration:
50. var maxSummaryLength = 160;
51. // In these you can use [title], [date], [datetime], [title], [img], [thumburl], [summary]:
52. var olderLink = '<div class="oldernewerpost oldernewerright" title="Older Post - [title] - posted on [date]" onclick="location.href=\'[url]\';"><a href="[url]" title="Older Post - [title] - posted on [date]">Older Post &gt;&gt;<br/>[img]<div class="title">[title]</div></a><div class="summary">[summary]</div></div>';
53. var newerLink = '<div class="oldernewerpost oldernewerleft" title="Newer Post - [title] - posted on [date]" onclick="location.href=\'[url]\';"><a href="[url]" title="Newer Post - [title] - posted on [date]">&lt;&lt; Newer Post<br/>[img]<div class="title">[title]</div></a><div class="summary">[summary]</div></div>';
54. // you can use same image or different here:
55. var defaultOlderImage = "https://lh5.googleusercontent.com/-rK3a8daWjFs/UpWXOb4up-I/AAAAAAAABo4/2RfPPCI-VPg/s72/older.png";
56. var defaultNewerImage = "https://lh4.googleusercontent.com/-etSvFmkqF5M/UpWXOXHdEVI/AAAAAAAABo8/wMBH4bQGug4/s72/newer.png";
57. // configuration ends
58. //
59. function getThumb(entry, def) {
60.     var thumburl = def;
61.     try { thumburl = entry.media$thumbnail.url; }
62.     catch(error) {
63.         d = $("<p>"+entry.content.$t+"</p>").find("img").attr("src");
64.         if(d)
65.             thumburl = d;
66.         else
67.             thumburl = def;
68.     }
69.     return thumburl;
70. }
71. function setLink(selector, template, defthumb, entry) {
72.   var date = entry.published.$t.match(/\d+/g);
73.   date = new Date(date[0],date[1]-1,date[2],date[3],date[4],date[5]); // convert iso
74.   var thumburl = getThumb(entry, defthumb);
75.   var url = $(selector).attr("href");
76.   var summary = $("<p>"+entry.content.$t+"</p>").text();
77.   if(summary.length > maxSummaryLength) {
78.     summary = summary.substring(0, maxSummaryLength);
79.     var indexBreak = summary.lastIndexOf(" ");
80.     summary = summary.substring(0, indexBreak)+"...";
81.   }
82.   var htm = template.replace(/\[title\]/g, entry.title.$t);
83.   htm = htm.replace(/\[date\]/g, date.toLocaleDateString());
84.   htm = htm.replace(/\[datetime\]/g, date.toLocaleString());
85.   htm = htm.replace(/\[summary\]/g, summary);
86.   htm = htm.replace(/\[thumburl\]/g, thumburl);
87.   htm = htm.replace(/\[url\]/g, url);
88.   var imghtm = "";
89.   if(thumburl != "")
90.     imghtm = '<img src="'+thumburl+'">';
91.   htm = htm.replace(/\[img\]/g, imghtm);
92.   $(selector).replaceWith(htm);
93. }
94. function setOlderLink(entry) { setLink("a.blog-pager-older-link", olderLink, defaultOlderImage, entry); }
95. function setNewerLink(entry) { setLink("a.blog-pager-newer-link", newerLink, defaultNewerImage, entry); }
96. $(window).load(function() {
97.   window.setTimeout(function() {
98.     var timestamp = $(".published").attr("title");
99.     if(timestamp && timestamp != "")
100.       $.getJSON("/feeds/posts/default?alt=json-in-script&published-min="+encodeURIComponent(timestamp)+"&max-results=0&callback=?", function(resp) {
101.         var postindex = parseInt(resp.feed.openSearch$totalResults.$t);
102.         if(postindex > 1)
103.           $.getJSON("/feeds/posts/default?alt=json-in-script&start-index="+(postindex-1)+"&max-results=3&callback=?", function(resp) {
104.             setNewerLink(resp.feed.entry[0]);
105.             var postcount = parseInt(resp.feed.openSearch$totalResults.$t);
106.             var startindex = parseInt(resp.feed.openSearch$startIndex.$t);
107.             if(postcount - startindex > 1) setOlderLink(resp.feed.entry[2]);
108.           });
109.         else
110.           $.getJSON("/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=?", function(resp) { setOlderLink(resp.feed.entry[0]); });
111.       });
112.   }, 250);
113. });
114. //]]>
115. </script>
116. </b:if>

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!