Topics :
Home » » Cara Memasang Recent Post Scroll pada Blog

Cara Memasang Recent Post Scroll pada Blog

Ungkit - Bagaimana Cara Memasang Recent Post Scroll pada Blog di Blogspot kita.Pernah lihat Recent Post pada sebuah Blog ada yang memakai Scroll...penasaran ingin mencoba...???

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.

Ini Scriptnya :

<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.NAMABLOG.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 :

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...

Kemudian untuk kode scrollamount="2" merupakan kode yang mengatur kecepatan scroll, jadi bisa diganti berapa saja sesuai selera.

Kode selanjutnya adalah var numposts = 15;

Ini berfungsi untuk menampilkan berapa postingan yang akan kita tampilan di dalam kotak Recent Post Scroll.

Dan yang terpenting pada akhir adalah kode http://www.NAMABLOG.blogspot.com/feeds/posts/default,  kode tersebut harus diganti sesuai dengan alamat url feed masing-masing.

Selamat mencoba dan Semoga bermanfaat.... Biasakan Like and Share :))


0 komentar :

Posting Komentar