Loading ... ... Please wait!

Sabtu, 13 Desember 2008

Daftar Isi Blogger Tanpa Direktori Eksternal

Ketika pertama kali membuat blog, saya berpikir bagaimana membuat daftar isi blog, karena setahu saya posting artikel pada blogger hanya mampu menampilkan maksimal 7 postingan dalam 1 halaman. Gadget bawaan blogger ada menyediakan fasilitas untuk menata postingan sesuai waktu (archives) dan kategori (label). Tapi belum ada fasilitas yang menampilkan judul postingan secara berurut pada layout halaman. Cari-cari di internet, akhirnya dapat tips dan trik membuat daftar isi, ternyata banyak blog yang mengulas tentang daftar isi. meskipun 80% diantaranya hanya copy paste saja. Salah satunya saya comot dan pasang diblog saya, berhasil. Scriptnya kira-kira seperti ini.
<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>

<script>
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100; </script>
<script src="http://tips-trik-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

Script ini saya ambil dari Blog http://tips-trik-blog.blogspot.com/

Setelah saya perhatikan ternyata ada script yang disimpan/diambil dari direktori eksternal (lihat : tulisan berwarna merah). Saya berpikir, kenapa script tersebut mesti disimpan pada direktori eksternal yang justru bisa menambah beban loading, jika direktori internal juga bisa. Oleh karena itu kode-kode scriptnya saya buka. Cara membukanya adalah : buka jendela baru ketikkan alamat berikut

http://www.geocities.com/uddin_81/recent-post.js

Anda akan mendapatkan kode script seperti ini
contoh 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>');

}

Kemudian pada bagian awal kode script tersebut saya tambahkan tag pembuka <script> dan bagian akhir saya tambahkan tag penutup </script> sehingga menjadi seperti ini.

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

..............
.............. (dst)

document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');

}

</script>

Kemudian ganti script yang diambil dari direktori eksterna tadi (tulisan yang berwarna merah) dengan script diatas, sehingga selengkapnya menjadi seperti ini

<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 = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100; </script>
<script src="http://tips-trik-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>


Ganti tulisan yang berwarna hijau dengan alamat blog anda.

Selanjutnya masuk ke Blogger.com, Klik Tata Letak (layout), Pilih Elemen Halaman, Klik Tambah Gatget, Klik Tambahkan Javascript/HTML

Kemudian Copy Paste script diatas (Tulisan berwarna biru), lalu Simpan Perubahan (save)

Jika anda ingin mengatur jumlah posting, sekelumit kata-kata dalam artikel, tgl posting, anda bisa mengatur sendiri dengan mengubah bagian ini

<script>
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100; </script>
<script src="http://tips-trik-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>


Keterangan
numposts : untuk menentukan jumlah postingan
showpostdate = true : untuk menampilkan waktu postingan, false: untuk menyembunyikan waktu postingan
showpostsummary = true : untuk menampilkan sekelumit tulisan; false : untuk menyembunyikan sekelumit tulisan
numchars : menentukan jumlah karakter pada showpostsummary



Related Posts by Categories



3 comments:

bahtiar@gmail.com mengatakan...
keren ... :)
Unknown mengatakan...
terima kasih banyak, bagus sekali
Aga mengatakan...
uda aku coba di blog'ku.. tapi kok yang muncul cuma 25 postingan aja. padahal "var numposts" uda aku isi 100, jml postingan blog'ku ada 147.
toong bantuannya..

http://gambuses.blogspot.com

Posting Komentar

 
 
 
 
 
 


CLOSE
MAIN MENU
REFRESH