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'



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

  1. Replies
    1. cuba lagi. coding ada tukar sikit. :D sorry eh.

      Delete
  2. saya suka style camni *thumbs up*
    syukran for the tutorial :3

    ReplyDelete
  3. Bolehlah guna kalau tiba-tiba rasa nak letak. Thanks for sharing BV

    ReplyDelete
  4. hahaha..kita belajar dlm bidang yang sama, stress gile belajar coding nie :)

    ReplyDelete

drop a comment~
arigatouuu!

newer older Home