Cara Membuat Daftar Isi Otomatis Revo 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,  meskipun ada postingan mengenai Daftar isi Revo yang lebih baru, 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. KlikPage Element
2. KlikAdd Gadget

  3. Klik plus button (+) for HTML/JavaScript. (img)

   4. 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://imdad.googlecode.com/files/blogtoc.js"></script>

<script src="http://imdad-gresik.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://imdad-gresik.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://imdad.googlecode.com/files/blogtoc.js></script>

<script src="http://imdad-gresik.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>

___________________________________________
Bersambung ke Daftar Isi Otomatis Revo 2

Ok.. mudah kan..!
Selamat mencoba..!

Ditunggu komentarnya sOb !! 'N Semoga bermanfaat....!!

Cara Membuat Daftar Isi Otomatis Revo 1 9 out of 10 based on 10 ratings. 9 user reviews.