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.

MENAMPILKAN DAFTAR ISI ALPHABETIK DENGAN MARQUEE

Daftar isi dari sebuah blog dapat ditampilkan dalam berbagai cara. Salah satunya, dengan menampilkan daftar isi secara alphabetik yaitu penampilan daftar isi berdasarkan huruf awal / pertama dari judul postingan. Selain itu tutorial ini juga menampilkan jumlah komentar dari setiap postingan.
Agar dapat menghemat tempat, daftar isi ini ditambah fasilitas marquee dengan efek gerak dari kanan kekiri secara berterusan.

Langkah-langkah menerapkan pada blog.

• Masuk ke Blogger.
• Pilih Rancangan bagian Elemen Halaman.
• Klik tambah gadget pada tempat yang ingin anda tambahkan trik ini. Bisa diatas post, diatas/dibawah header, atau pada sidebar. Silahkan nada pilih.
• Pilih HTML/JavaScript.
• Copy script dibawah ini dan paste pada kolom yang tersedia.
  
  
  
  <center> <div style="text-shadow:4px 4px 4px #adadad; font-size: 14px; color: white;"><b>Daftar Isi :</b></div> <div style="border: 2px solid white; background: blue; padding:2px; width:95%; font-size: 17px; color:white;"> <b><!-- Alphabetical/chronological Post Title Listing with comment count Start --> <script type="text/javascript"> function getYpipeTL(feed) { document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="7">'); var i; for (i = 1; i < feed.count ; i++) { var href = "'" + feed.value.items[i].link + "'"; var pTitle = feed.value.items[i].title + "</a> | "; var pComment = " \(" + feed.value.items[i].commentcount + " comments\)"; var pList = "</a>" + "<a href="+ href + '">' + pTitle; document.write(pList); document.write(pComment); document.write('</a></li>'); } document.write('</marquee>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run? YourBlogUrl=http://epg-studio.blogspot.com &Order=alphabet &_id=401e43055731c1a29f1e1d3eb5e8e13f &_callback=getYpipeTL &_render=json" type="text/javascript"></script><span style=" float:left;"><p><a href="http://epg-studio.blogspot.com">Tutorial Blogger</a></p></span> <!-- Alphabetical Post Title Listing End --></b></div><center/></center></center>
• Cara Pengeditan :
  
  • text-shadow:4px 4px 4px yellow; = ukuran dan warna bayang dari judul.
  • font-size: 14px; color: white; = ukuran dan warna huruf judul.
  • Daftar Isi = judul.
  • background: blue; =latar dari tampilan
  • width:95%; = lebar tampilan (sengaja ditampilkan dalam % agar cocok pada setiap tempat).
  • font-size: 17px; color:white; = ukuran dan warna huruf judul post yang tampil
  • scrollamount="7"> = kecepatan gerak, makin besar makin cepat gerakannya.
  • YourBlogUrl=http://epg-studio.blogspot.com = ganti dengan URL blog anda
  • <a href="http://epg-studio.blogspot.com">Tutorial Blogger< = ganti dengan URL dan Titel Blog anda
• Klik tombol Simpan setelah selesai pengeditan tampilan.
• Selamat mencoba, semoga bermanfaat.

MEMBUAT DAFTAR ISI LENGKAP DENGAN FILE JS

Membuat daftar isi blog secara manual pada bagian sidebar blog sangat melelahkan, apalagi jika postingan artikel jumlahnya sudah ratusan. Untuk mengatasi masalah tersebut, anda dapat membuatnya dengan sangat mudah yaitu dengan menggunakan file Java Script ( js ). Trik membuat daftar isi kali ini selain menampilkan judul seluruh postingan artikel juga judul postingan tersebut terpisah berdasarkan label dari postingan tersebut.
Satu lagi...postingan yang baru dipublikasikan, secara otomatis ditambah kata New!! berwarna merah yang letaknya disebelah kanan judul postingan.
Pokoknya trik yang satu ini akan memuaskan anda jika ditampilkan pada blog anda dan tentunya akan lebih memudahkan pengunjung mendapatkan artikel yang dicarinya tanpa harus bersusah payah.
Langkah-langkahnya :

1. Masuk ke Blogger.
2. Pilih Rancangan bagian Elemen Halaman.
3. Klik tambah gadget.
4. Pilih HTML/JavaScript.
5. Copy script dibawah ini dan paste pada kolom yang tersedia.
   
   
   <script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/daf.isi.js"></script>
<script src="http://epg-studio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
   
   
   Ganti http://epg-studio.blogspot.com dengan URL blog anda
6. Klik tombol Simpan.
7. jika daftar isi terlalu panjang, tambahkan fungsi scroll, sehingga kodenya seperti ini :
   
   
   
   <div style="overflow:auto;width:300px;
height:200px;padding:10px;
border:1px solid #eee">
<script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/daf.isi.js"></script>
<script src="http://epg-studio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
   </div>
8. Anda atur ukuran width dan height sesuai keperluan.

CARA MEMBUAT DAFTAR ISI OTOMATIS

Sekarang kita akan mempelajari tentang DAFTAR ISI LENGKAP dan OTOMATIS.

(1) Pertama kita harus masuk ke Blogger.com
(2) Untuk ke ENTRI = Pilih POSTING >> ENTRI BARU >> Edit HTML dan untuk SIDEBAR = RENCANGAN >> TATA LETAK >> TAMBAH GADGET

(3) Copy kode di bawah ini

TIDAK PAKE SCROLL

<div dir="ltr" style="text-align: left;" trbidi="on">

<script src="https://sites.google.com/site/epgstudiosite/javascript/daf.isi.js">

</script>

<script src="http://pkt-studio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

PAKAI  SCROLL

<div style="overflow:auto;width:500px;height:600px;border:0px solid #eee;padding:8px;margin:10px 0 0"><script src="http://muhammadwali2011.googlecode.com/files/scrip%20daftar%20isi%20ali%20bloggers.js"></script><script src="http://pkt-studio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

(4) PASTE

KETERANGAN : ganti kode yang ber warna KUNING dengan alamat blog anda..

Semoga bermanfaat..

DAFTAR ISI LENGKAP