Cara Membuat Recent Post Dengan Fungsi Next Dan Previous

.

Z-T Blog - kali saya mau menjawab kembali dari seorang pengunjung yang menrequest "cara buat Recent Post kayak blog mas gimana ya?" oke kali saya akan share tutorial kembali cara membuat widget recent post dengan fungsi next dan previous yang ada di blog ini ( Z-T Blog), apa manfaat recent post..? ya pastinya membantu pengunjung untuk melihat artikel terbaru saat membaca artikel lainnya tanpa mengunjungi beranda/home blog tersebut, dan di tambah lagi dengan fitur menarik dari widget ini yaitu di tambahkannya tombol next dan Provious, kenapa bisa di bilang menarik..? karena bisa membantu pengunjung melihat artikel  terbaru dan artikel terlama dengan memakai tombol Previous, ini seperti halnya di homepage hanya saja ini lebih simple.. dan pastinya sangat menguntungkan.. okee berikut cara pembuatannya :

1. Masuk Tata Letak.
2. Tambahkan Gadget.
3. HTML/JavaScript
4. Masukan kode dibawah ini
5. Simpan.

<script type='text/javascript'>
//<![CDATA[
var numfeed = 2; /* Jumlah Postingan */
var startfeed = 0;
var urlblog = "http://zhalltrozans.blogspot.com/";
var charac = 50;
var urlprevious, urlnext;

function akaUTkolisfeed(ir,banget){
var showfeed = ir.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div class='akaUT-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + akaUTkolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("akaterbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("akaUT-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("akaterbaru").innerHTML = "<div id='akaUT-loading'></div>";
document.getElementById("akaUT-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var akaterbaru = document.createElement('script');
akaterbaru.setAttribute('type', 'text/javascript');
akaterbaru.setAttribute('src', archievefeed);
akaterbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(akaterbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="akaterbaru"></div>
<div id="akaUT-navigasifeed"></div>
<style>
#aka-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#akaterbaru{margin:0px}
.akaUT-elemen{background-color:#fff;border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.akaUT-elemen img{background:#eee;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.akaUT-elemen h6,.akaUT-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.akaUT-elemen:hover{background-color:#ecf3fb}
.akaUT-elemen p{text-align:justify;color:#555;line-height:14px;margin:5px 0}
#akaUT-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#ffffff url(http://www.westmarine.com/wcsstore/MadisonsStorefrontAssetStore/images/colors/color1/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#akaUT-navigasifeed{background-color:#fff;border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#akaUT-navigasifeed:hover{background-color:#ecf3fb}
#akaUT-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#akaUT-navigasifeed span{padding:5px 10px}
#akaUT-navigasifeed .next{float:right}
#akaUT-navigasifeed .previous{float:left}
#akaUT-navigasifeed .home{text-align:center}
#akaUT-navigasifeed a:hover,#akaUT-navigasifeed span.noactived{color:transparant!important}
</style>

hasilnya akan seperti ini :

Keterangan :

• Kode yang berwarna Merah adalah jumlah posting/artikel yang akan di tampilkan. anda bisa ubah sesuai keinginan.
• Kode yang berwarna Orange anda ganti dengan URL blog anda.
• Kode yang berwarna Hijau adalah jumlah karakter huruf setiap artikel anda bisa ubah sesuai keinginan.

bagaimana dengan hasilnya..? cukup memuaskan..? :D demikian untuk tutorial kali ini dan terima kasih untuk yang request artikel ini akhirnya saya tidak kehabisan ide untuk blogging :) ,semoga bermanfaat untuk anda. jangan lupa tinggalkan jejak. terima kasih.