Cara Membuat Daftar Isi (TOC) Di Postingan Blog

Pengertian Daftar Isi

Daftar isi adalah bagian dari sebuah makalah, laporan, maupun skripsi yang menjabarkan tema pembahasan sebuah makalah halaman per halaman atau tiap bab. Peran sebuah daftar isi sangatlah penting dalam pembuatan makalah. Karena, dengan daftar isi dapat memudahkan pembaca untuk mencari topik utama atau materi apa yang dibahas dalam tiap halaman. Selain itu, dengan adanya daftar isi, sebuah makalah akan terlihat lebih rapih.

Cara Membuat Daftar Isi (TOC) Di Potingan Blog

Itulah tadi pengantar dari daftar isi. Pertanyaan selanjutnya bagaimana jika daftar isi tersebut dibuat di postingan blog? apakah bisa?. Jika jawabanyya bisa pasti akan membuat postingan blog kamu labih menarik dan terlihat sangat profeional.

Setelah saya coba dan browsing dari blog MTB, ternyata membuat daftar isi di postingan blog sangat-sangat bisa, dan caranya pun sangat gampang kalau menurut saya, yang perlu kamu lakukan hanyalah membaca dan mempraktekkan penjelasan saya nanti dengan cermat.

Daftar isi di da;am postingan blog, seperti terlehat di nawah ini:

Pengertian Daftar isi
....................
Kode
....................
Customized
...........
Penutup

Pentingnya Daftar Isi Di Postingan

Mengingat pentingnya peran daftar isi dalam sebuah makalah atau karya tulis ilmiah, maka penulisannya harus jelas dan informatif. Sebab penulisan daftar isi yang asal-asalan atau tidak rapi bisa menyulitkan pembaca dalam menganalisa isi makalah. Terlebih lagi untuk makalah yang mempunyai jumlah halaman yang cukup banyak. Oleh karena itu dalam pembuatan daftar isi harus memperhatikan kaidah dan aturan yang berlaku.

Apakah Membuat Daftar Isi di Postingan SEO?

Pertanyaan ini mungkin akan terlintas dipikiran kamu setelah membaca tulisan ini. Maka jawaban saya adalah iya, Tulisan pada postingan blog yang disertai daftar isi akan mampu meningkatkan nilai seo suatu artikelnya. ingat SEO ARTIKEL.

Baca: Cara Memperkecil CSS agar blog lebih cepat loading

Coba perhatikan Wikipedia misalnya, seringkali disetiap awal halaman wikipedia selalu disertai daftar isi pada setiap postingannnya. Nah, Sama seperti Blog ini, tidak lain dan tidak bukan adalah mecontoh struktur penulisan di halaman postingan wikipedia.

Fitur-Fitur

Adapun Firur yang bisa kamu peroleh dari kode yang akan saya bagikan (asli:MTB) adalah sebagai berikut:

Code Murni Javasript
Didukung Tag Healing
Disertai Dengan Nomor Point List (3 Macam)
Bisa Mengatur tag id untuk isi konten
Dapat Dimasukkan link
Dukungan Flat dan Nomor Multi List
Dapat disembunyikan dan dimunculkan
Script Minimal karena sudah dikompess Dengan CSS minifier
Ringan dan Cepat
SEO Friendly/li>
Mudah dicustomized
Mobile responsive

Kode

Untuk kode script terbagi menjadi beberapa buah, silakan dipergunakan dengan hati-hati, kode ini saya peroleh dari blog MTB, segala penyalahgunaan kode-kode dibawah ini bukan merupakan tanggung jawab saya.

Kode CSS

Tambahkan kode di bawah ini di ATAS kode ]]></b:skin> Templete kamu

/*####TOC Plugin V2.0 by pengunjungblogs.com####*/
.mbtTOC2{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;} 
.mbtTOC2 button a:hover{ text-decoration:underline; } 
.mbtTOC2 button span {font-size:15px; margin:0px 10px; }

