Recent Post Scroll pada Blog

Recent Post Scroll pada Blog

Wuaah ngantuk... di kantor lagi badmood ama kerjaan iseng2 bikin tulisan mengenai scroll Recent Post, atau menurut gue daftar isi berjalan secara otomatis...
Untuk sistem Scroll Recent Post disini adalah dengan menggunakan sistem marquee dari Judul Post.
Caranya cukup sederhana tinggal copy paste kode dibawah ini ke kotak Add Widget HTML/Scrip di blog, dan lakukan beberapa perubahan untuk penyesuaiannya sesuai dengan keinginan Anda.

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

Nach selanjutnya untuk mengetahui apa saja sich yang harus dilakukan perubahan terhadap perubahan diatas, patut diingat perubahan ini tidak mengikat.. he..he..,
Pada umumnya ada empat kode yang harus dirubah, yaitu :

1. kode css dibawah ini :
   
   <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>
   
   kode ini diperlukan hanya untuk menambahkan background sebagai pengganti nomor atau icon list, dan kode css bisa diganti dengan alamat gambar yang diinginkan, bahkan bisa diedit untuk mempercantik tampilan scroll recent post atau dihilangkan saja, gimana hasilnya? coba saja.
2. Kemudian untuk kode scrollamount="2" merupakan kode yang mengatur kecepatan scroll, jadi bisa diganti berapa saja sesuai selera.
3. Kode selanjutnya adalah var numposts = 15;
   yang berarti berapa posting yang akan ditampilkan, jadi ganti saja atau biarkan juga ga dilarang koq
4. Dan terakhir dan yang terpenting adalah kode http://www.yohandos.blogspot.com/feeds/posts/default, kode tersebut harus diganti sesuai dengan alamat url feed masing-masing.

Begitulah sehingga postingan ini berakhir, sumber dari postingan ini bisa dilihat di www.bloggertipandtrick.com, yang sudah tentu kodenya dirubah-rubah terlebih dahulu, agar tampilannya sesuai dengan keinginan.