Cara Menampilkan Daftar Posting Terbaru (Recent Post) termasuk Per Label - Kategori

Baca Juga

Cara Menampilkan Daftar Posting Terbaru (Recent Post) termasuk Per Label - Kategori di Blog.

WIDGET Recent Posts, Latest Posts, Artikel Terbaru, atau Posting Terbaru merupakan salah satu widget yang 'wajib' dipasang di blog, biasanya di sidebar kanan.

Widget ini berisi daftar tulisan terbaru, biasanya lima judul, sebagai bagian navigasi dan internal link yang dianjurkan Google agar blog ramah pengguna (user friendly) juga ramah mesin pencari seo friendly.

Daftar posting terbaru juga terindeks Google.

Berikut ini dua kode recent post untuk menampilkan tulisan terbaru, berupa judul saja dan plus gambar thumbnail. Bisa juga per kategori/per label.

Cara Menampilkan Daftar Posting Terbaru

Memunculkan widget Recent Post Judul Doang (Per Label Juga Bisa)

1. Layout > Add a Gadget > HTML/Javascript
2. Isi judul widget dengan Latest Posts atau Posting Terbaru
3. Masukkan kode ini:


<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Catatan:
1. Angka 5 adalah jumlah posting. Bisa diubah menjadi lebih kecil atau lebih besar. Sebailnya lima saja.
2. Jika ingin menampilkan per label atau kategori tertentu saja, maka tambahkan label seperti ini untuk kode script terakhir:

<script src="/feeds/posts/summary/-/NamaLabel?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Save!


Cara Memunculkan widget Recent Post Judul & Gambar Thumbnail:

1. Layout > Add a Gadget > HTML/Javascript
2. Isi judul widget dengan Latest Posts atau Posting Terbaru
3. Masukkan kode ini:

<script type="text/javascript">
window.recentposts=(function(){var a=function(p){var d=p||{},i=d.url_blog||"",n=d.numberofposts||5,h=d.id_contain||"#rcposts",e=d.imagesize||40,b=d.snippetsize||100,c=d.loadingClass||"rcloading",m=d.commentstext||"Comments",l=d.firstcmtext||"Comment",f=d.NoCmtext||"No Comments",g=d.MonthNames||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],k=d.pBlank||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW59rBbXNbb5HmoeFfZ7RktFlJKH52jxTep95qJH64W83C5cbCdLZ0oUPCHaQow5ZORUpN_fBWv24K-zH-obkYx39X7j8_qpQ3EkYapdB-Hg1fT4whjcjEW7OohyphenhyphenjU-uHYYNjDMLzYuZ8/s1600/no.png";$(h).addClass(c);var j=i;if(i===""){j=window.location.protocol+"//"+window.location.host}$.ajax({url:j+"/feeds/posts/default?alt=json-in-script&orderby=published&max-results="+n+"",type:"get",dataType:"jsonp",success:function(v){var y,o,w,q,A,D,z,F,x,C,E,s="",B=v.feed.entry;if(B!==undefined){s="<ul class='rcpost'>";for(var u=0;u<B.length;u++){for(var t=0;t<B[u].link.length;t++){if(B[u].link[t].rel=="alternate"){y=B[u].link[t].href;break}}for(var r=0;r<B[u].link.length;r++){if(B[u].link[r].rel=="replies"&&B[u].link[r].type=="text/html"){w=B[u].link[r].title.split(" ")[0];break}}if("content" in B[u]){A=B[u].content.$t}else{if("summary" in B[u]){A=B[u].summary.$t}else{A=""}}if("media$thumbnail" in B[u]){D=B[u].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+e+"-c")}else{D=k}if(w===0){q=' <span class="rccomments">'+f+"</span>"}else{if(w===1){q=' <span class="rccomments">'+w+" "+l+"</span>"}else{q=' <span class="rccomments">'+w+" "+m+"</span>"}}A=A.replace(/<\S[^>]*>/g,"");if(A.length>b){A=A.substring(0,b)+"..."}o=B[u].title.$t;z=B[u].published.$t.substring(0,10),F=z.substring(0,4),x=z.substring(5,7),C=z.substring(8,10),E=g[parseInt(x,10)-1],s+='<li><a class="rcthumbs" href="'+y+'" target="_blank"><img style="width:'+e+"px;height:"+e+'px;display:block" alt="'+o+'"src="'+D+'"/></a><strong><a href="'+y+'" target="_blank">'+o+'</a></strong><span class="date"><span class="dd">'+C+'</span> <span class="dm">'+E+'</span> <span class="dy">'+F+"</span></span>"+q+"<p>"+A+"</p></li>"}s+="</ul>";$(h).html(s).removeClass(c)}else{$(h).html("<span>No result!</span>").removeClass(c)}},error:function(){$(h).html("<strong>Error Loading Feed!</strong>").removeClass(c)}})};return function(b){a(b)}})();
</script>
<style type="text/css">
ul.rcpost {line-height: 1.2;}
ul.rcpost li{list-style:none;margin:0;overflow:hidden;padding: 0.7em 0px;}
ul.rcpost .rcthumbs{float:left;margin:0 7px 10px 0}
ul.rcpost strong{display:block;line-height:normal;margin-top:-3px}
ul.rcpost p{margin:5px 0 11px;line-height:normal;font-size:11px}
ul.rcpost .date,ul.rcpost .rccomments{font-size:11px;display:none}
ul.rcpost .rccomments{padding-left:5px;border-left:1px solid #969191;display:none}
</style>
<div id="recentposts"></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
recentposts({
numberofposts:5, 
id_contain:"#recentposts",
commentstext:"Comments",
imagesize:72,
snippetsize:90
});
});
//]]>
</script>

Catatan:
Untuk menampilkan posting terbaru berdasarkan label/kategori, ubah kode warna merah menjadi /feeds/posts/default/-/NamaLabel?alt

4. Save!

Untuk widget recent posts untuk blogger yang terakhir ini, tampilanya berupa judul, gambar, dan ringkasan. Jika tidak ingin pake ringkasan, ubah saja angka 90 menjadi 0.

Cara Menampilkan Daftar Posting Terbaru (Recent Post) termasuk Per Label - Kategori sudah dites dan berhasil. Buktinya saya bisa bikin screen-shotnya seperti gambar ilustrasi di atas. Wasalam. (blogromeltea.blogspot.com).*

Sumber