Cari Artikel Blog Ini

Total Tayangan Laman

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.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
9 Comments

9 komentar :

Bagor Gamplong mengatakan...

THANK BOS..INI BR BENER2 TUTORIAL YANG KOMPLETTT

A. Jauhari mengatakan...

MEMANG HEBAT BUKAN MAIN Mr.EPG. Tutorial ini memang Sangat bermanfaat. tinggal kita pelajari 1 per satu. pas berhasil alangkah senengnya. tapi, ketika eror lemes dah. mulai lagi dari awal. semangat aja trus ah... Bener2 mantab nih tutorial.

Ades mengatakan...

@A. Jauhari : ah si Bapak adaaa aja, katanya lemes klo error, jangan gitu dong pak..semangat terus...

Ki YUSWA mengatakan...

pake scrip yang diatas ini ga berhasil kang, tak coba pake yang efek marquee,berhasil.tapi linknya kok ga new tab ya.

Ades mengatakan...

@Ki YUSWA : file js diatas ( disimpan di ripway.com) telah diblokir, jadi ga berfungsi.
Maaf belum sempat diperbaiki/terlupakan...

Ades mengatakan...

Post ini telah dierbaiki dan bagi anda yang ingin menerapkan pada blog, silakan dicoba...

irawan mengatakan...

kalo melibatkan html yg njelimet pasti gagal,,duh biyung tolongin dunk.....

Atika Cb mengatakan...

weeeh keren2 amir...wes tak cobain...ada yang berhasil ada yang hancur....:D

Irawan mengatakan...

bener2 sip,,meski ga mudeng aku

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!