Membuat Widget Recent Post Dengan Navigasi

Membuat Widget Recent Post Dengan Navigasi - Pertama-tama saya ingin mengucapkan Selamat Berakhir Pekan untuk anda semua pembaca setia Blog Semua-Tutorialku. Di akhir pekan kali ini saya akan berbagi Tutorial tentang Membuat Widget Recent Post Dengan Navigasi. Tutotial ini saya dapatkan dari Blognya Mbak Arlina Fitriyani di Arlina Design.

Cara Membuat Widget Recent Post Dengan Navigasi ini juga saya rasa cukup mudah sekali, karna anda tidak perlu repot-repot mengedit Template. Anda hanya perlu menambahkan gadget baru saja untuk menerapkan widget kali ini. :)

DEMO

1. Login ke Blogger > Pilih Tata Letak > Klik Tambahkan Gadget > HTML/Javascript. Kemudian Salin semua kode dibawah ini kedalam gadget tersebut.

 <style scoped='' type='text/css'>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbzS6HAEQa0h_M-hbjB9aJe9DrQ6a-pzF1Gdmb1frhM5IuXvTviAH7XGTn3lOPyUFaubkSxnrS2Ze8bkmuTi3M1W4hPWmm5o7eurkRPkrv6GY0TxmiL3NOSNameWozxshLhG2SSDLCNrky/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#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>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://semua-tutorialku.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/AVvXsEhSqxSSxDQB5uxvJjlU5arLMkOibaYt5T0UPZqBJoFjeA5fonDoKRFqz5e8pjuTacPeR44OZxtamdGVzXTZg0jcnqGsmOCxWBa2p5IpZibTHWY90TzfZCcQGKRf7z8CloFLxHnZydSc-qf5/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>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div> 

Keterangan: 

• var numfeed: Jumlah postingan yang ingin ditampilkan. / var numfeed = 5
• var urlblog: Isi dengan alamat blog anda. / http://semua-tutorialku.blogspot.com
• var charac: Jumlah maksimal summary post yang ditampilkan. / var charac = 40

2. Jika selesai, Lalu simpan Widget.

Live Demo bisa dilihat diSidebar blog saya. :)

Bagaimana? Mudah dan Menarikan widget kali ini tentang Membuat Widget Recent Post Dengan Navigasi, Jika ada masalah jangan sungkan ajukan saja disini. Selamat Mencoba dan Semoga Bermanfaat.