Share of Mine

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

Categories: ,

Leave a Reply