Recent Post Scrolling

Sebelumnya saya sudah membahas masalah recent post atau releated secara berulang kali dengan berbagai cara dan berbagai hasil dari berbagai sumber pula seperti:

• Membuat Related Post 1
• Membuat Related Post 2
• Membuat Related Post 3
• Membuat Related Post 4
• Membuat Related Post 5
• Membuat Related Post 6
• Membuat Related Post cantik

hiiii....banyak banget and ga ada kerjaan banget!!! Justru agar anda menjadi lebih bersemangat untuk mempercantik blog anda.

Mari kita bahas untuk recent post scrolling atau bergerak ini, Caranya:

1. Sign in ke dashboard anda

2. Go to Layout » Add a gadget » html/javascript

3. Copy paste kode berikut ini

<style type="text/css">
ul { cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); background:; list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvzNPVDyB-lT_l0PjmnueD1OrhxOwPo3WgJ7FGsaOmQoPgFPfas52FTXrsOrzdTP4dBuJuyYCCQa8UzBbpgIAyl5Kz5VmbncJOZesiqCUx-JlgOd-qrmVf_XpbhTHGPhL1E4zRVK9cVSU/)}
ul a{text-decoration:none;}
ul a:hover {background:;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 = 500;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

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

Selanjutnya untuk mengetahui apa saja yang harus dirubahan pada kode diatas agar sesuai dengan keinginan kita, pada umumnya ada empat kode yang harus dirubah, yaitu

kode css dibawah ini :

1. <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.eppoh.blogspot.com/feeds/posts/default, kode tersebut harus diganti sesuai dengan alamat url feed masing-masing.

Demikian. semoga Blogger Indonesia makin banyak dan makin hebat

sumber: Karsono