Membuat Table Of Content Pada Website Secara Otomatis

OYE Digital Indonesia

Beranda SEO Membuat Table Of Content Pada Website Secara Otomatis

Membuat Table Of Content Pada Website Secara Otomatis

7/14/2023 09:07:00 PM

Konten [Tampil]

14/07/23, Oye Digital Indonesia, Membuat Table Of Content Pada Website Secara Otomatis - Seperti yang kita ketahui bahwa TOC sangat berperan penting untuk UX (User Experience). Banyak para publisher, yang telah menggunakan TOC, untuk menambah karya tulis mereka dalam sebuah postingan artikel.

Selain menambah kesan penulisan konten secara artistik. Table of content ternyata sangat mempengaruhi posisi serp dalam teknik optimasi seo sendiri. Bukan hanya itu saja, konten artikel yang memiliki fitur TOC, membantu mempermudah pembaca/pengunjung situs dalam menemukan point penting di topik tersebut.

Bagaimana Cara Membuat Table Of Content Otomatis Di Blogspot?

Gambar Membuat Table Of Content Pada Website Secara Otomatis

Dalam menerapkan daftar isi ke dalam tema blogspot secara otomatis cukup mudah. Ada beberapa scropt javacsript, css, dan html yang dapat kita gabungkan kedalam tema blogger. Tentunya kami sudah menyiapkan script tersebut, Anda hanya perlu memasangnya kedalam tema blogger. Baik kita langsung saja step by step, cara menerapkan TOC kedalam blogspot.

Memasang Script Css Dan JS Dalam Kode Head

Silahkan copy script dibawah ini, dan pasang tepat diatas kode </head>, dalam tema blogspot Anda. Caranya klik pengaturan tema, kemudian edit tema html, lalu cari kode </head> bisa menggunakan shorcut CTRL+F untuk mempermudah mencari kode /head tersebut. Setelah ketemu paste tepat diatas kode </head> script dibawah ini.

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
/* 
 * TOC Blogspot
 * https://www.oye.or.id/
*/
.oyetoc {
 margin: 10px 0;
 background: #F0F0F0;
 border: 1px solid #ddd;
}
.oyetoc ol, .oyetoc ol {
 margin: 0 0 15px 20px;
 padding: 0;
}
.oyetoc ol {
 list-style: disc;
}
.oyetoc ol li, .oyetoc ol li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
}
.oyetoc a {
 text-decoration: none;
}
.oyetoc a:hover {
 text-decoration: underline;
}
.oyetoc .oyetocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
}
.oyetoc .oyetocHeader a {
 text-decoration: none;
 cursor: pointer;
}
.oyetoc .oyetocHeader a:hover {
 text-decoration: underline;
}
</style>

<script type='text/javascript'>
/* 
 * SEO Friendly Table Of Contents
 * https://www.oye.or.id/
*/
//<![CDATA[
function oyetoc() {
 var oyetoc = 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 oye_1 = getheading.replace(/[^a-z0-9]/gi," ");
 var oye_2 = oye_1.trim();
 var getHeadUri = oye_2.replace(/\s/g, "_");
 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
 oyetoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("oyetoc").innerHTML += oyetoc;
 }
 } else { document.write("<style>.oyetoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function oyetocShow() {
    var oyetocBtn = document.getElementById('oyetoc');
 var oyetocWrapID = document.getElementById('oyetocwrap');
 var oyetocLink = document.getElementById('oyetocLink');
    if (oyetocBtn.style.display === 'none') {
        oyetocBtn.style.display = 'block';
 oyetocWrapID.style.display = 'block';
 oyetocLink.innerHTML = 'Tutup';
 
    } else {
        oyetocBtn.style.display = 'none';
 oyetocWrapID.style.display = 'inline-block';
 oyetocLink.innerHTML = 'Tampil';
    }
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#oyetocwrap,.oyetoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

Pasang Perintah TOC Ke Dalam Post Body Entry

Selanjutnya cari kode <data:post.body/>, dan pasang kode di bawah ini, untuk menampilkan daftar isi tepat di bawah judul postingan Anda secara otomatis.

Kemudian klik simpan, dan selesai, pengaturan table of content dalam postingan secara otomatis sudah terpasang.

Catatan: Untuk menjalankan perintah TOC ini, minimal dalam artikel harus ada 2 heading, Anda bisa menggunakan struktur heading 2, 3 dan 4 agar TOC tampil dengan sempurna.

Cara Membuat Table Of Content Otomatis Pada CMS Wordpress

Selain daftar isi seperti ini dapat di pergunakan di blogspot, tentu bisa Anda terapkan pada cms wordpress caranya cukup mudah.

Install Plugin

Gambar Cara Membuat Table Of Content Otomatis Pada CMS Wordpress

Anda hanya perlu menginstall plugin easy table of content, pada website yang sedang di kelola. Setelah terinstall lalu aktifkan pluginnya.

Pengaturan

Pada settingan general ceklis menu enable support pos, kemudian ceklis kembali pada pos di auto insert. Dan yang lainnya tetap biarkan deflaut lalu klok simpan. Secara otomatis TOC sudah terpasang pada website wordpress yang sedang Anda kelola.

Penutup

Cukup mudah bukan, cara menerapkan daftar isi pada website di blogspot maupun cms wordpress. Demikian yang dapat kami sampaikan, tentang Membuat Table Of Content Pada Website Secara Otomatis. Semoga dapat memberikan manfaat bagi kita semua dan terima kasih sudah berkunjung sampai jumpa kembali.

Facebook WhatsApp Telegram

Bagikan artikel ini