MEMBUAT DAFTAR ISI DI BLOG SECARA MANUAL DAN OTOMATIS

Untuk membuat daftar isi di blog ada dua cara, yaitu secara manual dan otomatis, untuk setiap pilihan cara sudah pasti ada keuntungan dan kerugian, untuk cara manual mungkin lebih ribet, dikarenakan harus selalu update link post, setiap ada penambahan post baru, sedangkan untuk cara otomatis memang tidak terlalu ribet, tetapi hal tersebut bisa berpengaruh terhadap crawl web kita, tetapi menurut google gak ngaruh si, crawl tersebut cuman informasi aja sebelum membuat daftar isi alangkah lebih baik jika kita melakukan back up terhadap file kita
1. Membuat Daftar Isi secara Manual

Pembuatan Daftar Isi secara Manual sistemnya hampir sama dengan cara pembuatan Scroll Box, yang ditambahkan link dari postingan didalamnya, yang pertama harus dilakukan adalah membuat kode CSS-nya

#daftar-isi-manual{ background:#C0C0C0; overflow: scroll; height:150px; font:10pt/15pt Arial, serif; color: blue }

sedikit penjelasan untuk kode diatas, tinggi scroll box adalah 150px, dengan ukuran font adalah Arial 10 dan berwarna biru, langkah selanjutnya adalah masuk ke blogger --> Edit HTML, lalu copy kode css diatas tepat diatasnya kode ]]></b:skin>, lalu simpan, dan masuk ke Page Element, dan klik Add Gadget, pilih HTML/Script, dan masukkan kode dibawah ini

<div id="daftar-isi-manual">
<ol>
<li><a href="http://www.karsono.co.cc/2009/03/copy-data-dari-multiple-file.html">Macro Excel : Copy Data dari multiple file</a></li>
<li><a href="http://www.karsono.co.cc/2009/03/angka-menjadi-bilangan.html">Macro Excel : Angka menjadi bilangan</a></li>
<li><a href="http://www.karsono.co.cc/2009/03/macro-excel-command-button-true-or.html">Macro Excel : Satu tombol 2 fungsi</a></li>
<li><a href="http://www.karsono.co.cc/2009/01/domain-gratis-di-cocc.html">Domain Gratis CO.CC</a></li>
<li><a href="http://www.karsono.co.cc/2009/02/set-up-cocc-dengan-host-gratis.html">Host Gratis</a></li>
<li><a href="http://www.karsono.co.cc/2009/03/kisah-kehamilan-isteriku.html">Kisah Kehamilan Isteriku</a></li>
<li><a href="http://www.karsono.co.cc/2009/01/kabar-gembira.html">Kabar Kembira</a></li>
<li><a href="http://www.karsono.co.cc/2008/11/history-personal-data.html">History Personal Data</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/menggabungkan-teks-dengan-tanggal.html">Rumus Excel: Menggabungkan Tanggal dengan Teks</a></li>
<li><a href="http://www.karsono.co.cc/2008/12/kabar-gembira.html">Pernikahanku</a></li>
<li><a href="http://www.karsono.co.cc/2009/02/menghilangkan-navbar-blogger.html">Menghilangkan Navbar Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/03/mengganti-icon-blogger.html">Mengganti Icon Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/text-area-biasanya-difungsikan-untuk.html">Membuat Text Area</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/menulis-kode-html-di-postingan.html">Menulis Kode HTML di postingan Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/lookup-dengan-mengambil-data-di-sebelah.html">Lookup untuk mengabil data di sebelah kiri</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/membuat-scroll-box.html">Membuat Scroll Box</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/kode-html-warna-di-blog.html">Kode Warna HTML</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/teks-berjalan-atau-biasa-di-sebut.html">Teks Berjalan atau Marquee</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/border-biasa-digunakan-untuk-menandai.html">Membuat border di Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/membuat-read-more-di-blogger.html">Membuat Read More di Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/05/mempercepat-loading-page.html">Mempercepat Loading Page</a></li>
<li><a href="http://www.karsono.co.cc/2009/05/membuat-menu.html">Membuat Menu di blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/05/menghilangkan-icon-edit.html">Menghilangkan Icon Edit di Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/06/table-html.html">Table HTML</a></li>
<li><a href="http://www.karsono.co.cc/2009/06/udah-lama-ga-nengok-facebook.html">Jam Berdetak setiap Detik di Excel</a></li>
<li><a href="http://www.karsono.co.cc/2009/06/postingan-ini-aku-buat-berdasarkan.html">Melampiran File Excel, Word, Powerpoint, di Blog</a></li>
<li><a href="http://www.karsono.co.cc/2009/07/membuat-iklan-di-tengah-postingan-blog.html">Membuat Iklan di tengah post blog</a></li>
<li><a href="http://www.karsono.co.cc/2009/07/menyembunyikan-navbar-blogger.html">Menyembunyikan Navbar Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/08/free-animasi-template-blog-sun-of-day.html">Free Animasi Blog Template</a></li>
</ol>
</div>

