Kamis, 02 Juni 2011

Home » » Membuat daftar isi otomatis dengan bantuan scroll

Membuat daftar isi otomatis dengan bantuan scroll

Maleeeeemmm Prend, mo’ bagi-bagi tips neh tentang membuat sebuah Daftar Isi yang pake scroll. Kalau mau lihat silahkan klik scroll disebelah kanan yang tulisannya Buka Aja.
Trus kegunaannyabuat apa scroll dan bagaimana fungsinya, untuk fungsinya saya rasa teman-teman sudah tahu keuntungan menggunakan scroll sangat bermanfaat sekali, selain bisa menghemat ruang pada blog kita scroll juga bisa membuat tampilan blog kita seperti profesional.. nah... lalu bagaimana cara membuatnya ???
Okelah... saatnya tuk berbagi dan kali ini saya usahakan segampang mungkin tanpa mengganggu body template kita pake alias html/javascript, tapi hanya menambahkan beberapa script pada gadget saja.
1.Script daftar Isi otomatis seperti ini

<div style="border: 1px solid rgb(51, 255, 51); overflow: auto; height: 220px;" margin="1px" ;>
<script style="text/javascript" src="http://www.srbekasi.org/daftar-isi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://iananakbone.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>

2.Script spoiler seperti ini

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">PASANG SCRIPT DAFTAR OTOMATIS  DISINI</div></div></div>

3.gabungkan script daftar Isi otomatis dengan script spoiler,contohnya seperti ini :

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Buka Aja" style="margin: 0px; padding: 0px; width: 70px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Close&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Buka Aja&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><div style="border: 1px solid rgb(51, 255, 51); overflow: auto; height: 220px;" margin="1px" ;>
<script style="text/javascript" src="http://www.pondokpengetahuan.blogspot.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://pondokpengetahuan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div></div></div></div>

Keterangan :

Tulisan yang dicetak warna ungu diganti dengan alamat blog sobat , border1px adalah ketebalan dari list dinding gadget,tulisan open serta close bisa kalian ganti seperti Buka Aja /TUTUP atau apa saja ,selebihnya tinggal paste saja soalnya script diatas auto mengikuti body template kita semua . ok prend... ??? Happy blogging yah !

0 komentar:

Posting Komentar

Arsip Populer

 
Diberdayakan oleh Blogger.

Translate

mau pinter

membuat blog atau website? klik saja di sini

© Copyright 2011. All Right Reserved by Pondok Pengetahuan | Designed by Free Blogger Templates | Premium Wordpress Themes | Coupons Code | Free Icons