Tutorial : recent post bergerak (marquee)

Sunday, 22 March 2015

Assalamualaikum
hari tu ada yang bertanya macam mana buat yang widget FRESH ENTRY FOR NOW yang ada kat sidebar aku tu. sorry lambat buat tutorial.

recent post nie bagus supaya post korang yang baru2 boleh viewer tengok walaupun dorang bukak post/entry korang yang lama2. :D so here the tutorial.

tutorial recent post

1. bukak Dashboard > Layout > Add a Widget > HTML


2. pastu COPY and PASTE coding kat bawah :

<center> please scroll down this box because the entry are moving endlessly woooo~
</center>


<br />

<div style="font: 12px,arial; height: 200px; overflow: scroll; width: 280px;">




<marquee behavior="scroll" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<script>
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script>

<script>
var numposts = 15;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

<script src="http://budaksukavanilla.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script></marquee></div>

3. nota pelangi wee~ :
merah :  boleh tukar ikut ayat korang. taknak letak pun takpe. :3
oren : tukar saiz scrollbox ikut kesesuaian saiz widget korang.
biru : jumlah post
ungu : tukar ke url blog korang

4. save la. siap. :)

dah buat? jadi tak? hehe. harap bermanfaat.
sekian,
ilal liqa'



13 comments

drop a comment~
arigatouuu!