Menyambung postingan terdahulu tentang Recent Post News Ticker,
Kali ini masih sama tentang recent post atau lebih pas nya mengenai widget daftar isi.

Recent Post News Scrolling adalah sama halnya dengan recent post pada umumnya.
hanya saja ada penambahan sedikit kode/script yg membuat recent post ini automatic scrolling,
dan auto stop on mouse over.


Untuk membuat seperti itu, langsung saja CoPas kode/script dibawah ini,
dan masukan ke halaman add gadget HTML/Java Script.

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

Ganti http://agoezimoetz.blogspot.com dengan URL Blog sobat.

Lalu tambahkan kode/script dibawah ini tepat sebelum kode diatas.

<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/AVvXsEhONY5RW6vBlG6ZLWT2tDPwjPMWnWFsFeQbI7UACEcBJwZhyDKf97EWk9PzbL69_6euX5RK6epFeiiBRTQtDA-U4Ff0mQRpUnJq4LmGNN8WukICpFN1q0zltW5621M7mwtU5Y02b6LKRYY/)}
ul a{text-decoration:none;}
ul a:hover {background:;text-decoration:none; color: red;"}
</style>

Sobat bisa ganti gambar sebagai pengganti nomor atau icon list dengan gambar sesuka sobat,
caranya, cari kode dibawah ini pada kode diatas.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONY5RW6vBlG6ZLWT2tDPwjPMWnWFsFeQbI7UACEcBJwZhyDKf97EWk9PzbL69_6euX5RK6epFeiiBRTQtDA-U4Ff0mQRpUnJq4LmGNN8WukICpFN1q0zltW5621M7mwtU5Y02b6LKRYY/

Lalu ganti dengan URL gambar yg sobat punya.
Save, dan lihat hasilnya.