Hasil seni dan reka bentuk adalah berbayar dan hakcipta Whitey Mommy.
Sila hubungi saya di whiteymommy@yahoo.com untuk sebarang pertanyaan dan tempahan.
Anda TIDAK DIBENARKAN SAMA SEKALI untuk mengambil/menyalin/menyimpan
mana-mana bahagian hasil seni dan reka bentuk yang telah saya hasilkan TANPA KEBENARAN!

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

8 Comment (s):

  1. berbaloi x widget ni kak..?rasa mcm nk buat..tp xpasti..

    ReplyDelete
  2. kak, nk tanya..sy dah try n menjadi tp sy nk buang bullet tu ar..caner erk?sebabnya sy dah ada code tuk icon tepi bloglist...

    ReplyDelete
  3. @LyNn'Azlina
    bullet tu memang akan kekal... hm... akk pun tak pernah buang... kalau nak buang kena pandai coding... huhu tapi kena try n error sebab dah lupa macam mana nak buat.

    ReplyDelete
  4. Salam sis....terima kasih tutorial ni..mintak halal yea... (^__^)

    ReplyDelete

Thank You For Leaving a Comment to Me...

 
Copyright © Whitey Mommy™