Cara Membuat Daftar Isi di dalam Spoiler (Script)

Bingung mau buat artikel tentang apa. hmmmmmmm.. Ok, topik yang saya pilih kali ini adalah bagaimana cara membuat daftar isi di dalam spoiler??
Menurut saya daftar isi itu sangat penting. Mengapa? Karena jika tidak ada daftar isi, maka pembaca/pengunjung di blog anda akan bingung dan tersesat ke dalam lembah kegelapan antah berantah, haha. Seperti pada gambar disamping, daftar isi ibarat penunjuk arah (kompas), jika tidak tau arah maka kita pun tersesat.

Langsung aja kita masuk ke topik, tidak usah panjang lebar lagi. Ikuti saja langkah dibawah ini dengan baik dan benar, tidak boleh mencontek ya! hehe

1. Login akun blogger anda, dasbor > rancangan > elemen laman. lihat gambar:

2. Klik tambar gadget seperti pada gambar.

3. Pilih HTML/JavaScript, lihat gambar:

4. Judulnya dikosongkan, kontennya diisi dengan script di bawa ini:
<div>
    <div style="margin: 5px;">
    <div class="smallfont" style="margin-bottom: 2px;">
    <i><span style="font-weight: bold;"></span></i><input 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Daftar Isi'; }" style="color:#fff; font-size: 22px; margin: 0px; padding: 0px; width: 510px;" type="button" value="Daftar Isi" /></div>
    <div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
    <div style="display: none;">

<div style="border: 2px dashed rgb(255, 255, 255);
overflow: auto;
width: 490px;
height: 300px;
text-align: left; padding: 5px;">

<script src="http://sektim-project.googlecode.com/files/daftar-isi-ala-sektim.js">

</script><script src="http://sektim-area.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
    </script></div></div></div></div></div>

5. Tulisan yang berwarna kuning boleh anda ganti sesuai kemauan anda. Angka yang berwarna kuning adalah panjang dan lebar, sedangkan tulisan yang berwarna kuning adalah judul spoiler.

6. Setelah selesai klik Preview, jika sudah mantap baru Save template. Anda bisa meletakkan daftar isi di bagian sidebar atau dimanapun anda mau. Selamat mencoba!

4 comments

Anonymous admin

terus gimana caranya menampilan isi blog didaftar isi bos?saya masih newbie...trims banyak scriptnya,mohon dibalas.

Reply

Coba diikuti dulu langkahnya gan,
bingungnya dmn?

Reply
Anonymous admin

woi, kok pas gue copy yg kluar daftar isi loe gan?

Reply

Link yang warna kuning diganti dulu dgn situs agan

Reply

Post a Comment