gantilah link yang berwarna merah sesuai dengan link anda, sedangkan yang berwarana biru merupakan kalimat yang akan muncul sebagai link dan apabila ada penambahan postingan baru, berarti anda harus selalu melakukan update penambahan link baru pada kode diatas... hmm repot ya... hasil dari kode diatas adalah seperti dibawah ini

1. Macro Excel : Copy Data dari multiple file
2. Macro Excel : Angka menjadi bilangan
3. Macro Excel : Satu tombol 2 fungsi
4. Domain Gratis CO.CC
5. Host Gratis
6. Kisah Kehamilan Isteriku
7. Kabar Kembira
8. History Personal Data
9. Rumus Excel: Menggabungkan Tanggal dengan Teks
10. Pernikahanku
11. Menghilangkan Navbar Blogger
12. Mengganti Icon Blogger
13. Membuat Text Area
14. Menulis Kode HTML di postingan Blogger
15. Lookup untuk mengabil data di sebelah kiri
16. Membuat Scroll Box
17. Kode Warna HTML
18. Teks Berjalan atau Marquee
19. Membuat border di Blogger
20. Membuat Read More di Blogger
21. Mempercepat Loading Page
22. Membuat Menu di blogger
23. Menghilangkan Icon Edit di Blogger
24. Table HTML
25. Jam Berdetak setiap Detik di Excel
26. Melampiran File Excel, Word, Powerpoint, di Blog
27. Membuat Iklan di tengah post blog
28. Menyembunyikan Navbar Blogger
29. Free Animasi Blog Template

Selanjutnya masuk ke cara pembuatan daftar isi secara otomatis

2. Membuat Daftar Isi secara Otomatis
Untuk membuat daftar isi secara otomatis, masuk ke Edit HTML, dan jangan lupa centang Expand Widget Template, Seperti halnya pembuatan daftar isi blog secara manual, buatlah kode css seperti dibawah,dan letakkan di atas kode ]]></b:skin>,

#daftar-isi-otomatis{ border:2px outset blue; padding:5px 0 5px; background:#EAE9E9 }

Langkah selanjutnya cari kode di bawah ini

<b:include data='post' name='post'/>

Untuk di template minima kode diatas ada dua, carilah kode yang pertama, bila sudah ketemu, ganti kode di atas dengan kode di bawah ini

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div id='daftar-isi-otomatis'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

lalu simpan, kemudian Masuk ke Page Element, dan klik Add Gadget, posisinya terserah mau di bagian menu atau di sidebar, contohnya bisa dilihat pada menu daftar isi blog ini

<a href="http://Alamatbloganda.blogspot.com/search?max-results=100">Daftar isi</a>

pilih HTML/Script, dan masukkan kode diatas kedalamnya, tetapi sebelumnya ganti dulu alamat link-nya sesuai dengan alamat blog anda
Simpan... dan lihat hasilnya.