Sabtu, 18 Juli 2009

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 blog secara lengkap yang ditampilkan dalam bentuk tabel.
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 Rancangan.
    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. Pilih HTML/JavaScript.
    4. Copy kode dibawah ini kemudian paste pada kolom yang tersedia


      <div id="toclink"> <a href="javascript:showToc();"> <img border="0" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZ0qsIrPdQI/AAAAAAAACVI/m_NGy4DuSvc/add2.png"/><font color="#808000"><b> Lihat Semua Daftar Posting</b></font></a>
      </div>
      <script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/blogtoc.js"></script>
      <script src="http://namablog anda.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

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

Tidak ada komentar:

Poskan Komentar