Membuat Daftar isi dengan gampang pada blog

Pada blog tertentu atau bahkan semua blog kadang perlu daftar isi. Ini akan memudahkan pengunjung melihat seluruh judul postingan anda, lihat contoh di atas.

Cara ini pertama kali diperkenalkan oleh Hans pada blognya Beautifulbeta, kemudian oleh Kang Rohman. Sesungguhnya ada tiga langkah mudah untuk membuat ini dan hasilnya anda bisa lihat sendiri. Saya rasa loadingnya tidak berat walau menggunakan third party java script.

OK, kita mulai.

Langkah Pertama, buat widget di sebelah atas post body.

Caranya, login ke blogger, layout, lalu Edit HTML. pastikan anda download dan simpan template anda yang ada buat jaga jaga kalau anda bikin kesalahan, anda masih punya cadangan template yang sama.
Lalu cari kode seperti di bawah ini;

<b:section class='main' id='main' showaddelement='no'>

Atau setidaknya yang ada kode;
<b:section class='main' id='main'>.

Ganti kode itu dengan kode di bawah ini

<b:section class='main' id='main' showaddelement='yes' maxwidgets:'2'>

Save template.

Langkah Kedua, masukkan kode untuk daftar isi

Masih dalam tab layout, klik page elements. Akan terlihat ada widget baru di atas post body. Pada widget yang baru itu, klik add gadget, lalu pilih HTML/Java Script kemudian copy seluruh kode dibawah ini dan paste di dalam widget itu. Lalu save.

<style type="text/css">
#toc {
 border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
  width:475px;
  margin-top:10px;
  border-bottom: 1px solid #717171;
}

.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:90%;
}

</style>

<div id="toclink"><a href="javascript:showToc();">Show Table of Content</a><br/><br/></div>

<script src="http://wiraarta.fileave.com/tableofcontent.js" type="text/javascript"></script>

<script src="http://NAMA BLOG ANDA.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<div id="toc"></div>

Langkah ketiga, modifikasi kode

1. Perhatikan kode di atas yang diberi warna Coklat (475px), anda mesti mengganti nilainya agar lebarnya sesuai dengan lebar kolom post bodi anda,


2. Kode yang berwarna hijau (Show Table of Content). Ganti dengan bahasa yang anda gunakan, misalnya, Lihat daftar isi jika anda hendak memakai Bahasa Indonesia.


3. Kode yang bewarna biru pada kode di atas (tableofcontent) adalah java script yang menggunakan Bahasa Inggris, jika anda mau menggunakan Bahasa Indonesia, ganti kode itu dengan daftarisi


4. Kode yang berwarna merah, (NAMA BLOG ANDA). Gantilah dengan nama blog anda, misalnya pada blog ini, saya ganti dengan wirelect.

Lalu klik save, dan anda sudah mempunyai daftar isi blog...

SELAMAT MENCOBA...

Ditulis oleh Wira