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