Catetan

SCROLL RECENT POST DI BLOG 15

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.

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

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
kurdirk

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

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 :)
andreas

26 Jul 2018, 14.51.00
manteb dan sangat bermanfaat sekali bang, terimakasih sudah share ilmunya bang,..
solder infrared

Posting Komentar