Recent Post News Scrolling

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/AVvXsEhh89KIKTDINsyxQYWtVtz05LtLO_5CmI6WzQI-xVNA2OTmWWpPW-C75ICVb_b1IiOKYykI6wgD2Lol7Aq6qF-O8oho8KMCrH9L4q6-uB-l_wmG3v7NFxL_4F0bpcHPmOpyM71wpeI0Zq4//)}
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/AVvXsEhh89KIKTDINsyxQYWtVtz05LtLO_5CmI6WzQI-xVNA2OTmWWpPW-C75ICVb_b1IiOKYykI6wgD2Lol7Aq6qF-O8oho8KMCrH9L4q6-uB-l_wmG3v7NFxL_4F0bpcHPmOpyM71wpeI0Zq4//

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

7 komentar for "Recent Post News Scrolling"

1. Adib from kompinter

   24 Juni 2010 pukul 01.22

   

   manteb sob!! lama tak mampir!!hmm klo ini aq da ada di akhir postingan hehehe

2. ToPu

   24 Juni 2010 pukul 03.08

   

   Owww, jadi bisa otomatis nyecroll sendiri gituw ya...
   
   Bagus.., lanjutkan....
   
   Hehehehehe..........

3. ~Srex~

   25 Juni 2010 pukul 02.14

   

   scroll nya langsung ya mas.... ok dah, lumayan buat ngumpetin,,,hehe

4. Girant_31

   26 Juni 2010 pukul 23.14

   

   @2933762789074717110.0
   Thanks mas atas kunjungan nya..

5. Girant_31

   26 Juni 2010 pukul 23.16

   

   @186692673105477863.0
   Lanjutkan jg mas.. :D

6. Girant_31

   26 Juni 2010 pukul 23.18

   

   @3565504742053844425.0
   Iya mas lumayan.. :D

7. Girant_31

   26 Juni 2010 pukul 23.18

   

   @2188736903147595451.0
   Walah.. kalo keseringan mah pusing mas..

Leave a reply