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://infomediss.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 buka webside http://www.blogger.com, isi account anda, buka Tata Letak > Tambah Gadget > Javascript/HTML >
Copy Paste script diatas kemudian save/simpan

Related Posts by Categories

daftar isi

• Daftar Isi Slide in Top Bar
• Daftar Isi Auto Scroll
• Daftar Isi Slide in Page
• Daftar Isi Blogger Debug/error javascript