Cara membuat daftar isi blog

Daftar isi blog merupakan bagian terpenting dalam blog. dengan adanya daftar isi blog, pengunjung blog dapat mencari tulisan atau artikel dalam blog dengan mudah sehingga mereka tidak harus membuang buang waktu untuk menelusuri semua tulisan hanya untuk mencari satu artikel yang dicari.

Kali ini, Aan akan menjelaskan bagaimana cara membuat daftar isi blog. Daftar isi ini merupakan karya pemilik blog beautifulbeta.blogspot.com yang sudah dimodifikasi oleh rekan blogger pemilik blogbuster.com.Kemudian, Aan rubah sedikit saja sehingga daftar isi ini menjadi berbahasa Indonesia, karna aku orang indonesia, Aku cinta indonesia.

Tidak usah membuang banyak waktu, sekarang kita mulai cara membuat daftar isi ini. tapi sebelum saya mulai, baiknya rekan-rekan melihat hasil jadi dari tutorial ini. Untuk melihat contoh dari daftar isi yang akan di terangkan, silahkan klik disini atau klik tab menu Daftar isi di bagian atas blog ini.

CARA MEMBUAT DAFTAR ISI:

• Dari dashbord blog anda klik menu "Tata letak" dari blog yang akan di pasang daftar isi


• Pilih tab "Edit html" untuk masuk ke halaman template blog


• Copy kode di bawah ini lalu pastekan tepat di atas kode ]]></b:skin>. Anda bisa merubahnya bila anda cukup familiar dengan CSS.
  
  

  /*------DAFTAR ISI TOC-----*/
  #toc {
    border: 0px solid #000000;
    background: #ffffff;
    padding: 5px;
    width:500px;
    margin:10px 0 20px 0;
  }
  .toc-header-col1, .toc-header-col2, .toc-header-col3 {
    background: #e0e0e0;
    color: #5d5d54;
    padding: 8px 5px 8px 5px;
    width: 300px;
  }
  .toc-header-col1 {
    width:300px;
  }
  .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:90%;
    color: #404040;
    text-decoration:none;
  }
  .toc-header-col1 a:hover, .toc-header-col2 a:hover,
   .toc-header-col3 a:hover {
    font-size:90%;
    text-decoration:underline;
  }
  
  .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    padding-left: 5px;
    font-size:90%;
  }
  
  .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
    text-decoration: none;
  }
  /*------END DAFTAR ISI TOC ---*/

  
  
  simpan perubahan template.


• Selanjutnya, klik tab menu "posting"


• Di dalam halaman posting, pilih yang "Edit html". Copy kode berikut ini lalu pastekan dalam kotak postingan blog
  
  
  <center><div id="toclink"><p>Di halaman ini anda dapat menemukan semua artikel dari web ini</p> <p>Untuk melihat semua daftar isi, silahkan klik link dibawah ini.</p> <p><a href="javascript:showToc();"><b>BUKA DAFTAR ISI</b></a></p>
  
  
  
  </div> <script style="" src="http://lukman.oke.googlepages.com/TOC.js"></script> <script src="http://nama_blog_anda.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=999&amp;callback=loadtoc"></script><div id="toc"></div></center>
  
  yang di beri warna merah silahkan sesuaikan dengan alamat blog anda.


• Klik "Terbitkan Entri"


• Selesai.

Selanjutnya, tugas anda adalah membuat link untuk menuju ke halaman daftar isi tersebut,entah link tersebut akan di letakkan di sidebar, atau bagian atas blog, itu adalah piliha anda sendiri. Posisi yang bagus untuk menaruh link daftar isi ini adalah di bagian tab menu blog (apabila blog anda menggunakan tab menu) seperti yang saya gunakan di dalam blog ini.

Cara membuat link masih bingung juga?.Begini, tulis kode html seperti berikut dan sesuaikan URL dengan alamat postinga daftar isi yang telah dibuat:

<a href="http://www.URL_daftar_isi_bloganda">DAFTAR ISI</a>


SELAMAT MENCOBA