SHARE
TWEET

Titles, thumbnails and summaries to Older / Newer post links

mspotilas Nov 27th, 2013 6,347 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
Top