Table of Contents atau daftar isi bagi sebuah blog mempunyai fungsi yang sangat penting. Sama seperti daftar isi dalam buku, berfungsi memudahkan pembaca dalam mencari bab ataupun artikel tertentu. Tanpa itu, pembaca akan kesulitan untuk mencari artikel yang diinginkan. Dalam wordpress, membuat TOC/Daftar Isi/Archives sangat mudah. Download Plugin, misalnya Clean Archives Reloaded lalu instal, jadi deh. Terus kalau di Blogger bagaimana? Tenang kawan, berikut adalah tutorial membuat Table of Contents.

Sebelum kita membuat Table of Content, mari kita lihat demonya :

Perhatian : Sebelum melakukan modifikasi template, selalu lakukan backup template terlebih dahulu agar kalau terjadi error template bisa dikembalikan dalam keadaan semula.

Oke kita mulai step by step tutorial membuat TOC dalam blogger.

1. Buat sebuah artikel kosong ( Blank Post) dengan nama “Table of Content” atau nama yang lain.

2. Sebelum dipublish, mundurkan tanggal posting (setahun kebelakang misalnya). Tujuannya agar posting TOC tidak berada dihalaman depan. Pastikan juga comment dimatikan.

3. Publish artikel, kemudian catat URL posting, misalnya : http://mytechlifes.blogspot.com/2009/01/table-of-contents.html

4. Buka Layout-Edit HTML, temukan kode </head>, masukkan kode berikut diatas </head>

<b:if cond=’data:blog.url == &quot;http://mytechlifes.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>

5. Edit template lagi, temukan baris kode berikut:

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

Letakkan kode berikut setelah baris kode diatas.

<b:widget id=’HTML345′ locked=’false’ title=’Table Of Contents’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.url == &quot;http://mytechlifes.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>

6. Temukan kode </body>, lalu tempatkan kode berikut diatas </body>

<b:if cond=’data:blog.url == &quot;http://mytechlifes.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://mytechlifes.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://mytechlifes.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://mytechlifes.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>

Penting : Ganti URL Posting warna biru diatas dengan URL posting TOC yang sudah anda buat.

Sekarang lihat halaman Table of Contents yang sudah dibuat, berhasil bukan ?

sumber :  Bloggerpluggins.org

-------------
Artikel Lainnya:

1. Tips Blogger : Membuat halaman dalam Blogger

10 Responses to “Tips Blogger : Membuat Table of Contents dalam Blogger”