Membuat Daftar Isi Otomatis versi 1

Salah satu bagian yang cukup penting dalam sebuah artikel adalah daftar isi, karena dengan itu pembaca bisa melihat isi dari artikel secara global tanpa harus membaca ( sudah tentu hanya judul saja ).

Pada website juga seperti itu, dengan adanya daftar isi atau minimal label posting, kita bisa membuat pengunjung / pembaca untuk tertarik berlama - lama.

Nah pada kesempatan ini kita coba membuat daftar isi yang otomatis, karena kita tidak perlu mengedit ulang wigdget yang ada. ( kalau dengan cara biasa yaitu membuat widget link akan sangat menyita waktu, apalagi bila posting kita sudah cukup banyak. Teknik ini di perkenalkan oleh hans yang di muat melalui blognya beautiful beta dan blognya kang rahman yang sudah dimodifikasi dan sekarang aku coba untuk melakukan sedikit modifikasi agar tampil lebih menarik.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin>
  • Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.
  • Tekan Control F atau F3 untuk mencarinya.

#toc { border: 0px solid #8A4B08; background: transparent; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #8A4B08; color: transparent; 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:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background: transparent;}
Keterangan : 
  • Warna hijau menunjukan kode warna yang bisa kamu ganti sesuai dengan warna blog kamu.


Simpan Template.


Langkah Kedua
  1. Klik Page Element
  2. Klik Add Gadget
  3.   AddGadget
  4. Klik plus button (+) for HTML/JavaScript. (img)

    HTML
  5. Copy and paste kode dibawah ini
<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>
<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/blogtoc.js"></script>
<script src="http://kibagus-homedesign.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

<br />

<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; background: transparent url(#) no-repeat scroll 0 0 ; border: 1px solid rgb(204, 204, 204); height: 150px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: center; width: auto;">

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

</div>

Keterangan :
  • Pasang widget tersebut diatas posting, karena daftar isi ini membutuhkan tempat yang cukup lebar, kalau kamu ingin di pasang pada tempat lain dengan lebar minim tidak menjadi masalah karena pada script ini telah aku tambah script fungsi scroll ( warna kuning ) agar bisa fleksible dengan konsekuensi scroll akan muncul karena lebar template tidak cukup.
  • Ganti  kode >LIHAT DAFTAR ISI< dengan kata kata kamu sendiri.
  • Ganti  kode http://kibagus-homedesign.blogspot.com/feeds/posts/default dengan URL kamu sendiri.
  • Kamu juga bisa merubah widget diatas menjadi 2 widget dengan tempat yang berbeda, kode pertama adalah LINK LIHAT DAFTAR ISI.
<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>
<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/blogtoc.js"></script>
<script src="http://kibagus-homedesign.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
  • Kode kedua adalah Isi dari daftar isi yang akan muncul pada saat kamu klik pada link "LIHAT DAFTAR ISI"


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


___________________________________________
Ok.. mudah kan..!
Selamat mencoba..!                                                   CONTOH PENGGUNAAN..!

Semoga bermanfaat....!!

Labels: , ,