Blogger Tutorial 11. Membuat Daftar Isi

Ada Banyak cara untuk membuat daftar isi dari sebuah blog, tetapi terkadang ada beberapa cara yang mengganggu estetika sebuah blog (Tampilan menjadi semakin banyak) dan terkadang ada juga yang membuat performance dari sebuah blog menjadi semakin lambat.

Cara yang berikut akan saya jelaskan, menurut saya adalah metode yang sangat efektif dalam membuat daftar isi. Didalam daftar isi tersebut akan terlihat tanggal dari posting dan juga judul label. 
Dibawah ini adalah cara pemasangannya :
1. Buatlah Posting baru, terserah mau diberi judul apapun, yang saya sarankan buat judul "Daftar Isi"

2. Halaman Posting fungsikan dalam mode sebagai edit HTML
3. Kemudian copy kode dibawah ini ke halaman posting

<div id="bp_toc">Loading TOC. Please wait....</div>
<script src="http://blogergadgets.googlecode.com/svn/trunk/blogtoc.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

4. Setealh selesai langkah ketiga diatas, langsung terbitkan posting (Publish Post).

5. Kemudian lihat posting yang telah anda buat, sangat kacau bukan .. :)

6. Untuk merapikan daftar isi yang telah kamu buat ikuti langkah berikut

7. Masuk ke design>Template>edit html , cari kode dibawah ini

]]></b:skin>

8. Dan tepat diatas kode langkah nomer 7, masukkan kode dibawah ini :

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

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:70%;
}

9. Nanti tampilannya akan seperti ini :
    http://klikyuk.blogspot.com/2011/11/loading-toc.html#more


Selamat berkarya ..
Knowledge is an opensource