Cara membuat Daftar Isi Scroll Bar

Daftar isi blog anda sudah terlalu banyak, anda malas melihatnya terlalu panjang ke bawah, sehingga seakan mengganngu penampilan blog anda. Jika Anda ingin mengakalinya sedemikian rupa agar tampak lebih simple tapi komplit, sebaiknya gunakanlah LAYER WITH SCROLLBAR. Prinsipnya, daftar isi blog dimasukkan ke dalam layer, kemudian layer kita atur lebar dan panjangnya, sehingga jika daftar isi melebihi panjang layer maka halaman secara otomatis di scroll dengan scrollbar.

Tag html layer adalah :

<ilayer clip="0,0,170,150" width="170" height="150">
<layer width="170" height="150"
bgcolor="lightyellow">
<div style="width:200px;height:250px;background-color:lightyellow;overflow:auto;display:block;font-family:trebuchet;font-size:11px;color:#000000;padding:5px">

[Disini anda masukkan script daftar isi anda]

</div>
</layer>
</ilayer>

Selengkapnya adalah :
.......Bagian Awal Yang Harus Anda Copy Paste.....

<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://anggavoith.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=hyoga"></script>

......Bagian Akhir yang harus anda copy paste....

Ganti tulisan yang berwarna merah dengan alamat blog anda di blooger.com, setelah itu 1. Login blog sobat
2. Rancangan >> Elemen halaman >> tambah Gadget (HTML/JavaScript)
3. lalu Copy Paste script diatas kemudian save/simpan…

Selamat mencoba…

Tweet