Membuat DAFTAR ISI Blog Tampil Otomatis

Daftar isi atau Sitemap atau Peta Situs dalam sebuah blog atau website sangat penting agar mudah di telusuri oleh mesin telusur Google search engine juga agar situs anda tampil SEO.

Dengan adanya daftar isi atau sitemap pada blog maka pengunjung akan mudah mencari artikel atau postingan yang ada di halaman blog anda.
Ibarat sebuah buku apabila tidak ada halaman Daftar isi maka kita akan kerepotan mencari Judul-judul artikel atau pelajaran yang ada di dalamnya.
Perbedaan istilah Daftar isi dan Sitemap kebanyakan para blogger artinya sama yaitu isi halaman, tetapi saya berpendapat lain apabila daftar isi cocoknya untuk sebuah buku  yang di cetak, tetapi kalau Sitemap adalah pengertian Site nya saja  yaitu situs dan map adalah peta atau lokasi, sehingga saya menyimpulkan Sitemap yaitu lokasi (artikel/postingan)dalam situsweb dan bentuk fisiknya adalah dunia maya atau secara elektronik.

Banyak cara untuk Membuat DAFTAR ISI Blog Tampil Otomatis yang di posting oleh  para Blogger dengan berbagai aneka ragam model dari tampilan daftar isi yang sederhana sampai yang sangat keren.

Tentunya bagi anda yang masih Pemula mungkin merasa kebingungan apa sih Sitemap/Daftar isi/Peta Situs itu..?, seperti dulu waktu saya pertama kali membuat blog, mencari postingan-postingan tentang Sitemap, akhirnya saya dapat beberapa Kode Sitemap atau Daftar isi dari tetangga blogger ada yang berbayar dan ada yang gratisan, anda mau nyoba yang berbayar atau percobaan dulu silahkan membuatnya di PRO Sitemaps atau klik gambar di bawah ini kebetulan saya sebagai afiliasinya, Anda bisa mencoba yang gratisnya dulu.

Apabila anda tidak mau dibuat repot membuat sitemap di Sitepro, kebetulan saya mempunyai Kode agar Daftar Isi Tampil Otomatis, terimakasih kepada blogger yang baik hati yang membuat psotingan tentang membuat Daftar Isi ini.

Baiklah kita mulai Membuat Daftar Isi Blog Tampil Otomatis pada Blogspot : 
1.Silahkan buka blog anda dan pada dashboard pilih Halaman (pages) dan bukan Postingan (entry).
2.Pilih atau buat Halaman Baru (New Pages),dan setelah terbuka Halaman baru  silahkan Isi Judul Halamannya seperti misalnya : Daftar Isi ……(nama blog anda atau apalah terserah anda).

3.Pada ruang Halaman Klik atau pilih HTML , sekali lagi Pilih HTML bukan COMPOSE.

4.Copy Kode Daftar Isi atau Sitemap di bawah ini dan PASTEKAN pada Halaman HTML.

5.Ganti tulisan : NAMA SITUS dengan Alamat Situs Anda.

<link rel="stylesheet" href="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.css"/>
<div id="tabbed-toc" class="tabbed-toc"><span class="loading">MEMUAT&hellip;</span></div>
<script>
var tabbedTOC = {
    blogUrl: "https://NAMA SITUS.blogspot.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // 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>

6.Anda juga dapat mengganti/merubah tulisan “: MEMUAT…” dengan kalimat lain seperti misalnya “ LOADING, TUNGGU SEDANG DI MUAT atau terserah kreasi anda. 7. Jika anda akan meng edit layoutnya silahkan Copy Script CSS di bawah ini, dan Pastekan pada Halaman Template Blog anda (Halaman EDIT HTML) di atas kode ]]></b:skin>

/* Skin for Blogger Tabbed Layout TOC */

.tabbed-toc {
  margin:0 auto;
  background-color:#224C19;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#333;
}

.tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px/normal Helmet,FreeSans,Sans-Serif;
  color:white;
}

.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:normal bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#ccc;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}

.tabbed-toc .toc-tabs li a:hover {
  background-color:#153615;
  color:white;
}

.tabbed-toc .toc-tabs li a.active-tab {
  background-color:#275827;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  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 #275827;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.tabbed-toc .toc-line {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}

.tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;
}

.tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#892412;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}

.tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}

.tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}

.tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}

.tabbed-toc .panel li:nth-child(even) {background-color:#FFE8E3}

.tabbed-toc .panel li a:hover,
.tabbed-toc .panel li a:focus,
.tabbed-toc .panel li a:hover time,
.tabbed-toc .panel li.bold a {
  background-color:#333;
  color:white;
  outline:none;
}

.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}

@media (max-width:700px) {
  .tabbed-toc {border:2px solid #333}
  .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,
  .tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  .tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  .tabbed-toc .toc-content {border:none}
  .tabbed-toc .toc-line,
  .tabbed-toc .panel li time {display:none}

8.Ketik Deskripsi Penelusuran yang ada di pojok kanan atas misalnya : Daftar Isi blog …………..(namal blog/situs anda)…bla…bla…bla….

9.Buka Pilihan dan Centang Jangan….

10.Sebelum di Publish silahkan di Pratinjau dulu, dan jika sudah oke silahkan tutup halaman dan PUBLISH 

11. Jreng….lihat hasilnya.

Demikian tutorial Membuat DAFTAR ISI Blog  Tampil Otomatis ini semoga dapat membantu anda yang sedang bingung mencari referensi atau postingan tentang Daftar Isi atau Sitemap.

Jika artikel ini bermanfaat silahkan bagikan kepada teman blogger anda.

Terimakasih