Thursday, July 12, 2007

Add the 10 Recent Posts to your Blog

If you want to let your visitors know what your 10 recent posts is, 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)

<div id="newPosts">
Loading...
<noscript>failed!<br/>Javascript not supported here!</noscript>
</div>

<script>
function handlePosts(json) {

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

var temp = '<ul>';
var PostShow = 10;
var StartIndex = 0;
var sortentry = json.feed.entry.sort(compareentry);
if (json.feed.entry.length > StartIndex)
{
for (var i=StartIndex, Post; Post = sortentry[i]; i++) {
if (i >= PostShow+StartIndex)
break;
var title=Post.title.$t;
var link=Post.link[0].href;
var timestamp=Post.published.$t.substr(0,10);
temp += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
}
}
else
temp+="<li>No further post !</li>";
temp+="</ul>";
document.getElementById("newPosts").innerHTML = temp;
}
</script>

<script src="/feeds/posts/summary?orderby=published&alt=json-in-script&callback=handlePosts" type="text/javascript"/></script>


Done!!