Cara memmbuat Recent Post di Blogger

Bagi kalian yang Pengen Membuat Widget "Recent Post" di Blog.

kali ini saya akan memberikan sedikit Tutorialnya, langsung saja ikuti langkah demi langkah.

Demo

1. Pastinya kalian harus Login Dulu di "Blogger" 
2. Pilih Blog yang mau di tambahin Widget Recent Post
3.. Pilih Menu Tata Letak >  tambahkan Gadget > Pilih HTML / Java Script
5. Masukan Kode di Bawah ini di Dalamnya

<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://mauratutorial.blogspot.com/";
    var charac = 40;
    var urlprevious, urlnext;
function arlinafeed(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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWb8eTl0VjyBX19bftQZZXBJXbb5PYeEeFuKhLVcAUg6hqieqWFeRxW_rXDHztJQFPPKJpu3A3YP5l2B1F8NQQie4ZfWiJU4je8yPXcDGuXlyqa7tZgtoRJ10kt260hcLMuckv5jpzWQ_D/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>"+arlinafeed(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","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<style>
#recentpostnav{border:1px solid #000;width:100%;margin:0 auto;}
#recentpostsae{margin:0}
.recentpostel{background:#ffffff;display:block;border:2px solid #111;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#222;padding:5px;float:left;height:70px;margin-right:8px;width:70px;}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px!important;font-weight:700!important;margin:0;color:#aaa;}
.recentpostel:hover{background-color:#111;}
.recentpostel p{font-size:12px;text-align:left;color:#aaa;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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjPqz08IAqfZ3xM9X6BeG-VlRq0fGmZPzqkFI751dRDIZt1zCoKw5gYEKkmcGGtWBaXiIiH4vnNUXI0J63rtRNJMirTUfOWGziC5h-uSlM6KPmtFwk_bRQPf_8KWJuD4igTQRCuP9xNiIB/s1600/loader.gif) 50% 50% no-repeat #2c3e50;height:470px;border:1px solid #111}
#recentpostnavfeed{border:2px solid #000;color:#bbb;background:#333;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#111;}
#recentpostnavfeed a{color:#bbb!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>

6. Ganti Link yang Berwarna Merah dengan link Home blog anda
7. Terahir save,,,,

Demikian "Cara memmbuat Recent Post di Blogger"

Share: