Home » » Cara Membuat Recent Post Dengan Fungsi Next Dan Previous

Cara Membuat Recent Post Dengan Fungsi Next Dan Previous

Written By Unknown on Monday, July 8, 2013 | 8:00 AM

.
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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigaOX4LOqt1ymqjGQ3OZAUw80jPyu4l4QSO-_c10h2t8RoUzbcdiarW89rTVx6zgpCppm_6ORgkCEOIBZpRTVeHDelJfZhD7UklsaQnHBImrcPhlQHND7yppgIuqzfGPs9enNvYjUwfuY/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 :
Cara Membuat Recent Post Dengan Fungsi Next Dan Previous
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.

25 komentar:

  1. Pengen ada gituan, tapi ngeri rank nya turun lagi...

    ReplyDelete
  2. keliyatannya cocok nih buat tampilan blog saya :)

    ReplyDelete
    Replies
    1. cocok untuk semua tampilan, tinggal edit warnanya aja.. :)

      Delete
  3. wah keren recent postnya

    ReplyDelete
  4. seperti yang ada di maskolis, nice gan udah share :)
    marhaban yaa ramadhan gan hehe

    ReplyDelete
  5. Sayang banget ga ada demonya gan,ane mau coba dulu

    ReplyDelete
  6. lumayan tuw scriptnya. ntar aq mau coba... :)

    ReplyDelete
  7. mas kok gak bisa yah di blog saya ?
    tolong check fauzanashariblog.blogspot.
    thx

    ReplyDelete
    Replies
    1. mungkin memang widget ini tidak cocok dengan template anda mas ..

      Delete
  8. mantap nih recent postnya :D hahaha

    ReplyDelete
  9. widgetnya boleh dicoba nih, berguna banget bwat betahin pengunjung :D

    ReplyDelete
  10. wah mantap nih..wajib d coba...
    bisa gak bro kode scriptnya untuk "popular post" kayak gini???

    ReplyDelete
    Replies
    1. ok..kasi tau gue ye bro kalau sdh tau..

      kirim pesan lewat facebook gue bro :D

      Delete
    2. wwkwk okee dch gan kalo ada.. :D

      Delete
  11. mantaebbb gan sudah saya coba keren

    ReplyDelete

Terima kasih telah berkunjung! Silahkan tinggalkan komentar untuk respon/pertanyaan.

=== RULES ===

1. Dilarang Spam.
2. Dilarang live link.
3. Dilarang nama komentator menggunakan Keyword.
4. Dilarang berkomentar yang seolah memuji (Out Of Topic).
5. Isi komentar relevan dan berkualitas yang berkaitan dengan artikel.

Maaf apabila ada komentar yang belum saya tanggapi karena saya tidak online 24 Jam. Terima kasih.