Membuat daftar isi otomatis dengan bantuan spoiler

Share

Membuat daftar isi otomatis dengan bantuan spoiler
Sebelumnya kita harus mengenal dulu daftar isi di blog itu seperti apa, kalau mau lihat silahkan klik spoiler disebelah kiri yang tulisannya daftar isi.
Trus mengenal juga apa itu spoiler dan bagaimana fungsinya, untuk fungsinya saya rasa agan2 sudah tahu keuntungan menggunakan spoiler sangat bermanfaat sekali. selain bisa menghemat ruang pada blog kita spoiler 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 alias edit html,tapi hanya menambahkan beberapa script pada gadget saja.

1.Script daftar 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 otomatis dengan script spoiler,contohnya 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;"><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://seribudunia.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 putih diganti dengan alamat blog sobat , border1px adalah ketebalan dari list dinding gadget,tulisan open serta close bisa gan agah ganti seperti BUKA /TUTUP atau apa saja ,selebihnya tinggal paste saja soalnya script diatas auto mengikuti body template gan agan semua . ok sob... ??? Happy blogging yah !! 

Sumber : IAB