.mbtTOC2 li{margin:10px 0;  } 
.mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;} 
.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;} 
.mbtTOC2 li li a{ color:#289728; font-size:15px;}

.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/* 
.point2 {list-style-type:lower-alpha} 
.point3 {list-style-type:lower-roman} 
.point4 {list-style-type:disc} 
*/

kode JavaScript

Tambahkan kode dibawah ini, tepat di ATAS kode </head> templete blog kamu.

<link href='http://ift.tt/J5lN33' rel='stylesheet' type='text/css'/>
<script type='text/javascript'> 
//<![CDATA[ 
//*************TOC Plugin V2.0 by pengunjungblogs.com 
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")} 
//]]> 
</script>

Fungsi Tag dan Class

Untuk membuat daftar isi ini kamu juga harus memahami bebrapa fungsi yang bekerja unruk mengaktifkan daftar isi ini secara keseluruhan. Ada bebrapa jenis fungsi tag dan class saat yang harus diperhatikan. Saat saya mencoba metode dan langkah-langkah yang diberikan oleh blog MTB, say megalami kesulitan untuk menerapkannya pada tulisan ini. Penjelasan daam tulisan ini merupakan hasil dari percobaan saya, dengan hasil akhir saya sudah memahami fungsi tag dan class.

#pointXXX

Perhatikan daftar isi di atas, pada point 4: Pemasangan Kode Dipostingan, maka kamu akan menemui kode dengan nama #point1, #point2, #point3,dan seterusnya. Ini merupakan kode pamanggil agar nanti setelah kamu mengklik salah satu daftar isi, maka halaman post kamu akan menuju pada point yang kamu klik terebut. Saran saya pada saat membuat kamu menggunakan kode pada daftar isi Pemasangan Kode Dipostingan, buatlah nilai dari #pointxxx, secara berurutan.

Penjelasan ol class

Untuk membuat daftar isi menjadi multi list, sama seperti di atas, kamu juga harus memahami penggunakan dari ol class. ada 3 buah penggunaan dari ol class, yaitu:

ol class="point2"
maksudnya, maka list daftar isi kamu mempunyai 1 tingkatan angka, contoh: 1 Pengertian Daftar Isi
ol class="point2"
maksudnya, maka list daftar isi kamu mempunyai 2 tingkatan angka, contoh: 1.1 Pentingnya Daftar Isi Di Postingan
ol class="point3"
maksudnya, maka list daftar isi kamu mempunyai 3 tingkatan angka, contoh: 2.3.4 Pemasangan Kode

Penjelasan Tag Healing H2/H3/H4

Fungsi Tag Healing H2/H3/H4 merupakan judul atau sub judul untuk penjelasan daftar isi setelah kamu membuat daftar isi. ada 5 buah tingkatan tag yang bisa kamu gunakan dalam membuat judul dan sub judulnya, yaitu tag H2. H3 H4, H5, H6, misalnya

pengunjungblogs: Merupakan tag H2

pengunjungblogs: Merupakan tag H3

pengunjungblogs: Merupakan tag H4

pengunjungblogs: Merupakan tag H5

pengunjungblogs: Merupakan tag H6

Pemasangan Kode

Silakan kopi kode berikut pada editor postingan kamu, sesuaikan dengan keinginan kamu, Perhatikan bebrapa variasi yang bisa kamu gunakan

<div class="mbtTOC2">
<button>DAFTAR ISI [<aid="Tog" onclick="mbtToggle2()">hide</a>]</button>     
<div id="mbtTOC2" style="display: block;">
<ol class="point1">
<li><a href="PengunjungBlogs.com#point1">Pengertian Daftar isi</a><ol class="point2">
<li><a href="PengunjungBlogs.com#point2">Pentingnya Daftar Isi Di Postingan</a></li>
<li><a href="PengunjungBlogs.com#point3">SEO</a></li>
<li><a href="PengunjungBlogs.com#point4">Fitur-Fitur</a></li>
</ol>
</li>
....................
<li><a href="PengunjungBlogs.com#point5">Kode</a><ol class="point2">
<li><a href="PengunjungBlogs.com#point6">Kode CSS</a></li>
<li><a href="PengunjungBlogs.com#point7">kode JavaScript</a></li>
<li><a href="PengunjungBlogs.com#point8">Fungsi Tag dan Class</a><ol class="point3">
<li><a href="PengunjungBlogs.com#point9">Penjelasan #pointXXX</a></li>
<li><a href="PengunjungBlogs.com#point10">Penjelasan ol class</a></li>

<li><a href="PengunjungBlogs.com#point11">Penjelasan Tag Healing H2/H3/H4/H5/H6</a></li>
<li><a href="PengunjungBlogs.com#point12">Pemasangan Kode</a></li>
<li><a href="PengunjungBlogs.com#point13">Kode Scroll Di Halaman Postingan</a></li>
</ol>
</li>
</ol>
</li>
....................
<li><a href="PengunjungBlogs.com#point14">Customized</a><ol class="point2">
<li><a href="PengunjungBlogs.com#point15">Merubah Warna Background</a></li>
<li><a href="PengunjungBlogs.com#point16">Merubah Warna Border</a></li>
<li><a href="PengunjungBlogs.com#point17">Merubah Warna Link</a></li>
</ol>
</li>
...........
<li><a href="PengunjungBlogs.com#point18">Pemasangan Kode Dipostingan</a></li>
<li><a href="PengunjungBlogs.com#point19">Penutup</a></li>
</ol>
</div>
</div>

Catatan:
Ganti pengunjungBlogs.com dengan URL POSTINGAN Artikel Kamu.
Ganti warna hijau dengan Judul Daftar Isi kamu
............
Beberapa vaariasi yang bisa kamu gunakan

Level 1Kode Level 1Level 2Kode Level 2

Pengertian Daftar isi

Kode

<div class="mbtTOC2">
<button>DAFTAR ISI [<a id="Tog" onclick="mbtToggle2()">hide</a>]</button>
<br />
<div id="mbtTOC2" style="display: block;">
<ol class="point1">
<li><a href="PengunjungBlogs.com#point5">Kode</a><ol class="point2">
<li><a href="PengunjungBlogs.com#point6">Kode CSS</a></li>
<li><a href="PengunjungBlogs.com#point7">kode JavaScript</a></li>
<li><a href="PengunjungBlogs.com#point8">Fungsi Tag dan Class</a><ol class="point3">
<li><a href="PengunjungBlogs.com#point9">Penjelasan #pointXXX</a></li>
<li><a href="PengunjungBlogs.com#point10">Penjelasan ol class="point3</a></li>
<li><a href="PengunjungBlogs.com#point11">Penjelasan Tag Healing H2/H3/H4</a></li>
<li><a href="PengunjungBlogs.com#point12">Pemasangan Kode</a></li>
<li><a href="PengunjungBlogs.com#point13">Kode Scroll Di Halaman Postingan</a></li>
</ol>
</li>
</ol>
</li>

Kode Scroll Di Halaman Postingan

Untuk mengaktifkan fungsi scroll, jika daftar isi di klik, maka halaman langsung menuju ke sub judul yang di tuju, caranya dengan memasukkan kode di bawah ini di akhir artikel. ingat masih dalam mode HTML ya...

<script>mbtTOC2();</script>

Customized

Kode untuk daftar isi ini sesuai dengan daftar isi nomor 1.3 Fitur-fitur, sangat mudah untuk di Customized, kamu bisa merubah warna background daftar isi, kamu bisa merubah warna border dan juga bisa merubah warna link aktif jika di klik. adapun caranya adalah sebagai berikut:

Merubah Warna Background, warna border dan link

Kembali ke Kode CSS dan Javascript (nomor 2.1 dan 2.2) di atas, perhatikan kode-kode di bawah ini.

BackgroundBorderlink

ubah kode berikikut #FFFFE0, dengan warna keinginanmu, untuk kode warna bisa dilihat di Hex Color

ubah kode berikikut #f7f0b8, dengan warna keinginanmu, untuk kode warna bisa dilihat di Hex Color

ubah kode berikikut #0080ff, dengan warna keinginanmu, untuk kode warna bisa dilihat di Hex Color

Penutup

Itulah penjelasan tentang bagaimana membuat daftar isi (TOC) pada postingan blog dengn multi level point. Jangan lupa subsribe dan bagikan artikel ini jika bermanfaat. jika ada pertanyaan atau langkah-langkah yang kurang dimengerti, silakan berkomentar. Terima Kasih.

Cari Blog Ini

Kopas Tuntas