Blog Ardhana - Widget recent post adalah salah satu widget terpenting dalam sebuah blog, mengapa? karena itu bisa membantu visitor ketika ada artikel terbaru. Widget Recent post yang saya share kali ini berbeda dari yang biasanya. Dikutip dari Arlina Design, widget recent post widget ini ada navigasi pada bagian bawah widget.
Cara penempatan widget ini sangat mudah. Kamu cukup menambahkan script kode pada widget baru.
Seperti apa hasilnya?
Silahkan ikuti tutorial yang saya bagikan di bawah ini.
Membuat Recent Post Widget dengan Navigasi
1. Login ke blogger > Tata Letak > Klik add Gadget/Tambahkan Gadget > pilih HTML/Javascript > kemudian copy semua kode di bawah ini pada widget yang baru kamu buat tadi.
><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/AVvXsEixDgmQAYEwD2Gt4BKbMj1wztgM2sjHa7PnOG3fOdKHcUAqsBvau2Agytmb0w3H3E8UTQcEgXtJLB99TaPhLT_ovnkSS_xW5DnNsmZ1Jk__51oymfHZatf_sLrJVzN2hMTENKDbReRiucgK/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://blog.ardhananetwork.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/AVvXsEi6B_N1ubu80F9KG5c-jS_GnvaUtV5sCUcgYFb7Lq-vPZ86A8ifLO4XobYC99UMTzGRcK4O62CUG4YeOXabFRhhoRp7J1q5GqYek25b_gySVF0axc8X48O1Ck-m8AonpLTcW1LZxyVRbLeT/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>
2. Ganti kode di bawah ini yang ada pada script kode diatas sesuai kebutuhan kamu, kemudian klik simpan.
var numfeed = 5;
var urlblog = "http://blog.ardhananetwork.com";
var charac = 40;
Keterangan:- var Numefeed: Jumlah postingan yang ditampilkan
- Var Urlblog: Isi dengan alamat blog kamu
- Var Charac: Jumlah maksimal summary post yang ditampilkan
Demikian informasi mengenai cara Membuat Recent Post Widget dengan Navigasi semoga bermanfaat untuk kamu, dan jangan lupa untuk share artikel ini ke teman teman kamu agar teman kamu tidak kudet informasi. Terimakasih.
