-->

Cara Membuat Daftar Isi Postingan / Table Of Contents di Blog

Cara Membuat Daftar Isi Postingan / Table Of Contents di Blog

Cara Membuat Daftar Isi Postingan / Table Of Contents di Blog - Bagaimana cara membuat daftar isi didalam postingan blog?, mungkin itu pertanyaan yang sedang kalian cari - cari jawabannya saat ini.

Bagi kalian yang pernah mencari informasi mengenai sesuatu hal di website Wikipedia mungkin sudah pada tau apa itu daftar isi postingan, namun untuk kalian yang belum tau, disini saya akan menjelaskannya terlebih dahulu apa itu Table Of Contents / Daftar Isi Postingan di Blog, dan apa saja manfaatnya manfaatnya.

Apa Itu Daftar Isi Postingan?

Table Of Contents atau yang biasa disebut Daftar isi Postingan adalah daftar link yang mengarah ke suatu isi postingan / artikel yang dimana untuk memudahkan para pengunjung pada saat ingin mencari sebuah informasi penting yang ada di postingan tersebut dengan cepat. dan biasanya Daftar isi postingan tersebut bisa dilihat dibagian awal postingan sepertihalnya blog tutorapik.com ini.

Manfaat Memasang Daftar Isi Postingan di Blog

Selain dapat memudahkan bagi para pengunjung / pembaca, ternyata memasang Daftar isi postingan di blog terdapat beberapa manfaat yang positif, dan berikut adalah beberapa manfaat saat memasang (TOC) Table Of Contents di blog.

1. Meningkatkan Daya tarik Pengunjung / Pembaca

Seperti yang sudah saya katakan diatas, selain bisa memudahkan para pembaca pada saat ingin mencari poin - poin penting di dalam sebuah postingan, tenyata manfaat memasang Table Of Contents atau Daftar Isi Postingan diblog juga bisa meningkatkan daya tarik tersendiri terhadap para pengunjung / pembaca.

Dalam hal ini juga pengunjung dapat dengan cepat dan mudah dalam mengetahui apa saja isi dari postingan pada blog tersebut. Yang dimana hal ini juga tentunya akan meningkatkan sebuah daya tarik kepada para pengunjung yang lebih baik, ditambah lagi jika didalam postingan blog terdapat poin penting yang sedang mereka cari - cari.

2. Blog Terlihat Lebih Menarik di Mesin Pencarian

Ternyata Pemasangan Daftar Isi di postingan blog juga akan memungkinkan postingan tampil lebih menarik pada mesin pencarian seperti google, yang dimana mesin pencari google akan menampilkan beberapa daftar isi postingan pada meta description hasil pencarian. yang mana hal ini akan membuat postingan pada blog terlihat lebih menarik dan profesional.

Dan itulah penjelasan dan manfaat mengenai Table Of Contents atau Daftar Isi Postingan di blog yang perlu kalian ketahui. jika kalian tertarik untuk memasang daftar isi pada postingan blog kalian, kalian bisa simak postingan di bawah ini. Karena disini saya akan memberikan tutorial mengenai Cara Membuat Daftar Isi Postingan / Table Of Contents di Blogger dan WordPress, langsung saja kalian bisa simak langkah - langkah caranya dibawah.

Baca Juga : Cara Membuat Artikel di WordPress Rata Kanan-Kiri (Justify)

Cara Membuat Daftar Isi Postingan di Blogger

1. Pertama - tama Login ke Dasbor Blogger pada Blog Kalian, lalu pilih menu Tema. Jika kalian sudah menggunakan Blogger versi yang terbaru, Tap ikon titik tiga yang ada di pojok kanan atas, Setelah itu pilih Edit HTML.

2. Kemudian kalian Copy semua kode dibawah ini lalu tempelkan di atas </head> atau bisa juga di bawah <body> (pilih salah satu).

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
/*
* Blogspot TOC
* https://bibit.ws/toc-di-blogspot.php
*/
.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
* https://bibit.ws/toc-di-blogspot.php
*/
//<![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>

3. Selanjutnya, supaya kalian tidak perlu menambah kode pemanggil TOC di postingan blogspot secara manual, dan tidak perlu edit artikel yang sudah ada, silakan kalian modif <data:post.body/> masih di Tema blogspotnya.

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

<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 -->

Disana nantinya akan terdapat 2 atau 3 kode <data:post.body/> di dalam Tema blogspot kalian, jadi silakan kalian ganti semua. untuk mencari kode tersebut kalian bisa tekan Ctrl+F.

Jika sudah, tinggal kalian klik Simpan Tema kemudian cek hasilnya.

Sebagai info tambahan, selain URL hasilnya lebih SEO friendly, script TOC blogspot di atas juga tidak memakai jQuery, tanpa Google Fonts dan tanpa Font Awesome, sehingga diharapkan lebih ringan.

Cara Membuat Daftar Isi Postingan di WordPress

1. Pertama - tama kalian instal dan aktifkan Plugin Table OF Content Plus.

2. Jika plugin tersebut sudah aktif, disini kalian perlu mengkonfigurasi pengaturan plugin. untuk caranya kalian bisa klik pada settings > TOC+ di admin WordPress kalian.

3. Pada menu tab Main Options, disana kalian dapat mengatur daftar isi pada blog kalian dengan sesuai selera masing - masing.

Dan berikut adalah contoh gambar pengaturan dafar isi pada blog tutorapik.com ini:

Cara Membuat Table Of Contents di Blog

Cara Membuat Daftar Isi Postingan di Blog

Jika kalian sudah selesai melakukan pengaturannya, kalian bisa langsung klik tombol Save Options untuk menyimpan pengaturan tersebut.

Penutup: Mungkin itu saja pembahasan saya mengenai Cara Membuat Daftar Isi Postingan / Table Of Contents di Blog pada kesempatan kali ini, semoga dapat bermanfaat, terima kasih.

Refrensi: https://bibit.ws/toc-di-blogspot.php

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel