Show the 10 Recent Posts to your Blog

Previous trick "Add the 10 Recent Posts to your Blog" may not be updated after you
published a new post so now Blogger Tutor offer you another trick to show the 10
recent post, just follow the instruction below.

Step 1:

1. Go to 'Add and Arrange Page Elements' page

2. Click Add a Page Element

3.Choose 'HTML/JavaScript'



Step 2:

Copy the following code to the 'HTML/JavaScript' element and the red highlight code is the number of post you want to display (Default is 10).
Then change the default address(http://yourblogaddress.blogspot.com/) to your blog address.


/* ---( 10 recent post trick begin )--- */
<div class="widget-content">
<div id="newpostsjinyaolin">
<h2>Loading...</h2>
</div>

<script>
function compareentry(a,b){
order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/,
'$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/,
'$1/$2/$3 $4 GMT'));
return 0-order;

}
function handlePostsjinyaolin(json) {

var temp = '<ul id="Feed001_feedItemListDisplay">';
var postshow=10;
var sortentry=json.feed.entry.sort(compareentry);
for (var i=0, post; post = sortentry[i]; i++) {
if(i>=postshow) break;
var title=post.title.$t;
var link=post.link[0].href;
var authorname=post.author[0].name.$t;
var timestamp=post.published.$t.substr(0,10);
temp += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a>-'+timestamp+'</span></li>';
}
temp+="</ul>";
document.getElementById("newpostsjinyaolin").innerHTML = temp;
}
</script>

<script src="http://yourblogaddress.blogspot.com/feeds/posts/default?alt=json-in-script&callback=handlePostsjinyaolin" type="text/javascript"></script>
</div>
/* ---( 10 recent post trick end )--- */


Done!!