Untuk memasang perangkat ini, cukup letakkan script ini diatas </body>:
<!--:[ NAVIGATION NEWER OLDER POST TITLE START ]:-->
<b:if cond='data:blog.pageType == "item"'>
<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='#f5f6f6', endColorstr='#f5f6f6',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 ]:-->
