Tutorial blog daftar isi dalam postingan

 Tutorial table of content

Membuat daftar isi dalam postingan sangat banyak mamfaatnya untuk blog kita  hal ini dapat membantu  memudahkan robot penelusuran google  menemukan  dan menelusuri artikel artikel dalam blog kita,dan perlu di ketahui bahwa tutorial ini di tujukan buat para blogger pemula ,untuk para master yang kebetulan mampir di blog ini tolong bantu  koreksi ya gan, jika ada yang kurang benar mohon di luruskan ,kritik dan saran akan saya terima dengan senang hati...tutorial ini khusus buat pengguna blogger/blogspot ya teman teman sekalian ,karena buat wordpress dan lainnya menggunakan script yang berbeda. 

Baca juga Membuat blog untuk adsense

Cara membuat daftar isi otomatis dalam postingan 

jangan lupa sebelum melakukan langkah langkah berikutnya lakukan backup terlebih dahulu karena kita disini akan melakukan otak atik template maka sangat disarankan untuk mem backup template terlebih dahulu untuk menjaga jaga jika ada kesalahan.karena biasanya para blogger pemula jika ada kesalahan sedikit saja akan kebingungan lalu terpaksa ganti templatebaru lagi,jika di backup terlebih dahulu kan enak jika terjadi kesalahan tinggal di kembalikan seperti semula lagi gitu.....oke sebagai contoh saya akan tampilkan hasil dari tampilan daftar isi dalam postingan yang pernah saya pasang di blog ini  sebagai berikut ini

 

untuk membuat daftar isi dalam postingan seperti contoh di atas  kita mulai dengan login terlebih dahulu ke blog masing masing.

1. setelah masuk ke blog masing masing  klik menu Tema/Edit HTML lalu cari kode  </head> lalu letakkan kode berikut di atasnya 

<script> //<![CDATA[ function TOC() { var TOC = i = headlength = gethead = 0; headlength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length; for (i = 0; i < headlength; i++) { gethead = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent; document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", "point" + i); TOC = "<li><a href='#point" + i + "'>" + gethead + "</a></li>"; document.getElementById("TOC").innerHTML += TOC; } } function mbtToggle() { var mbt = document.getElementById('TOC'); if (mbt.style.display === 'none') { mbt.style.display = 'block'; } else { mbt.style.display = 'none'; } } //]]> </script>  

2. setelah selesai memasang kode script di atas  lalu cari kode  < /style > kemudia  tambahkan  kode ccs  berikut di atas   

/*CSS ToC */ .TOC { line-height: 1.4em; padding: 20px 30px 20px 10px; display: block; width: 95%; margin: 0 auto; background: #ffffff; box-shadow: 1px 1px 2px #fff inset, -1px -1px 2px #fff inset; border-radius: 3px/6px } .TOC ol, .TOC ul { margin: 0; padding: 0; } .TOC ul { list-style: none; } .TOC ol li, .TOC ul li { padding: 15px 0 0; margin: 0 0 0 30px; font-size: 15px; } .TOC a { color: #0080ff; text-decoration: none; } .TOC a:hover { text-decoration: underline; } 

3. setelah selesai memasang kode ccs lalu cari kode berikut < data:post.body/ > jika ada beberapa kode yang sama  gubakan yang paling atas saja karena beberapa template di temukan 2-3 kode < data:post.body/ > jadi pilih kode yang posisinya paling atas .jika suda ketemu kodenya kemudian ganti kode tersebut dengan kode berikut ini 

<div id='post-toc'> <div class='TOC'> <button onclick='mbtToggle()'> DAFTAR ISI </button> <ol id='TOC'/> </div> <data:post.body/> <script> TOC(); </script> </div> 

4. setelah selesai dipasang semua script di atas lalu tekan tombol simpan/save dan untuk mengaktifkan daftar isi ini di dalam postingan kamu tambahkan Heading dan Sub heading pada postingan kamu  maka secara otomatis heading dab sub heading tersebut akan menjadi daftar isi dalam postingan kamu.... semoga artikel sederhana ini dapat di fahami dengan mudah...namun jika ada yang belum di mengerti silahkan tanyakan di kolom komentar oke... sampai jumpa di postingan berikutnya.. wassalammm