MENAMPILKAN DAFTAR ISI LENGKAP DENGAN TABEL

Membuat daftar isi dari sebuah blog sudah banyak
ditulis di berbagai blog tutorial. Hanya saja, sebagian dari cara yang
dikemukakan tidak menampilkan seluruh daftar isi yang ada pada blog.

Tips kali ini juga merupakan cara membuat daftar isi blo secar lengkap yang
ditampilkan dalam bentuk tabel. Kelebihan dari daftar isi ini dapat ditampilkan
dan juga dapat disembunyikan, anda tinggal klik kata untuk menampilkan atau
menyembunyikan daftar isi.

Post ini diperoleh dari sumbernya aslinya yaitu :

BEAUTIFUL BETA

Ikuti langkah-langkah dibawah ini bagi anda yang ingin mencoba.

• Langkah Pertama
  
  
  
  
  1. Masuk ke Blogger dengan ID anda.
  2. Pilih Tata Letak.
  3. pilih Edit HTML.
  4. Back up dulu templatnya jika takut gagal.
  5. Cari kode ini : ]]></b:skin>
  6. Copy kode dibawah ini, kemudian paste tepat diatas kode tadi.
     
     
     
     
     
     #toc { border: 0px solid #000000; background: #ffffff;
padding:2px; width:495px; margin-top:10px;}



.toc-header-col1, .toc-header-col2,



.toc-header-col3 { background: #B5CBFA; color: #000000;
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:#f0f0f0;}


     
     
     
     
     
     
  7. Klik Tombol Simpan Template
  
  
  
  
  
  
  
  
• Langkah Kedua
  1. Masuk ke Elemen Halaman.
  2. Pilih Tambah Gadget.
  3. Klik tanda + pada HTML/JavaScript.
  4. Copy kode dibawah ini kemudian paste pada kolom yang tersedia
     
     
     
     
     
     <div id="toclink"> <a href="javascript:showToc();"> <img
border="0" src="http://h1.ripway.com/ades40/image/add2.png"/><font
color="#808000"><b> Lihat Semua Daftar Posting</b></font></a>

</div>

<script style="text/javascript" src="http://h1.ripway.com/ades40/blogtoc.js"></script>

<script src="http://namablog
anda.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
     
     
     
     
     
     
  5. KLik tombol Simpan
  
  
  
  
• Langkah Ketiga
  
  
  1. Masih di Elemen Halaman.
  2. Klik Tambah Gadget.
  3. Klik tanda + pada HTML /JavaScript.
  4. Copy kode dibawah ini, kemudian paste pada kolom yang tersedia.
     
     
     
     
     
     <div id="toc"></div>
  5. Klik tombol Simpan
  
  
  
  
• Selesai.
• Selamat mencoba, semoga bermanfaat.

Anda dapat mengubah penampilan warna. Silahkan anda ganti kode-kode
warna yang terdapat pada kode-kode diatas.

Silahkan dibaca juga kelanjutannya dibawah ini