Membuat Daftar Isi Blog Pada Halaman Artikel (Bag. IV)

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 hasilThe 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.

Menempatkan Daftar Isi Pada Sidebar Blog

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.