Daftar isi adalah kumpulan judul-judul blog yang tersisip sebuah link di dalamnya yang jika diklik akan mengarahkan pengunjung ke halaman tujuan. Hal ini akan mempermudah pengunjung mencari artikel yang dibutuhkan. Daftar isi tersusun berdasarkan label dan abjad. Nama lain dari daftar isi adalah Sitemap, Peta Situs, Table of Content.


Banyak blogger yang menampilkan daftar isi pada blognya dengan tujuan untuk memudahkan pengunjung mencari artikel. Namun ada juga blogger yang tidak menampilkan daftar isi di blognya dengan alasan-alasan tertentu.

Mungkin ada yang sudah pernah membuat daftar isi di blognya tapi entah kenapa tiba-tiba blank sendiri atau kosong saja. Menyangkut hal tersebut saya sendiri juga pernah mengalaminnya dan belum tahu apa penyebabnya. Selain itu juga banyak blog lain yang daftar isinya blank terutama yang menggunakan script daftar isi yang sama. Solusinya, perlu mencari script lain yang masih aktif terutama pada blog ini yang selalu update script daftar isi yang masih aktif dan tidak blank sekaligus tutorial cara memasang daftar isi ke blog atau membuat daftar isi.

Berikut Cara Membuat Daftar Isi Otomatis di Blog
1. Masuk ke blogger.
2. Sebelah kiri klik Halaman => Halaman baru.
3. Setelah laman baru terbuka, buat dulu judulnya "Daftar Isi".
4. Kemudian di bawahnya klik HTML. Dan salin script berikut didalamnya:

<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
    blogUrl: "https://mingkih.blogspot.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: true, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: true, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 60, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>

<script src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Nb:  Ganti URL warna merah dengan URL blog anda.

7. Terakhir klik Publikasikan.

Selanjutnya supaya tampilannya lebih bagus tambahkan kode CSS didalam template. Berikut caranya.
1. Klik Tema => Edit HTML
2. Cari kode ]]></b:skin> tambahkan kode berikut diatasnya:

/* Skin for Blogger Tabbed Layout TOC */
.tabbed-toc {
margin: 0 auto;
background: $(header.background.kiri);
background: linear-gradient(to bottom right, $(header.background.kiri), $(header.background.kanan));
position: relative;
}
.tabbed-toc .loading {
display: block;
padding: 2px 12px;
color: $(navmenu.font.color);
}
.tabbed-toc ul,
.tabbed-toc ol,
.tabbed-toc li {
margin: 0;
padding: 0;
list-style: none;
}
.tabbed-toc .toc-tabs {
width: 20%;
float: left;
}
.tabbed-toc .toc-tabs li a {
display: block;
font: $(navmenu.font); 
overflow: hidden;
color: $(navmenu.font.color);
text-transform: uppercase;
text-decoration: none;
padding: 12px;
}
.tabbed-toc .toc-tabs li a:hover {
background-color: rgba(64,64,64,0.1);
}
.tabbed-toc .toc-tabs li a.active-tab {
background: rgba(64,64,64,0.1);
position:relative;
z-index:5;
margin:0 -1px 0 0;
/* cursor:text; */
}
.tabbed-toc .toc-content,
.tabbed-toc .toc-line {
width: 80%;
float: right;
background-color: white;
border-left: 5px solid rgba(64,64,64,0.1);
box-sizing: border-box;
}
.tabbed-toc .toc-line {
float: none;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.tabbed-toc .panel {
position: relative;
z-index: 5;
}
.tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 14px;
padding: 6px 12px;
overflow: hidden;
}
.tabbed-toc .panel li time {
display: block;
font-weight: normal;
font-size: 11px;
color: #666;
float: right;
}
.tabbed-toc .panel li .summary {
display: block;
padding: 10px 12px 10px;
font-size: 13px;
}
.tabbed-toc .panel li .summary img.thumbnail {
float: left;
display: block;
margin: 5px 8px 0 0;
width: 72px;
height: 72px;
background-color: #fafafa;
}
.tabbed-toc .panel li {background-color:#f3f3f3}
.tabbed-toc .panel li:nth-child(even) {background-color:#fff}
.tabbed-toc .panel li a:hover,
.tabbed-toc .panel li a:focus,
.tabbed-toc .panel li.bold a {
background-color: rgba(64,64,64,0.1);
outline: none;
}
@media (max-width:700px) {
.tabbed-toc .toc-tabs,
.tabbed-toc .toc-content {
overflow :hidden;
width: auto;
float: none;
display: block;
}
.tabbed-toc .toc-tabs li {
display: inline;
float: left;
}
.tabbed-toc .toc-tabs li a.active-tab {
background-color: rgba(64,64,64,0.1);
}
.tabbed-toc .toc-content { border: none }
.tabbed-toc .toc-line,
.tabbed-toc .panel li time { display: none }
}

Membuat daftar isi di blog sudah selesai. Sekarang tinggal dicek apakah sudah berfungsi dengan baik. Kalau belum mungkin ada kodenya yang kurang karena tidak tersalin semuanya atau mungkin meletakkan script pada halaman Compose yang seharusnya dihalaman HTML.

Baiklah, itulah tutorial cara membuat daftar isi atau biasa disebut dengan sitemap. Semoga bermanfaat. Selain daftar isi berdasarkan label diatas, berdasarkan kategori atau berdasarkan tanggal, masih banyak lagi kode-kode daftar isi lainnya yang bisa anda temukan pada blog lain.