Widget Recent Post V2.0

Tutorial kali ini tentang Widget Recent post... kenapa nak guna widget ni? sebenarnya ini nak memudahkan pembaca mengetahui apa entri anda sebelum ini... Kelebihan widget recent post versi 2.0 ni... adalah anda boleh tekan next untuk melihat entri yang lama2... (seperti yang saya bulatkan dalam gambar di atas)

Boleh dikira dapat menggantikan blog achieve... blog achieve sebenarnya penting supaya tahap kebolehcapaian para pembaca blog anda tinggi untuk entri-entri sebelum ni... tapi saya lebih suka menggunakan Kalendar.. kerana nampak lebih kemas dan tak panjang macam blog achieve... (apa pun... ikut dada tanya selera...=)

Kalau anda nak widget ni... boleh ikut step kat bawah ni ya...

1. Login ke Blogspot .

2. Klik Layout > Add a Gadget >HTML/Javascript .

3. Copy kod di bawah dan pastekan kedalamnya

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

<script>
var nPostStartIndex = 6;
var nPostShow = 5;

function showRecentPosts(nIndex) {
if (!nIndex)
nIndex = nPostStartIndex;
var sFeedURL = 'http://www.whiteymommy.com/feeds/posts/summary?orderby=published&start-index='+nIndex+'&max-results='+(nPostShow+1)+'&alt=json-in-script&callback=generatePosts';
var script = document.createElement('script');
document.getElementById('newPosts').innerHTML = 'Loading..';
script.setAttribute('src', sFeedURL);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

function generatePosts(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 sHTML = '<ul>';
var sortentry = json.feed.entry.sort(compareentry);
var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
var nTotalPost = parseInt(json.feed.openSearch$totalResults.$t);
for (var i = 0, Post; Post = sortentry[i]; i++) {
if (i >= nPostShow)
break;
var title = Post.title.$t;
var j = 0;
while (j < Post.link.length && Post.link[j].rel != "alternate")
j++;
var link = Post.link[j].href;
var timestamp=Post.published.$t.substr(0,10);
sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a></span></li>';
}
sHTML += '</ul>';
sHTML += generatePostLink(parseInt(json.feed.entry.length), nIndex, nTotalPost);
document.getElementById('newPosts').innerHTML = sHTML;
}

function generatePostLink(nFetch, nIndex, nTotalPost) {
var bOld = (nFetch > nPostShow);
if (bOld) nFetch = nPostShow;
var sResult = '<p align="right">';
if (nIndex > nPostStartIndex)
sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts"><<</a>&nbsp;&nbsp;';
if (bOld)
sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">>></a>';
sResult += '</p>';
return sResult;
}
</script>

<script language="javascript">showRecentPosts();</script>

*anda harus menukar url blog saya ke url blog anda....

**bahagian yang saya highlightkan dengan warna merah tu... anda boleh tukar entri ke berapa yang anda nak showkan...

Kredit kepada: Jejak Trend

Whitey Note: Selamat mencuba... Jangan lupa tinggalkan komen selepas mengambil tutorial ini ya...