Membuat daftar isi otomatis pada Posting

Jenis daftar isi kali ini sebenarnya sudah ada pada posting sebelumnya membuat daftar isi otomatis, Tapi setelah saya mencoba teryata untuk jenis yang pertama cukup membuat loading blog menjadi agak berat sehingga dengan sedikit modifikasi agar loading blog jadi ringan daftar isi diletakkan pada posting. ada juga cara agar loading blog kita jadi lebih ringan yaitu dengan mengatur widget yang kita tampilkan pada halaman utama dan pada sub halaman kamu bisa baca di mengatur widget untuk tampil di halaman utama dan sub halaman

Untuk kode script yang dipakai sama dengan jenis yang pertama.

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 New posting seperti biasanya.
  2. Klik pada New Posting - Edit HMTL
  3. Copy and paste kode dibawah ini
<div id="toclink">
<div style="text-align: center;">
<span style="font-size: large;"><b><a href="javascript:showToc();">LIHAT DAFTAR ISI</a></b></span></div>
</div>
<script 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&amp;max-results=999&amp;callback=loadtoc">
</script>

<div style="text-align: left;">
<div id="toc">
</div>

Tips :
  • Klik LIHAT DAFTAR ISI Untuk melihat seluruh posting
  • Klik Post Title.........., melihat posting sesuai urutan abjad A - Z atau Z - A
  • Klik Post Date........., melihat posting sesuai urutan Tanggal Lama - Baru atau Baru - Lama
  • Klik Post Label........, melihat posting secara Keseluruhan
  • Klik Post Jenis Label, melihat posting pada label tertentu

Keterangan :
  • Untuk keterangan warna merah bisa kamu hapus / kamu ganti dengan kata kata kamu sendiri
  • Ganti  kode >LIHAT DAFTAR ISI< dengan kata kata kamu sendiri.
  • Ganti  kode http://kibagus-homedesign.blogspot.com/feeds/posts/default dengan URL kamu sendiri.
  • Sebelum kamu simpan beri label pada posting dan atur tanggal posting 1 bulan yang lalu/lebih, tujuannya agar posting baru "daftar isi" ini tidak kelihatan pada halaman utama saat kamu simpan dan publish.
  • Simpan dan Publish.
Langkah ketiga
  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

<a href="http://kibagus-homedesign.blogspot.com/2009/12/all-posting.html" target="_blank">Daftar Isi</a>

( Ganti URL dengan Alamat posting daftar isi kamu sendiri )
Pasang Kode tersebut pada posisi yang tepat, akan lebih baik bila kamu pasang menjadi satu bagian dengan menu utama kamu, biar tampil keren seperti kamu lihat pada blog ini. ( sederhana tapi keren......! )

Simpan dan lihat hasilnya.
________________________________________
Selamat mencoba...!
Sukses selalu buat kamu semua....!
Labels: , ,