Cara Mudah Membuat Daftar Isi Otomatis di Blogger: Panduan SEO untuk Blogger Pemula

Gambar : Screensoot Blog ini

Jakarta - Dalam artikel ini, Kami akan menjelaskan cara membuat daftar isi (TOC) secara otomatis dan semi otomatis di platform Blogger. Kami akan menjelaskan perbedaan antara kedua metode ini secara lebih rinci.

Apa Itu Daftar Isi Blog (TOC)?

Daftar Isi (TOC) adalah ringkasan dari poin-poin utama dalam sebuah artikel blog yang memungkinkan pembaca dengan mudah menavigasi konten dan menemukan informasi yang mereka cari. Anda sering menemui TOC di situs web seperti Wikipedia.

Manfaat Daftar Isi pada Postingan Blog

Pada dasarnya, TOC membantu pembaca dengan cepat menemukan informasi penting dalam artikel tanpa harus membaca keseluruhan konten. Ada tiga cara berbeda untuk membuat TOC: secara manual, otomatis, dan semi otomatis. Ketiga metode tersebut memiliki perbedaan dalam hal kecepatan pembukaan halaman blog dan tingkat kompleksitas. Metode manual adalah yang paling sederhana karena tidak memerlukan kode CSS atau script tambahan.

Dari segi efisiensi, metode otomatis dan semi otomatis lebih sederhana karena tidak memerlukan penandaan manual pada poin-poin penting dalam artikel. Untuk panduan tentang cara membuat TOC secara manual, saya telah menyediakan langkah-langkahnya di halaman terpisah. Namun, tingkat kesulitan dapat bervariasi tergantung pada template blog yang Anda gunakan.

Misalnya, jika Anda menggunakan template viomagz, template tersebut tidak memiliki fitur TOC otomatis atau manual. Oleh karena itu, Anda harus membuatnya sendiri jika ingin menampilkan TOC.

Cara Membuat TOC Otomatis di Blogger

Ada beberapa cara yang dapat Anda pilih untuk membuat TOC di blog Anda. Berikut adalah langkah-langkah untuk membuat TOC otomatis di Blogger:

Masuk ke dasbor Blogger Anda.
Klik menu "Tema" dan pilih "Edit HTML."
Sebelum mencoba langkah berikutnya, pastikan Anda telah membuat salinan cadangan dari template Anda.

Salin semua kode di bawah ini dan letakkan di atas kode </head>

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
/*
 * Blogspot TOC
*/
.bwstoc {
 margin: 10px 0;
 background: #F0F0F0;
 border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
 margin: 0 0 15px 20px;
 padding: 0;
}
.bwstoc ul {
 list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
}
.bwstoc a {
 text-decoration: none;
}
.bwstoc a:hover {
 text-decoration: underline;
}
.bwstoc .bwstocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
 text-decoration: none;
 cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
 text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script type='text/javascript'>
/*
 * SEO Friendly Blogspot Table Of Contents
*/
//<![CDATA[
function bwstoc() {
 var bwstoc = i = headinglength = getheading = 0;
 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
 if (headinglength > 1) {
 // Hanya Tampil Jika Ditemukan Minimal 2 Heading
 for (i = 0; i < headinglength; i++) {
 getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
 var bws_2 = bws_1.trim();
 var getHeadUri = bws_2.replace(/\s/g, "_");
 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("bwstoc").innerHTML += bwstoc;
 }
 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
    var bwstocBtn = document.getElementById('bwstoc');
 var bwstocWrapID = document.getElementById('bwstocwrap');
 var bwstocLink = document.getElementById('bwstocLink');
    if (bwstocBtn.style.display === 'none') {
        bwstocBtn.style.display = 'block';
 bwstocWrapID.style.display = 'block';
 bwstocLink.innerHTML = 'Tutup';
 
    } else {
        bwstocBtn.style.display = 'none';
 bwstocWrapID.style.display = 'inline-block';
 bwstocLink.innerHTML = 'Tampil';
    }
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

Cari kode <data:post.body/> dalam template Anda (biasanya ada beberapa kode dalam template). Pilih salah satu dan gantilah dengan kode di bawah ini (pilih hanya satu):
Kode 1: Untuk TOC yang tersembunyi secara default:

<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->

Kode 2: Untuk TOC yang langsung terbuka:

<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tutup</a>]</div><ul id='bwstoc' style='display:block'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->

Simpan template Anda. Jika berhasil, TOC akan otomatis muncul di setiap postingan Anda.

Salah satu kelemahan dari metode di atas adalah setiap postingan akan memiliki TOC, yang mungkin tidak diinginkan. Untuk alasan ini, saya lebih suka metode semi otomatis berikut ini.

Cara Membuat TOC Semi Otomatis di Blogger (Rekomendasi)

Selain metode otomatis, saya juga akan membagikan cara membuat TOC secara semi otomatis. Ini berarti Anda perlu menambahkan sedikit kode ke dalam postingan Anda.

Mengapa disebut semi otomatis?

Karena menurut saya, tidak semua postingan memerlukan TOC, terutama jika kontennya singkat. Maka, cara ini dapat menjadi pilihan yang lebih baik.

Ada beberapa pilihan cara yang dapat Anda gunakan. Berikut adalah cara pertama:

Masuk ke dasbor Blogger Anda.
Klik menu "Tema" dan pilih "Edit HTML."
Buat salinan cadangan dari template Anda terlebih dahulu.

Setelah cadangan terbuat, salin kode di bawah ini dan letakkan di atas kode </b:skin>:

.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;}

