Membuat Widget Artikel Terbaru Dengan Fungsi Next dan Previous

Membuat Widget Artikel Terbaru Dengan Fungsi Next dan Previous - Sudah banyak widget yang sudah saya bagikan kepada anda semua, namun tidak ada salahnya jika saya akan kembali memberikan sebuah pilihan widget yang mungkin sudah tidak asing lagi dan sering digunakan oleh banyak blogger, widget ini adalahWidget Recent Pots (Artikel Terbaru).

Widget Recent Post ini adalah salah satu widget yang wajib anda pasang pada blog saudara, dengan widget ini pengunjung akan mengetahui daftar artikel-artikel yang baru anda publikasikan. Sehingga akan meningkatkan jumlah page view blog saudara apabila ada pengunjung yang meng-klik atau mengunjungi artikel terakhir yang sudah anda publikasikan.

Memasang Widget Recent Post Dengan Fungsi Previous dan Fungsi Next

Widget recent post atau artikel terbaru yang akan saya bagikan kali ini memiliki fungsi unik dan khusus di bandingkan dengan widget artikel terbaru lainnya. fungsi tersebut adalah fungsi Next dan Previous. Widget ini sendiri adalah widget yang saya dapat dari blog CREATING WEBSITE dengan url blog maskolis.com .

Bagi anda yang tertarik ingin memasang Widget Artikel Terbaru ini, anda hanya perlu mengikuti langkah-langkah sederhana di bawah ini :

• Login dengan akun blog saudara
• Pilih blog yang ingin anda tambahkan widget ini.
• Kemudian Pilih Menu TEMPLATE dan klik EDIT HTML
• Cari kode ]]></b:skin> dan letakan kode di bawah ini tepat di atas kode ]]></b:skin>

 #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfjWjdwcXFmDLDuIAIKGG_gLEqXPXEAX0BxsOeo-QB0_2M98Z3lXOCn3IyxgEJ20O8wzx0FetMPt2IPDNBv7yhIOMBVA58POURniOwdvt_waLj9CCclQstq2bqjFzNM4WW8fb9L7AhgTc/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

 - Kode berwarna biru itu untuk pengaturan Tinggi dan Lebar widget nantinya, anda bisa mengubahnya sesuai selera anda.

• Setelah itu, masukan kode berikut ini di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://fatkhulhuda.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.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/AVvXsEglK_2iBsgbbLgFg3jobmjycgcF3mmCSGNyDQK-R1CmW5VAZOBgXGB63o6EapukF_pBrcpCar52iFNCbIHi1dmzSKsWxH0DLxvAozsK1gHyT7ZoPOSzNFJWQ_vX_hkBE7KmCGI7RWXNwJE/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").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("mas-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("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Keterangan : 
- var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget.    
- urlblog = http://fatkhulhuda.blogspot.com/; >> ganti dengan URL blog Anda.
- var charac = 100;>> Jumlah karakter atau huruf pada setiap post.

• Setelah itu SIMPAN template  untuk menyimpan perubahannya.
• lalu masuk ke menu TATA LETAK ,pilih kotak yang ingin anda tambahkan dengan widget ini. Kemudian klik add gadget -->> HTML/javascript masukan kode berikut ini ke dalamnya. 

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

• Jika sudah jangan lupa klik SIMPAN atau SAVE

Semoga Bermanfaat...