:: Cocoretan Orang Sunda

Di postingan  yang keseratus ini, saya akan berbagi tutorial yang lumayan masih fresh dan menarik yaitu cara membuat Recent Post Dengan Gaya Scrolling. Berbeda dengan Recent Post yang telah dibuat terdahulu yaitu Recent Post dengan gaya Slide Show dan Recent Post di sertai Gambar. klik disini untuk melihat contoh.


One Step

1. Login ke akun Blog anda
2. Pilih Rancangan
3. Pilih Elemen Laman
4. Pilih Tambah Gadget 
5. Pilih HTML/Javasript

Masukan Scipt di bawah 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(http://i1232.photobucket.com/albums/ff362/AndriiJrs/rss-1.png)}
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.andriicreative.co.cc/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script></marquee>



Keterangan: Warna Merah di Scipt
- http://i1232.photobucket.com/albums/ff362/AndriiJrs/rss-1.png  Ganti gengan URL Gambar anda.
- 2  Kecepatan Scolling
- 500  Jumlah post yang akan di tampilkan
- http://www.andriicreative.co.cc  Ganti dengan alamat URL Blog anda.