Satu lagi informasi tentang trik Blogspot nih, informasi yang saya dapatkan kali ini adalah cara membuat Daftar Isi dalam Blogspot, atau biasa disebut dengan TOC (Table Of Contents). Namanya juga daftar isi, tentu berfungsi sama seperti daftar isi dalam buku, hanya saja kali ini daftarnya berisi artikel-artikel atau tulisan yang sudah dimuat dalam blog. Dengan adanya daftar isi ini harapannya tentu akan semakin memudahkan pembaca dalam mencari tulisan apa yang ingin dibaca atau diketahui lebih lanjut.

Lebih lanjut tentang pembuatan daftar isi dalam Blogspot, silakan membaca langkah-langkah berikut.

Pertama yang kita lakukan adalah membuat posting baru dan beri judul dengan Daftar Isi Blog atau Table Of Contents atau judul lainnya. Pastikan juga kita menset tanggal pemuatannya mundur (sebagai contoh, saya muat posting tentang Tabel Of Contents ini pada tanggal 1 Januari 2009), untuk isi tulisan dikosongkan saja. Setelah kita upload, kita buka postingan tersebut dan tulis alamat url postingannya.

Langkah berikutnya kita melakukan editing pada kode HTML blog (menu Layout >> Edit HTML). Sebelum kita lakukan editing, BACKUP!! dulu template kita untuk mengantisipasi jika terjadi kesalahan, maka kita masih bisa merestorenya kembali (cara backup dengan mengklik Download Full Template dan simpan filenya). Setelah kita backup, kita mulai melakukan editing, di sini kita nantinya akan melakukan editing pada 3 tempat, yang pertama silakan cari script berikut.

</head>

Kemudian replace (ganti) script tersebut dengan script di bawah ini.

<b:if cond='data:blog.url == &quot;http://softdbase.blogspot.com/2009/01/table-of-contents.html&quot;'>
<style>

#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:100%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ddd;
color: #000000;
padding-left: 5px;
width:50%px;
}
.toc-header-col2 {
width:15%;
}
.toc-header-col3 {
width:25%px;
}
.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:93%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:93%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:93%;
}
.post{display:none;}
.comments-block{display:none;}
.comment-form{display:none;}
.comment-footer{display:none;}
.blog-pager{display:none;}
.date-header{display:none;}
.feed-links{display:none;}
.comments{display:none;}
</style>
</b:if>
</head>

Silakan ganti alamat url Table Of Contents pada script di atas dengan url Table Of Contents blog kita yang telah disimpan tadi.

Berikutnya kita cari script lainnya (bagian kedua), yaitu script seperti di bawah ini.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Tepat dibawah script tersebut, silakan tambahkan script berikut ini.

<b:widget id='HTML345' locked='false' title='Table Of Contents' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://softdbase.blogspot.com/2009/01/table-of-contents.html&quot;'>
<h2 class='title'>Blog Table Of Contents</h2>
<div class='widget-content'>
<div id='toc'><img src='http://i38.tinypic.com/34ov7n4.gif'/>Loading The Blog TOC...</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Jangan lupa untuk mengganti url Table Of Contents-nya dengan url Table Of Contents blog kita sendiri.

Terakhir (bagian ketiga) silakan cari kembali script seperti di bawah ini.

</body>

Tepat di atas script tersebut masukkan script berikut ini.

<b:if cond='data:blog.url == &quot;http://softdbase.blogspot.com/2009/01/table-of-contents.html&quot;'>
&lt;script style=&quot;text/javascript&quot; src=&quot;http://blogger-plugins.googlecode.com/files/blogtoc.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://softdbase.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://softdbase.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=501&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://softdbase.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1001&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;showToc();&lt;/script&gt;
</b:if>

Sekali lagi silakan ganti url Table Of Contents-nya, selain itu ganti juga url blog (feed) sesuai dengan url blog kita (blok merah). Jika sudah silakan simpan Template-nya.

Jika proses editing HTML berhasil, maka pada posting tentang Table Of Contents akan berisi list judul tulisan termasuk kategori (Label) yang telah dimuat diurutkan berdasarkan abjad pada tanggal tertentu.

Penting: saat saya mencoba trik ini, saya mengalami beberapa permasalahan, dengan tampilan, karena memang blog yang saya gunakan untuk uji coba ini telah mengalami banyak modifikasi HTML di dalamnya seperti Artikel Terkait, Read More, Recent Articles, dan tambahan Widget Blogspot lainnya, dan template yang saya gunakan juga bukan template standar dari Blogger. Jadi jika temen-temen mengalami permasalahan yang sama, silakan cek kembali pada HTML-nya berkaitan dengan modifikasi lain yang telah kita lakukan sebelumnya.

Demikian temen-temen informasi kali ini tentang Table Of Contents pada Blogspot, selamat mencoba, dan semoga bermanfaat.

1. Membuat Daftar Judul Arsip Tulisan dalam Blogspot
2. Membuat “Read more …” pada Blogspot
3. Membuat Shortcut Back to Top pada Blogspot
4. Membuat Navigasi Page Number Blogspot
5. Membuat Scrollbox pada Blogspot