Blog TOC Widget

Blog TOC Widget

Bila anda memperhatikan lebih cermat, maka di bagian atas posting ini terdapat menu "Show table of content" kemudian akan muncul tabel tabel pada kolom header. Yup..itu dinamakan TOC atau table of content. TOC ini menampilkan berbagai macam post title pada kolom header.

Berikut langkah langkah nya untuk membuat TOC pada blogger baru :

Langkah 1 : Back up template kamu, ini menjaga jaga, jika template kita kacau saat memasukkan code code TOC.
Langkah 2 : Tambahkan sebuah HTML pada edit HTML.
Lakukan peng edit an HTML pada <b:section> yang memiliki id=main

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

bila saya cermati, code ini akan menambahkan sebuah halaman utama baru diatas halaman post pada page element, atau dibawah header.

Kemudian simpan template tersebut dan sekarang berpindah ke sisi page element. Sekarang buka halaman baru yang saya sebutkan barusan (diatas halaman post page element) >> klik add a page element dan ke HTML/javascript kemudian tambahkan html berikut :

<div id="toc"></div>

Simpan template barusan.

Langkah 3 : Tambahkan HTML elemen lagi pada sidebar yang kanan >> klik add a page element dan ke HTML/javascript kemudian tambahkan html berikut :

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://namaakunanda.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Silahkan ganti url "namaakunanda" dengan url anda.

Langkah 4 : Sekarang kita beralih ke edit HTML, tambahkan custom style pada bagian id dan class :

#toc : the div-wrapper that contains the TOC
.toc-header-col1 : header of column 1
.toc-header-col2 : header of column 2
.toc-header-col3 : header of column 3
.toc-entry-col1 : cell in column 1
.toc-entry-col2 : cell in column 2
.toc-entry-col3 : cell in column 3


Sumber inspirasi :
http://beautifulbeta.blogspot.com/2007/04/blogtoc-widget-released.html

Spesial thanks to :
http://www.jonipoetra.info atas rujukan situs diatas sebagai tambahan pernak pernik blog.