Cara Membuat Daftar Isi di dalam Postingan Blog - Blogger Bandung

Daftar Isi dalam bahasa Inggris disebut Table of  Content atau TOC. Ia berupa subjudul (subheadeng) H2, H3, atau H4 dalam postingan blog. Berikut ini Cara Membuat Daftar Isi di dalam Postingan Blog. 

Menampilkan Daftar Isi dalam postingan ini merupakan bagian dari Tips SEO. Demonya Anda bisa lihat di bawah ini, juga bisa lihat DEMO yang lainnya.

Apa itu Daftar Isi atau TOC?

Di situs web, daftar isi disingkat TOC atau ToC adalah daftar tautan ke subjudul artikel. Biasanya ditemukan di halaman web yang ditempatkan tepat setelah paragraf pertama. Setiap tautan di dalam TOC, saat diklik, akan membawa pembaca ke bagian tertentu dari halaman website atau blog.

Ini contoh penampakan daftar isi blog.

TOC ini ramah mesin pencari sekaligus ramah pengguna (user friendly). Ia menyediakan cara cepat untuk melompat ke bagian halaman yang diinginkan. 

Biasanya mencakup judul-judul dari tajuk tingkat pertama (headings) atau tajuk tingkat kedua (subheadings).

Dalam karya cetak seperti buku atau makalah, TOC mengacu pada halaman indeks buku yang berisi nomor halaman untuk setiap bab. 

TOC untuk buku lebih mendalam dan komprehensif, tidak hanya berisi judul bagian tetapi deskripsi, nama penulis, dan subjudul.

Sejauh ini banyak pengembang telah menulis skrip ToC dinamis tetapi sebagian besar skrip ini dikodekan di jQuery atau mereka membuat JS yang memblokir perenderan memakan waktu buka halaman Anda. 

Anda bahkan dapat menemukan generator TOC tetapi skrip ini sekali lagi tidak memiliki fleksibilitas dan kemudahan penyesuaian.

TOC harus ditambahkan hanya untuk artikel yang panjang atau mengandung setidaknya empat judul. Sebaliknya, beberapa generator TOC akan menambahkan daftar di semua halaman Anda apakah berisi beberapa judul atau hanya satu judul, yang tentu saja bukan hal yang masuk akal untuk dilakukan.

Cara #1 Membuat Daftar Isi di Blogger

Langsung saja, ini dia Cara Membuat Daftar Isi di dalam Postingan Blog. Ada dua cara. Ini cara pertama.

1. Tema > Edit HTML

2. Simpan kode berikut ini di atas kode </head>

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>

Dua kode linik di atas adalah tautan sumber ke font Oswald dan Font-Awesome. Anda mungkin atau mungkin tidak ingin menambahkannya. 

Lakukan perubahan ini hanya jika diperlukan:

Tag heading utama di blogger adalah H2, tetapi jika Anda memilih tag subheading di editor blogger maka tag default Anda adalah H3. 

Jika Anda menggunakan tag subjudul sebagai judul utama Anda di posting blog Anda, silakan ganti h2 dengan h3 tiga kali dalam kode di atas. Plugin TOC tidak akan berfungsi jika tag heading Anda tidak benar.

3. Selanjutnya cari kode ]]></b:skin> dan tepat diatasnya paste kode CSS berikut:

.mbtTOC{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%;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
.mbtTOC ul {list-style:none;}
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}
.mbtTOC a{color:#0080ff;text-decoration:none;}
.mbtTOC a:hover{text-decoration:underline; }
.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}
.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

4. Terakhir cari kode <data:post.body/> dan ganti dengan kode di bawah ini:

<div id="post-toc"><data:post.body/></div>

Catatan: Anda akan menemukan dua atau lebih kemunculan kode ini, jadi ganti semua instance-nya dengan kode di bawah ini. Plugin TOC tidak akan berfungsi jika Anda mengganti <data:post.body/> sekali saja.

Save your template and you are all done!

Cara Mampilkan Daftar Isi secara Otomatis di Postingan Blog

Setiap kali Anda ingin menampilkan TOC di dalam posting tertentu, ikuti dua langkah ini. Selesai membuat tulisan atau postingan, dan sudah menambahkan subjudul H2 atau H3, minimal dua subjudul, lakukan langkah ini:

1. Klik mode "HTML"

Copas kode berikut ini di bawah gambar atau di bawah alinea pertama. Bisa juga sebelum subjudul pertama.

<div class="mbtTOC">
<button onclick="mbtToggle()">Daftar Isi</button>
<ol id="mbtTOC"></ol>
</div>

You can replace the text "Daftar Isi" dengan misalnya Table of Contents.

2. Activate TOC Plugin

Copas kode berikut ini di bagian akhir postingan:

<script>mbtTOC();</script>

Demikian Cara Membuat Daftar Isi di dalam Postingan Blog dari MBT. Agar blog Anda lebih SEO dan user friendly. Google mengindeksnya dan pengunjung menyukainya.

Cara #2 Membuat Daftar Isi di Blogger

Ini cara kedua. Kodenya agak berbeda dengan yang di atas, namun cara menampilkannya di postingan lebih mudah karena hanya satu kode dan lebih pendek. Yang ini dari Bloginos.

Buka kode template blog Anda: Klik Tema > Panah > Edit HTML 

1. Copy & paste kode berikut ini setelah kode </body> atau di atas kode </html>

Kodenya:

<script async='async' defer='defer'> var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();} </script>

2. Copas kode CSS berikut ini di atas kode ]]></b:skin>

Kodenya:

.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0} .table-of-contents li{margin:0 0 0.25em 0} .table-of-contents a{color:#2a5365} .table-of-contents h4{margin:0;cursor:pointer} .table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;} /* For Fontaweosme 5 .table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f0c9";padding-right:7px;} */

3. Save! Simpan Template.

Untuk menampilkan TOC dalam postingan, pastikan artikel Anda dilengkapi minimal dua subjudul H2 atau H3, juga bisa menambahnya dengan heading tag H4 dan H5.

Simpan kodenya di mode HTML, di bawah alinea pertama atau bisa juga disimpan di posisi paling atas.

Ini kodenya:

<div class='toc-pro'></div>

Beres!

Demikian cara membuat daftar isi di dalam postingan blog Blogger (Blogspot).*