[Blogging] Membuat Widget Artikel Terbaru Dengan Navigasi

Pengunjung agar betah berlama-lama di blog anda salah satu caranya dengan menggunakan navigasi yang baik dan ini merupakan anjuran dari sang pengembang blog yaitu om google. Dengan navigasi yang baik pengunjung akan lebih mudah dalam mencari artikel yang ingin mereka cari di blog anda. Untuk yang belum mempunyai blog dan ingin membuat blog silahkan lihat panduan Langkah Cepat Membuat Blog di Blogspot

Pada kesempatan ini saya ingin berbagi cara membuat Widget Artikel Terbaru dengan disertai Navigasi. Untuk contohnya anda bisa melihat disamping kanan pada blog ini dan menu navigasinya berada di bawah widget tersebut. Anda merasa tertarik? Berikut cara membuatnya : pada tampilan antarmuka blog anda pilih Tata Letak > Tambah Widget > HTML/java script, kemudian copy kode text dibawah ini lalu simpan.

<style>
#jsonfeedsidebar{border:1px solid #585858;width:385px;margin:0 auto}
#blogjsonfeed{margin:5px}
.elemenartikel{border:1px solid #DDD;margin:5px 0;padding:5px}
.elemenartikel img{float:left;height:70px;padding-right:8px;width:70px}
.elemenartikel h6,.elemenartikel h6 a{font-size:11.5px!important;font-weight:700!important;margin:0;color:#333}
.elemenartikel:hover{background-color:#bdbdbd}
.elemenartikel p{font-size:11.25px;text-align:justify;color:#333;line-height:14px;margin:5px 0}
#loadingelemen{color:#888;font-family:Century Gothic;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/AVvXsEhgaeY9NuZ9IePusPEXtPxNRc-BZf1ZHAeC0FT4zAbdyMb11H2x5aHXO5lPadaKGg08v8PgkkGKXGsH4dxyG4v8TLb0lCavnufaZ8Kv4-JmpRErtTUvQ4HD73EBHjgeI4xgmEQ4_9E9mlA/) no-repeat 50% 50%;height:472px;border:1px solid #DDD}
#navigasifeedblog{border:1px solid #DDD;color:#BBB;font-family:Tahoma;font-size:12px;text-align:center;margin:5px}
#navigasifeedblog:hover{background-color:#696969}
#navigasifeedblog a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#navigasifeedblog span{padding:5px 10px}
#navigasifeedblog .lanjut{float:right}
#navigasifeedblog .sebelum{float:left}
#navigasifeedblog .beranda{text-align:center}
#navigasifeedblog a:hover,#navigasifeedblog span.nonaktif{color:#FFF!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var jmlfeed = 5;
var tandawal = 0;
var alamatblog = "http://template-4-blogger-design.blogspot.com";
var kar = 90;
var urlsebelum, urlsesudah;

function batasanfeed(bagi,panjang){
var tampilfeed = bagi.split("<");
for(var i=0;i<tampilfeed.length;i++){
if(tampilfeed[i].indexOf(">")!=-1){
tampilfeed[i] = tampilfeed[i].substring(tampilfeed[i].indexOf(">")+1,tampilfeed[i].length);
}
}
tampilfeed =  tampilfeed.join("");
tampilfeed = tampilfeed.substring(0,panjang-1);
return tampilfeed;
}
function tampilblogjsonfeed(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlsebelum = "";
urlsesudah = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlsebelum = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlsesudah = json.feed.link[k].href;
}
}
for (var i = 0; i < jmlfeed; 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/AVvXsEirSkEioFFCH0MX_bBMXm6IK5ApogIBNXIk5nBnGm7IyBZAw4YapGNfjN9gobJffDk9bWWnmktzbh4Ec6RDKlJeYqWbBZ3Bvme9rPqXLzt8LnRqLRnnbjxKA81v93qHolzDPImNotX5evs/s1600/no-image.gif";
}
showblogfeed += "<div class='elemenartikel'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + batasanfeed(postcontent,kar) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("blogjsonfeed").innerHTML = showblogfeed;
showblogfeed = "";
if(urlsebelum) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='sebelum'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='nonaktif sebelum'>&#9668; Previous</span>";
}
if(urlsesudah) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='lanjut'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='nonaktif lanjut'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='beranda'>Home</a>";
document.getElementById("navigasifeedblog").innerHTML = showblogfeed;
}

function navigasifeed(alamat){
var p, parameter;
if(alamat==-1) {
p = urlsebelum.indexOf("?");
parameter = urlsebelum.substring(p);
} else if (alamat==1) {
p = urlsesudah.indexOf("?");
parameter = urlsesudah.substring(p);
} else {
parameter = "?start-index=1&max-results=" + jmlfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=tampilblogjsonfeed";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(tandawal==1) {removerscript();}
document.getElementById("blogjsonfeed").innerHTML = "<div id='loadingelemen'></div>";
document.getElementById("navigasifeedblog").innerHTML = "";
var arsipfeed = alamatblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', arsipfeed);
terbaru.setAttribute('id', 'LABELTEMPORAL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
tandawal = 1;
}
function removerscript() {
var elemen = document.getElementById("LABELTEMPORAL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="blogjsonfeed"></div>
<div id="navigasifeedblog"></div>
<div style='float:right;font-size:6px;padding:5px;'>
<a href='http://template-4-blogger-design.blogspot.com' target='_blank'>Cara buat widget ini»</a>
</div>

keterangan:
var jmlfeed = 5; (jumlah postingan yang akan anda tampilkan, ganti terserah anda)
var alamatblog = "http://template-4-blogger-design.blogspot.com"; (ganti dengan alamat blog anda)
var kar = 90; (jumlah entri kata pada setiap postingan, ganti terserah anda)

Silahkan berkomentar saja apabila ada kendala dalam mengaplikasikannya di blog anda.
Selamat Mencoba...

SILAHKAN TINGGALIN KOMENTAR YANG BUKAN SPAM ^_^

NAMA ANDA - 22.32

MASUKKAN TOMBOL TWEET DISINI