Catetan

SCROLL RECENT POST DI BLOG 14

Wuaah ngantuk... di kantor lagi badmood ama kerjaan iseng2 bikin tulisan mengenai scroll Recent Post, atau menurut gue daftar isi berjalan secara otomatis...


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.


<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.karsono.co.cc/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 :

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

Begitulah sehingga postingan ini berakhir, sumber dari postingan ini bisa dilihat di www.bloggertipandtrick.com, yang sudah tentu kodenya dirubah-rubah terlebih dahulu, agar tampilannya sesuai dengan keinginan.

14 comments:

Anonim

2 Jun 2010 15.08.00
Mantap bro... kalau scrollnya dibikin horizontal gimana caranya ya ?
Karsono

2 Jun 2010 15.24.00
Caranya cukup sederhana, tetapi untuk sementara kode ini hanya berlaku untuk browser firefox, tinggal ganti saja 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>


menjadi :

<style type="text/css">
ul { margin:0; padding:0; }
ul li { background:url(http://img375.imageshack.us/img375/2936/flower.png) no-repeat left; display: inline; margin-right:5px; padding-left:17px; }
ul li a{text-decoration:none;}
ul li a:hover {background:#66ff00; text-decoration:none; color: red;"}
</style>


Mungkin ada yang bisa membantu ?
Karsono

2 Jun 2010 15.35.00
Maaf kelupaan, selain perubahan kode diatas, direction marqueenya juga wajib dirubah, yaitu ke kiri atau left, jadi bentuk marqueenya akan menjadi seperti di bawah ini :


<marquee behavior="scroll" direction="left" scrollamount="5" onmouseover="this.stop()" onmouseout="this.start()">
siti_aryati

27 Jun 2010 15.14.00
terima kasih y...
thekrim

4 Jul 2010 18.15.00
Bang, saya baru belajar ngeblog, kalo buat random post berjalan gimana bang. Saya udah berhasil buat recent post berjalan dan hasilnya top deh,www.soft-krim.co.cc
Makasih buanget sebelumnya
Karsono

5 Jul 2010 16.31.00
kalau untuk random bisa lihat postingan disini
huda4smile

24 Agt 2010 23.49.00
makasih mas karsono,..hasilnya beres,..aku udah pakai,...bisa dilihat diblogku,..makasih
chiko

12 Okt 2010 14.48.00
makasii yaa.... :)
Mas Dhar

27 Okt 2010 09.06.00
Nice post, I like it. makasih banyak Om, dah kasi yang cuma-cuma...
Mas Dhar

27 Okt 2010 09.08.00
Untuk yang buat menu biar terlihat kayak website gak ada yang simpel ya, yang mudah gitu. Maklum, GAPTEK. Jadi masih bingung dan gak nyambung tenntang pemrograman......
Karsono

28 Okt 2010 09.53.00
coba lihat postingan aku di Generator CSS Menu disitu kita bisa langsung membuat menu atau mengeditnya, secara online, tanpa harus mengerti kode pemrograman, langsung tergenerate sendiri kodenya, cara menempatkan kodenya di blogger juga gampang, tinggal buka page element tambah Add Gadget - HTML/Script, dan pastekan kodenya kedalam kotak HTML/Script... kemudian posisikan Add Gadget-nya dibawah Header... simpan... beres
AQUA

14 Nov 2010 02.46.00
thanks bro. bermanfaat..
sarastiana

13 Mar 2011 09.10.00
Wah mas makin muter aja aku...tolong yang simple, dari awal...trimakasih
Trash_Asrul

24 Jun 2011 10.26.00
Ass.Alaikum...Nice tutorialnya sobat...manfaat n sdkt bertanya...Kenapa sih beberapa html/script yg diposting pr netter terkadang atau hampir semua susah terpasang di blog ya...atau ada perbedaan antar blog????...salam sukses sobat :)

Posting Komentar