Cara Memasang Widget Recent Post dengan Navigasi

Dul Kenyot   05.26   Css, Javascript, Tutorial   Comment  

Cara Memasang Widget Recent Post dengan Navigasi Bar. Sobat blogger, kali ini saya akan membagikan sebuah tutorial yang sebelumnya sudah pernah di share oleh sis Arlina pada blognya yang bernama Arlina Design cek disini, ya sesuai judul diatas Recent Post Dengan Navigasi.  Apa itu recent post dengan navigasi? yaitu sebuah widget yang berfungsi menampilkan postingan-postingan terbaru dari blog kita dengan tambahan navigasi bar pada bagian bawahnya (terjemah bebas ala antoncabon)
Recent post secara default bagi yang menggunakan flatform blogger belum tersedia jadi kita perlu sedikit kreasi dan inisiatif untuk menambahkannya pada blog sobat, sebenarnya ada banyak jenis widget recent post yang sudah dibagikan oleh blogger diluar sana, tapi recent post kali ini agak sedikit nyeleneh karena ada tombol navigasi pada bagian bawah nya, karena ke nyelenehannya itulah maka saya akan bagikan kembali cara membuat atau memasangnya di blog kesayangan kita sob...

Cara Memasang Widget Recent Post dengan Navigasi Bar

Ok sudah siap yuk kita masuk ke proses pemasangannya dan sangat simpel:

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

DEMO

Cara Memasang Widget Recent Post Dengan Navigasi

Langkah ke-1: Masuk ke menu Tataletak>>Tambahkan Gadget HTML/Javascript  Masukan Kode Javascript dan Css berikut:

 <div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://kyleandkelsey.blogspot.com/";
    var charac = 40;
    var urlprevious, urlnext;
function antoncabonfeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+antoncabonfeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","antoncabonlabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("antoncabonlabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<style>
/* Recent Post Navigasi */
#recentpostnav {
  border: 1px solid #585858;
  width: 100%;
  margin: 0 auto;
}
#recentpostsae {
  margin: 0px;
}
.recentpostel {
  background: #fff;
  display: block;
  border: 1px solid #ddd;
  margin: 5px 0;
  padding: 10px;
  height: 79px;
}
.recentpostel img {
  background: #fff;
  padding: 4px;
  float: left;
  height: 70px;
  margin-right: 8px;
  width: 70px;
  border: 1px solid #ddd;
}
.recentpostel h6,
.recentpostel h6 a {
  text-decoration: none;
  font-size: 13px!important;
  font-weight: 700!important;
  margin: 0;
  color: #111;
}
.recentpostel:hover {
  background-color: #fefefe;
}
.recentpostel p {
  font-size: 12px;
  text-align: left;
  color: #555;
  line-height: normal;
  margin: 5px 0;
}
#recentpostload {
  color: #888;
  font-family: Tahoma;
  font-size: 100px;
  letter-spacing: -10px;
  text-align: center;
  text-shadow: -5px 0 1px #444;
  background: #fff url(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) no-repeat 50% 50%;
  height: 470px;
  border: 1px solid #ddd;
}
#recentpostnavfeed {
  border: 1px solid #ddd;
  color: #bbb;
  font-family: Verdana;
  font-size: 12px;
  text-align: center;
  margin: 0px;
}
#recentpostnavfeed:hover {
  background-color: #fefefe;
}
#recentpostnavfeed a {
  color: #141414!important;
  font-family: Tahoma!important;
  font-size: 12px!important;
  font-weight: 400!important;
  display: block;
  padding: 5px 10px;
}
#recentpostnavfeed span {
  padding: 5px 10px;
}
#recentpostnavfeed .next {
  float: right;
}
#recentpostnavfeed .previous {
  float: left;
}
#recentpostnavfeed .home {
  text-align: center;
}
#recentpostnavfeed a:hover,
#recentpostnavfeed span.noactived {
  color: transparant!important;
}
</style> 

Langkah Ke-2: Ganti url http://kyleandkelsey.blogspot.com/ dengan url blog sobat! lalu klik Simpan.

SELESAI ! Selamat mencoba.

Kredit source code

Arlina Design