Seperti pada tiga tulisan sebelumnya, kali inipun masih membicarakan mengenai daftar isi (table of content) yang di tempatkan pada halaman artikel. Pada postingan Bagian IV ini saya akan mengenalkan daftar isi hasil The Blog Doctor, yang instruksi-instruksi cara pembuatannya saya ubah karena jika membaca aslinya agak susah dipahami (belagu ya? hehehe...)

Dari hasil uji coba, ternyata daftar isi bikinan Blog Doctor ini selain dapat ditempatkan pada sidebar blog (aslinya ditempatkan pada sidebar), juga bisa kita tempatkan pada halaman artikel blog kita. Kelebihan lainnya adalah dapat menampilkan judul-judul artikel secara slide (berikut rangkumannya) yang ditempatkan di atas daftar isi. Sayangnya, untuk membuat daftar isi lumayan agak ribet, hehehe... Tapi don wori, gak susah kok!

Jika kamu tertarik untuk membuat daftar isi ini ikuti langkah-langkah berikut:

• Dari halaman dasbor, pilih Pengaturan - Feed Situs.
• Pada bagian Izinkan Feed Blog pilih singkat lalu save.
• Kopikan kode berikut (gunakan Control C) dan ganti tulisan berwarna merah sesuai dengan kode API, nama blog, dan judul blog kamu:

  <div id="feed-control">
  <span style="margin:10px;padding:4px;">Loading...</span>
  </div>
  <script src="http://www.google.com/jsapi?key=Kode API"
  type="text/javascript"></script>
  <script src="http://enes-sc.googlecode.com/files/dynamicfeedcontrol.js"
  type="text/javascript"></script>
  <style type="text/css">
  @import url("http://enes-sc.googlecode.com/files/dynamicfeedcontrol.css");
  </style>
  <script type="text/javascript">
  function LoadDynamicFeedControl() {
  var feeds = [
  {title: 'Daftar Isi',
  url: 'http://NamaBlog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'
  }];
  var options = {
  stacked : true,
  horizontal : false,
  title : "Judul Blog"
  }
  new GFdynamicFeedControl(feeds, 'feed-control', options);
  }
  // Load the feeds API and set the onload callback.
  google.load('feeds', '1');
  google.setOnLoadCallback(LoadDynamicFeedControl);
  </script>
  <div style="float:right; font-size:87%;">Widget by <a href="http://ruangsc.blogspot.com/2010/02/membuat-daftar-isi-blog-pada-halaman_05.html" target="_blank" title="Caranya ada di sini!">SC Community</a></div>
  

  Untuk mendapatkan Kode API, silahkan Login di sini lalu masukkan URL Blog kamu.

Jika kamu ingin menempatkan daftar isi ini pada sidebar blog kamu, sebaiknya pilih sidebar yang agak lebar. Berikut langkah-langkahnya:

• Dari halaman dasbor pilih Tata Letak - Elemen Halaman.
• Klik Tambah Gadget dan pilih HTML/JavaScript.
• Masukkan (copy-paste) script daftar isi di atas.
• Jika kamu ingin menambahkan scroll supaya tidak terlalu panjang, tambahkan perintah berikut:

  <div style="overflow:auto; margin:auto; padding:3px; width:auto; height:200px;">Script Daftar Isi</div>
  

  Sesuaikan ukuran tingginya jika kamu inginkan.
• Setelah selesai, simpan hasilnya dan ucapkan Alhamdulillah...

Contoh gambar daftar isi yang di tempatkan pada sidebar blog:
Jika kamu ingin menempatkan daftar isi ini pada halaman artikel blog kamu, langkah-langkahnya sebagai berikut:

• Dari halaman dasbor pilih Entri Baru - Edit HTML.
• Berilah judul, misalnya: Daftar Isi.
• Klik pada Opsi Entri dan setting supaya dipublikasikan mundur (ke tanggal pertama kali kamu posting).
• Masukkan (copy-paste) script daftar isi di atas.
• Setelah di-paste, klik Terbitkan Entri dan ucapkan Alhamdulillah...

Seperti pada pembuatan daftar isi bagian I dan II, jika kamu memilih menempatkan daftar isi ini pada halaman artikel maka harus membuatkan link untuknya yang bisa kamu tempatkan di navbar menu atau di sidebar.

Contoh gambar daftar isi yang di tempatkan pada halaman artikel:

Ok coy, segitu aja informasi mengenai daftar isi-nya. Meskipun masih ada tipe lain dari daftar isi ini yang belum bisa saya posting dalam waktu dekat, tapi sekedar pengetahuan mengenai daftar isi, saya rasa dengan 5 (lima) jenis daftar isi yang sudah saya paparkan dalam 4 (empat) tulisan bisa dianggap cukup dan memadai untuk dijadikan pilihan bagi blog kamu.
Selamat mencoba aja deh.....