Berikutnya salin juga kode dibawah ini, dan letakkan diatas 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>

Ganti kode <data:post.body/> dalam template Anda dengan kode di bawah ini:

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

Simpan template Anda.

Untuk menggunakannya dalam postingan:

Pastikan postingan Anda sudah memiliki subjudul (h2, h3, dan seterusnya).
Klik mode HTML.

Salin dan tempelkan kode di bawah ini di atas atau di bawah paragraf pertama:

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

Terakhir, salin dan tempelkan kode di bawah ini pada akhir postingan blog Anda:

<script>mbtTOC();</script>Publikasikan atau pratinjau postingan Anda untuk melihat hasilnya.

Cara kedua:

Cara kedua ini lebih cocok untuk template viomagz versi terbaru. Langkah-langkahnya sebagai berikut:

Masuk ke dasbor Blogger Anda.
Klik menu "Tema" dan pilih "Edit HTML."
Buat salinan cadangan dari template Anda.

Salin kode di bawah ini dan letakkan di atas kode </body>:

<!-- Toc Semi Otomatis -->
<script async='async' defer='defer'>
var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Daftar Isi :</h4><ul style='display:yes'>&quot;;$(&quot;.post-body h2, .post-body h3, .post-body h4&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;.post-body h2,  .post-body h3, .post-body h4&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}
</script>

Salin kode di bawah ini dan letakkan di atas kode "]]></b:skin>":

/* TOC Semi Otomatis */
.table-of-contents{flex:auto;width:fit-content;background: #f7f8fb !important;border-left: 6px solid #ebedf3 !important;padding:11px;margin:8px 0 10px 0;font-size: 15px}
.table-of-contents li{margin:0 0 0.25em 0; list-style: decimal;margin-left:-30px !important; margin-top:5px !important}
.table-of-contents a{color:#0479b4;}
.table-of-contents h4{margin:0;cursor:pointer}
:target::before {content:""; display:block; height:60px;margin-top:-60px;visibility:hidden;}

Simpan template Anda.

Untuk menerapkannya pada postingan:

Pastikan postingan Anda memiliki subjudul (h2, h3, dst).
Pastikan mode tulisan Anda berada dalam mode HTML.
Tempel kode di bawah ini di atas atau di bawah paragraf pertama:
```
<div class="toc-pro"></div>
```
Simpan postingan Anda.

Cara ketiga:

Masuk ke dasbor Blogger.com Anda.
Klik menu "Tema" dan pilih "Edit HTML."
Buat salinan cadangan dari template Anda.

Tempel kode di bawah ini di atas kode "]]></b:skin>":

/* TOC */
.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;}
*/

Jika template Anda belum memiliki kode Font Awesome, tambahkan kode berikut di atas "</head>":

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

Tempel kode di bawah ini di atas "</body>":

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();}

Simpan template Anda.

Untuk menerapkannya pada postingan:

Pastikan postingan Anda memiliki subjudul (h2, h3, dst).
Pastikan mode tulisan Anda berada dalam mode HTML.
Tempel kode di bawah ini di mana saja di atas atau di bawah paragraf pertama:
```
<div class="toc-pro"></div> 
```
Simpan postingan Anda.

Selamat, sekarang Anda telah berhasil membuat TOC di blog Anda menggunakan metode yang Anda pilih. Semoga artikel ini membantu meningkatkan kualitas konten Anda di mata pembaca dan mesin pencari. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk mengajukannya. Terima kasih!

Bayhaqy Blog

Cara Mudah Membuat Daftar Isi Otomatis di Blogger: Panduan SEO untuk Blogger Pemula

Apa Itu Daftar Isi Blog (TOC)?

Manfaat Daftar Isi pada Postingan Blog

Cara Membuat TOC Otomatis di Blogger

Cara Membuat TOC Semi Otomatis di Blogger (Rekomendasi)

Mengapa disebut semi otomatis?

Pembahasan Lengkap Resistor (Pengertian, Fungsi dan Kode Warna)

Kumpulan Istilah - Istilah Dalam Jaringan Komputer

Pembahasan tentang Perbedaan antara KBps dan Kbps

Cara Mudah Membuat Daftar Isi Otomatis di Blogger: Panduan SEO untuk Blogger Pemula

Apa Itu Daftar Isi Blog (TOC)?

Manfaat Daftar Isi pada Postingan Blog

Cara Membuat TOC Otomatis di Blogger

Cara Membuat TOC Semi Otomatis di Blogger (Rekomendasi)

Mengapa disebut semi otomatis?

Join the conversation