
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>
<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!
terus gimana caranya menampilan isi blog didaftar isi bos?saya masih newbie...trims banyak scriptnya,mohon dibalas.
ReplyDeleteCoba diikuti dulu langkahnya gan,
Deletebingungnya dmn?
woi, kok pas gue copy yg kluar daftar isi loe gan?
ReplyDeleteLink yang warna kuning diganti dulu dgn situs agan
Delete