Membuat Tabel Daftar Isi

Table of Content atau dalam bahasa kita kurang lebih Tabel Daftar Isi ini sangat membantu para pengunjung untuk menelusuri artikel demi artikel dalam blog kita. Pengunjung dengan mudah akan menemukan artikel yang dimaksud, setiap pengunjung mengarahkan mouse pada salah satu judul artikel pada tabel daftar isi maka dengan segera beberapa kalimat akan muncul sebagai sebuah gambaran sepintas tentang sebuah artikel pada blog yang dikunjunginya.

Selain judul blog terurut dengan rapih sesuai abjad, juga daftar isi ini dapat diurutkan sesuai tanggal dan atau sesuai kategori dalam blog yang bersangkutan. Yang menarik dari Tabel Daftar Isi ini adalah bisa ditampilkan jika pengunjung meng-klik link "Tampilkan Daftar Isi" dan di sembunyikan jika pengunjung meng-klik link 'Sembunyikan Daftar Isi". Sangat bermanfaat sekali bagi pengunjung dalam melakukan pencarian artikel dalam sebuah blog. Ternyata hal ini sangatlah mudah diimplementasikan (diterapkan) pada blog dengan dasar Blog*Spot, bagi pengguna non-blogspot hal ini belum pernah dicoba. Jika mau mencoba menerapkannya silahkan ikuti langkah demi langkah dibawah ini.

Screenshot diambil dari blog Program Gratisan

Langkah 1
Login ke Blogger
Langkah 2
Pada dasbor pilih "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini :

]]></b:skin>

Langkah 4
Copy Paste kode CSS dibawah ini tepat diatas kode pada Langkah 4 :

#toc {
border: 0px solid #cccccc;
background: #b8d2fc;
padding: 5px;
width:515px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffff99;
color: #000000;
padding-left: 5px;
width:300px;
}
.toc-header-col2 {
width:75px;
}.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size: 11px;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size: 11px;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size: 11px;
}

Langkah 5
Simpanlah template
Langkah 6
Pilih "Tata Letak - Elemen Halaman"
Langkah 6
Pilih "Tambah Gadget - HTML/JavaScript"
Langkah 7
Masukan kode dibawah ini pada kotak "Konten" dan ubah nama blog sesuai alamat blog anda (warna biru) :

<div id="toclink"><a href="javascript:showTocundefined);">Tampilkan Daftar Isi</a><br/><br/></div>
<script style="text/javascript" src="http://dedehendriono.googlepages.com/blogtoc.js"></script>
<script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<div id="toc"></div>

Langkah 8
Klik tombol "SIMPAN"
Langkah 9
Preview dan lihatlah hasilnya, klik link "Tampilkan Daftar Isi" dan atau link "Sembunyikan Daftar Isi".

Keterangan :

• Kode asli Table of Content sudah dilakukan perubahan kedalam bahasa Indonesia. Awalnya hanya ada link "Tampilkan Daftar Isi" tapi sekarang sudah bisa ditambahkan link "Sembunyikan Daftar Isi".
• Perhatikan langkah 4 pada kode CSS, angka yang diberi warna biru disesuai dengan lebar blog anda. Perhatikan secara berurutan 515px = Lebar secara keseluruhan Tabel, 300px = lebar kolom JUDUL, 75px lebar kolom TANGGAL, 125px lebar kolom KATEGORI
• Perhatikan kode pada langkah 6 (warna) ubahlah alamat blog sesuai alamat blog kita. Jika ingin menampilkan blog lain dalam daftar isi blog kita, arahkan alamat blog pada kode tersebut ke alamat blog yang dimaksud (tapi jadi aneh blog kita dengan daftar isi blog lain, hehehe...).

Semoga berhasil...Happy blogging :)