Membuat Newer Older Post Navigation Dengan Thumbnail

Widget Next Post dan Previous Post dengan thumbnail akan memudahkan pengunjung dalam mengakses artikel-artikel yang terdapat pada blog. Widget Newer Older Post Navigation With Thumbnail ini tentunya akan menambah jumlah klik pada blogspot.

Untuk memasang perangkat ini, cukup letakkan script ini diatas </body>:

<!--:[ NAVIGATION NEWER OLDER POST TITLE START ]:-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<style type='text/css'>
.oldernewerpost{cursor:pointer;padding-top:5px;text-align:center;width:160px;overflow:hidden;}
.oldernewerleft{float:left;}
.oldernewerright{float:right;}
.home-link{margin:0 12.5%;}
.oldernewerpost:hover{
background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#f5f6f6&#39;, endColorstr=&#39;#f5f6f6&#39;,GradientType=0 ); /* IE6-9 */
}
.oldernewerpost a:hover{text-decoration:none;}
.oldernewerpost img{margin-top:2px;width:72px;height:72px;}
.oldernewerpost .title{color:#000;line-height:1.1;font-size:11px;font-weight:700;padding:0 5px 5px;}
.oldernewerpost .summary{color:#666;font-size:10px;line-height:1;padding:5px;text-align:justify;}
</style>
<script type='text/javascript'>
// Post titles, thumbnails and summaries to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2013. See http://yabtb.blogspot.com/2013/11/add-post-titles-thumbnails-and.html
//<![CDATA[
//
// Configuration:
var maxSummaryLength = 160;
// In these you can use [title], [date], [datetime], [title], [img], [thumburl], [summary]:
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<br/>[img]<div class="title">[title]</div></a><div class="summary">[summary]</div></div>';
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]">Newer Post<br/>[img]<div class="title">[title]</div></a><div class="summary">[summary]</div></div>';
// you can use same image or different here:
var defaultOlderImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBAUQ-3LbajU_tCAtNSpakORVRg7epAHl7L_nxHxZ1Wwx8XoHYqC-8mr8er-iFOEM8nr9TbeOwvo3hWoxK7cBY25shzZVYXCSP-EsHn5P2d3dmxhgX7X-Vjpl5A0oO_HBOuFVZIAiiUzMP/s72/previous-icon.png";
var defaultNewerImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2XmrFxmcRUSKMr8G4SgnVhPtlJjJcjUTMOgqJadGGMDO_cQy3kN8PIAbXHWWH8-uqeIIUF2QhPr9R6hamN6U2DnzRJbXMG6kzZB1wpXrtQpWfCataalhloy1UZm4RoUK7plkdkTRGcXDx/s72/next-icon.png";
// configuration ends
//
function getThumb(entry, def) {
    var thumburl = def;
    try { thumburl = entry.media$thumbnail.url; }
    catch(error) {
        d = $("<p>"+entry.content.$t+"</p>").find("img").attr("src");
        if(d)
            thumburl = d;
        else
            thumburl = def;
    }
    return thumburl;
}
function setLink(selector, template, defthumb, entry) {
  var date = entry.published.$t.match(/\d+/g);
  date = new Date(date[0],date[1]-1,date[2],date[3],date[4],date[5]); // convert iso
  var thumburl = getThumb(entry, defthumb);
  var url = $(selector).attr("href");
  var summary = $("<p>"+entry.content.$t+"</p>").text();
  if(summary.length > maxSummaryLength) {
    summary = summary.substring(0, maxSummaryLength);
    var indexBreak = summary.lastIndexOf(" ");
    summary = summary.substring(0, indexBreak)+"...";
  }
  var htm = template.replace(/\[title\]/g, entry.title.$t);
  htm = htm.replace(/\[date\]/g, date.toLocaleDateString());
  htm = htm.replace(/\[datetime\]/g, date.toLocaleString());
  htm = htm.replace(/\[summary\]/g, summary);
  htm = htm.replace(/\[thumburl\]/g, thumburl);
  htm = htm.replace(/\[url\]/g, url);
  var imghtm = "";
  if(thumburl != "")
    imghtm = '<img src="'+thumburl+'" width="72" height="72">';
  htm = htm.replace(/\[img\]/g, imghtm);
  $(selector).replaceWith(htm);
}
function setOlderLink(entry) { setLink("a.blog-pager-older-link", olderLink, defaultOlderImage, entry); }
function setNewerLink(entry) { setLink("a.blog-pager-newer-link", newerLink, defaultNewerImage, entry); }
$(window).load(function() {
  window.setTimeout(function() {
    var timestamp = $(".published").attr("title");
    if(timestamp && timestamp != "")
      $.getJSON("/feeds/posts/default?alt=json-in-script&published-min="+encodeURIComponent(timestamp)+"&max-results=0&callback=?", function(resp) {
        var postindex = parseInt(resp.feed.openSearch$totalResults.$t);
        if(postindex > 1)
          $.getJSON("/feeds/posts/default?alt=json-in-script&start-index="+(postindex-1)+"&max-results=3&callback=?", function(resp) {
            setNewerLink(resp.feed.entry[0]);
            var postcount = parseInt(resp.feed.openSearch$totalResults.$t);
            var startindex = parseInt(resp.feed.openSearch$startIndex.$t);
            if(postcount - startindex > 1) setOlderLink(resp.feed.entry[2]);
          });
        else
          $.getJSON("/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=?", function(resp) { setOlderLink(resp.feed.entry[0]); });
      });
  }, 250);
});
//]]>
</script>
</b:if>
<!--:[ NAVIGATION NEWER OLDER POST TITLE END ]:-->