Cara membuat recent post marquee

Kali ini saya akan membahas tentang tutorial membuat related post scroll.Sebelumnya saya sudah membahas recent post jquery.Yang satu ini berbeda dengan jquery,yaitu perbedaannya yang jquery itu recent postnya berjalan dengan animasi yang bagus dalam durasi yang ditentukan.Kalau yang ini,merupakan recent post yang berjalan dari bawah ke atas.Langsung saja kita menuju langkah-langkahnya:

1.Login ke akun blogger anda masing-masing
2.Tuju ke -> Rancangan-->Tambah Gadget-->HTML/Javascript
3.Letakkan kode script berikut kedalam konten html tersebut

<style type="text/css">
ul { list-style-image: url(http://img375.imageshack.us/img375/2936/flower.png) }
ul a{text-decoration:none;}
ul a:hover {background:#66FF00; text-decoration:none; color: red;"}
</style>

<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://justforfun-adrianrivald.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script></marquee>

4.Ada beberapa hal yang perlu diubah dalam script diatas
  • Pada kode scrollamount="2" merupakan kode yang mengatur kecepatan scroll
  •  Kode selanjutnya adalah var numposts = 15;
    yaitu merupakan jumlah  posting yang akan ditampilkan
  • Dan terakhir ganti http://justforfun-adrianrivald.blogspot.com/feeds/posts/default, kode tersebut harus diganti sesuai dengan alamat url feed anda
Share this article :

Posting Komentar

Silahkan beri komentar anda setelah membaca artikel diatasTerima kasih untuk tidak berkomentar yang berunsur SPAM.

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Just for Fun | Trick blogger | Dunia Internet - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger