Membuat Daftar Isi Manual

Beberapa waktu lalu saya memberi artikel tentang membuat daftar isi yang praktis dan otomatis. Tapi untuk kali ini, kita akan belajar bagaimana membuat daftar isi secara manual. Sebenarnya tidak susah juga, hampir sama mudahnya dengan yang otomatis. Hanya saja setiap selesai menulis posting yang baru kita juga harus meng-update sendiri untuk daftar isi yang baru itu pula.

Keunggulan menggunakan daftar isi manual adalah loading untuk membuka blog tidak terganggu karena setahu saya yang awalnya menggunakan daftar isi otomatis juga, bila posting sudah terlalu banyak maka loading untuk buka blog menjadi lebih lama (lebih berat). Kasihan pengunjung blog yang susah berkunjung atau bosan karena lamanya proses menampilkan blog. Lagi pula maximal jumlah posting dari daftar isi otomatis 100 artikel lebih dari itu, kita harus mengganti lagi jumlah maksimalnya.

Bila memang masih ingin menggunakan yang praktis tidak masalah juga sebenarnya. Kalau begitu jadikan saja postingan ini pembelajaran baru. Tidak ada salahnya kan kita menambah ilmu baru...

Saya akan menampilkan kodenya sesuai dengan posting saya yang ada di blog ini sedangkan bila ingin digunakan pada blog teman-teman, perhatikan mana yang harus diganti/dirubah ya...

Kode dibawah ini untuk membuat tabel overflow, jadi copy saja kode ini terlebih dahulu...

<div style="overflow:auto; padding:5px; width:300px; height:110px; background-color: #fff); border:1px solid #000000;"><style>.list
{
border-bottom:1px dotted $mainTextColor;
line-height:1.2em;
padding:3px;
}
</style>
<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:"90%"; height:"70%"; background-color: $mainTextColor; border:1px solid $mainTextColor;">

Paste donk kode diatas yang di copy tadi di widget HTML-nya karena kita akan lanjutkan menampilkan daftar isinya.

Contoh ini adalah posting yang ada di blog ini, seperti ini formatnya :

<div class="list">
<a href="http://ini-blogsaya.blogspot.com/2010/02/menggunakan-blogger-emoticon.html">Menggunakan Blogger Emoticon</a></div>

<div class="list">
<a href="http://ini-blogsaya.blogspot.com/2010/02/menampilkan-kode-html-dalam-posting.html">Menampilkan Kode HTML dalam Posting</a></div>

<div class="list">
<a href="http://ini-blogsaya.blogspot.com/2010/02/menambah-sidebar-baru.html">Menambah Sidebar Baru</a></div>
</div></div>

Tulisan yang berwarna biru yang harus dirubah sesuai url dan judul postingnya. Ingat untuk selalu menambahkan kode <div class="list"> dan akhiri dengan </div></div>.