Membuat Tombol Load More Pada Recent Post Blogspot Menggunakan Jquery

Untuk mempermudah pengunjung mengeksplor isi blog maka salah satu jalan adalah memasang tombol Load More pada Recent Post sehingga blog akan lebih simpel dan supel jadi gak perlu lagi ada Arsip Blog yang memanjang ke bawah, inilah kode sederhananya smoga bisa di kembangkan lagi oleh sobat :



<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<style>
div.imgs {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 250px;
}

div.imgs:hover {
border: 1px solid #777;
}

div.imgs img {
width: 100%;
height: 100px;
}

div.descr {
padding: 15px;
text-align: center;
font-weight:bold;
font-size:16px;
}
#tempstart{
display: none;
}
</style>

<div id="tempstart"></div>
<div id="results"></div>
<div id="exresults"></div>
<div id="btnmore"></div>

<script>
var urlblog='www-game-aing.blogspot.com';
var outpost='results';
var maxpost='5';
var begin='1';
var startdiv='tempstart';
var outbtn='btnmore';
var outmore='exresults';
$( document ).ready(function() {
recentPost(urlblog,outpost,startdiv,maxpost,begin,outbtn,outmore);
});
</script>

<script>
function recentPost(url,divOut,divStart,limit,start,btnOut,moreOut)
{
$.ajax({
url: 'https://'+url+'/feeds/posts/summary?alt=json-in-script&max-results='+limit+'&start-index='+start,
type: 'get',
dataType: 'jsonp',
success: function(data) {
content = data.feed.entry;
if (content !== undefined) {
for (var i = 0; i < content.length; i++) {
title = content[i].title.$t;
for (var j = 0; j < content[i].link.length; j++) {
if (content[i].link[j].rel == "alternate") {
link = content[i].link[j].href;
break;
}
}
thumb = content[i].media$thumbnail.url;
summary = content[i].summary.$t;
$('#'+divOut).append('<div class="imgs"><a href="' + link.replace("http:","https:") + '"><img src="'+thumb+'" alt="'+title+'" width="300" height="200" title="'+title+'"></a><div class="descr">'+title);
$('#'+divStart).html(start);
$('#'+btnOut).html('<button onclick="loadMore(\''+url+'\',\''+divStart+'\',\''+divOut+'\',\''+limit+'\')">Load More</button>');
}
} else {
$('#'+divOut).html('<span>No result!</span>');
}
},
error: function() {
$('#'+divOut).html('<strong>Error loading feed!</strong>');
}
});
}

function loadMore(url,divStart,divOut,limit)
{
var jml = parseInt($("#"+divStart).text())+parseInt(limit);
$("#"+divStart).html(jml);

$.ajax({
url: 'https://'+url+'/feeds/posts/summary?alt=json-in-script&max-results='+limit+'&start-index='+jml,
type: 'get',
dataType: 'jsonp',
success: function(data) {
content = data.feed.entry;
totalPost = data.feed.openSearch$totalResults.$t;
if(jml >= parseInt(totalPost)){$("#btnmore").html('<font color="red">- The End -</font>')}
if (content !== undefined) {
for (var i = 0; i < content.length; i++) {
title = content[i].title.$t;
for (var j = 0; j < content[i].link.length; j++) {
if (content[i].link[j].rel == "alternate") {
link = content[i].link[j].href;
break;
}
}
thumb = content[i].media$thumbnail.url;
summary = content[i].summary.$t;
$('#'+divOut).append('<div class="imgs"><a href="' + link.replace("http:","https:") + '"><img src="'+thumb+'" alt="'+title+'" width="300" height="200" title="'+title+'"></a><div class="descr">'+title);
}
}
},
error: function() {
$('#'+divOut).html('<strong>Error loading feed!</strong>');
}
});
}
</script>

Untuk yang berwarna merah silahkan sesuaikan dengan kebutuhan blog sobat

Semoga bisa bermanfaat.....!