Custom Search

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.

Membuat Newer Older Post Navigation Dengan Thumbnail


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/AVvXsEgWxFWZAU8DbuZsuWKIkvCcKApUHZR5d5XdiuV8641bvq6VtW39BpmHMtxlEK88woDxz56ffQ4LQRbtX3elc4is4SZp2y-wnxyUnco24OJH-8AgK3_6w1gY16lEL59Diha8_otbY8flpAK2/s72/previous-icon.png";
var defaultNewerImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV8EJHF_WApk9hzUHvbP4klpkkxvdDbH6PNbYmf89IVlp1AFOjDcZPRJQ0wMSA6c_xMPycF3F6z0gbyGeqZ2NlQVeHfddI425-CGSxG1tSo7dB-XXE_9OES9GyUnhyphenhyphennAEjqiqcj6aCqhgO/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 ]:-->

Share :

Facebook Twitter Google+
0 Komentar untuk "Membuat Newer Older Post Navigation Dengan Thumbnail"

Back To Top