How to Display a List of Recent Posts (Recent Posts) including Per Label - Category on a Blog

How to Display a List of Recent Posts (Recent Posts) including Per Label - Category on a Blog

WIDGET Recent Posts, Latest Posts, Latest Articles, or Latest Posts is one of the widgets that is 'required' to be installed on a blog, usually in the right sidebar. 

This widget contains a list of the latest posts, usually five titles, as part of the navigation and internal links recommended by Google so that the blog is user friendly and also search engine friendly, SEO friendly. 

The list of latest posts is also indexed by Google. 

Below are two recent post codes to display the latest posts, in the form of just the title and plus a thumbnail image. It can also be per category/per label. 

How to Display a List of Recent Posts

Bring up the Recent Post Title widget only (per label can also be done)

1. Layout > Add a Gadget > HTML/Javascript

2. Fill in the widget title with Latest Posts

3. Enter this code:

<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>

Notes:

1. The number 5 is the number of posts. Can be changed to smaller or larger. Maybe just five.

2. If you want to display only certain labels or categories, then add a label like this to the last script code:

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

Save!

How to display the Recent Post Title and Thumbnail Image widget:

1. Layout > Add a Gadget > HTML/Javascript

2. Fill in the widget title with Latest Posts

3. Enter this code:

<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>

Notes:

To display the latest posts by label/category, change the red color code to /feeds/posts/default/-/LabelName?alt

4. Save! 

For the recent posts widget for this last blogger, the display is in the form of a title, image and summary. If you don't want to use a summary, just change the number 90 to 0. 

How to Display a List of Recent Posts (Recent Posts) including Per Label - Category has been tested and works. The proof is that I can make a screen-shot like the illustration above. Wassalam. 

Source