Mungkin sobat blogger pernah membuat daftar isi untuk blog pada sidebar ataupun pada postingan, karena daftar isi blog ini sangat berperan penting, jadi pengunjung tinggal cari saja artikel yang mau dibaca lewat daftar isi blog tersebut.

Tapi eh tetapi apakah anda sadar jika postingan blog anda semakin hari semakin banyak dan pastinya daftar isi blog tersebut akan memanjang kebawah dan memenuhi layar, nah saya ada tuh solusinya buat sobat blogger yang pernah mengalami nasib sama seperti saya. "nasib apa ya" he....

Solusinya adalah memebuat daftar isi blog anda menjadi Scroll Bar. cara kerjanya gini ketika anda selesai memposting artikel maka otomatis daftar isi ini akan mengindex hasil postingan anda yang berbentuk potongan atau cuplikan artikel yang nantinya akan menarik untuk dilihat.

Oke, kita langsung saja tanpa basah-basahan, maksudnya basa-basi. Nih sourch code javascriptnya:

<------Awal Script----------M. Fadli Prayogi------->

<script>
function hyoga(json) {
document.write('<ilayer clip="0,0,170,150" width="170" height="150">');
document.write('<layer width="170" height="150" bgcolor="lightyellow">');


document.write('<div style="width:200px;height:250px;background-color:lightyellow;overflow:auto;display:block;font-family:trebuchet;font-size:11px;color:#000000;padding:5px">');

for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {


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 - 1; 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('<font color="#006400"><b>');
document.write(posttitle);
document.write('</b></font>');


if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

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

}



}
document.write('</div>');
document.write('</layer>');
document.write('</ilayer>');

}
</script>

<script>

var showpostdate = true;

var showpostsummary = true;

var numchars = 150;

</script>

<script src="http://fadlizhoners.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=hyoga"></script>

<------Akhir Script----------M. Fadli Prayogi------->

Tulisan yang berwarnah merah silahkan ganti dengan nama blog anda sendiri. Oh ya saya bahas sedikit tentang sourch codenya, lihat script dibawah ini:

<script>
function hyoga(json) {
document.write('<ilayer clip="0,0,170,150" width="170" height="150">');
document.write('<layer width="170" height="150" bgcolor="lightyellow">');

Keterangan:
1. Warna biru ganti dengan ukuran yang anda mau
2. Warna pink merupakan beground

Setelah itu anda tinggal memasukkan script diatas pada blog anda, Tata Letak > Tambah Gadget > Javascript/HTML >
Copy Paste script diatas kemudian save/simpan.

Cukup Mudah bukan!