Cara Membuat Daftar Isi Sederhana dan Otomatis di Blog Sesuai Tanggal dan Bulan Terbit

Widget archive atau daftar isi atau sitemap merupakan laman khusus yang memungkinkan pengunjung melihat seluruh daftar artikel yang terdapat pada blog yang sedang dikunjunginnya. Terdapat banyak versi daftar isi yang ada di luar sana. Namun yang paling mendukung untuk pengguna template mobile friendly, teknik archive atau daftar isi yang saya bagikan kali ini mendukung hal tersebut. 

Selain itu, cara ini benar-benar telah divalidasi HTML5 dan CSS3, sehingga tidak perlu merasa khawatir menggunakannya bagi anda yang menerapkan validasi HTML5 dan CSS3 di template blogger anda.

Berikut ini widget daftar isi dengan versi tampilan untuk tanggal dan bulan terbit dengan penerapan fitur valid CSS3 dan HTML5. Silahkan ikuti langkah penerapannya berikut ini.

Kode Membuat Daftar Isi di Blogspot Secara Otomatis

<style type='text/css'>
/* Daftar Isi */
.table-of-content {
  background-color:#333;
  border:2px solid #fafafa;
  font:normal normal 11px/normal Verdana,Geneva,"DejaVu Sans",Tahoma,Arial,Sans-serif;
  color:#999;
  margin-bottom:5px;
  overflow:hidden;
  box-shadow:0 1px 2px black;
}
.table-of-content .toc-header {
  margin:0;
  padding:10px 15px;
  overflow:hidden;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  color:#bbb;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  background-color:#3a3a3a;
  margin-bottom:1px
}
.table-of-content .toc-header.active,   .table-of-content .toc-header:hover {
  color:#efefef;
  background-color:#248AB0;
}
.table-of-content .loading {
  display:block;
  padding:10px 15px;
  text-decoration:blink;
}
.table-of-content ol {
  margin:0;
  padding:0;
  list-style:none;
}
.table-of-content li {
  line-height:normal;
  margin:0;
  padding:5px 5px 5px 15px;
  white-space:nowrap;
  text-align:left;
  overflow:hidden;
border-bottom:1px solid #2f2f2f
}
.table-of-content li:first-child {border-top:none}
.table-of-content li:last-child {border-bottom:none}
.table-of-content a {
  color:#5687f8;
  text-decoration:none;
}
.table-of-content a:hover {text-decoration:underline}
.table-of-content a:visited {color:#5687b8}
.credit-link {
  text-align:right;
  margin-right:2px;
}
.credit-link a {
  font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;
  color:#333;
  text-decoration:none;
}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat...</span></div>
<script type="text/javascript">
var toc_config = {
    url: 'https://www.bungfrangki.com',
    containerId: 'table-of-content',
    monthNames: [
        'Januari',
        'Februari',
        'Maret',
        'April',
        'Mei',
        'Juni',
        'Juli',
        'Agustus',
        'September',
        'Oktober',
        'November',
        'Desember'
    ],
    oldestFirst: false,
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/bungfrangki/sitemap/c240a5e7/accordion-toc-2.js"></script>

Atau jika ingin menyingkat kodenya, maka akan menjadi seperti ini.

<link rel="stylesheet" href="https://cdn.rawgit.com/bungfrangki/sitemap/c240a5e7/archive.css"/>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat...</span></div>
<script type="text/javascript">
var toc_config = {
    url: 'https://www.bungfrangki.com',
    containerId: 'table-of-content',
    monthNames: [
        'Januari',
        'Februari',
        'Maret',
        'April',
        'Mei',
        'Juni',
        'Juli',
        'Agustus',
        'September',
        'Oktober',
        'November',
        'Desember'
    ],
    oldestFirst: false,
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script><br />
<script src="https://cdn.rawgit.com/bungfrangki/sitemap/c240a5e7/accordion-toc-2.js"></script>

Ubah yang ditandai pada kode di atas dengan nama blog anda.

Cara Pemasangan Daftar Isi di Laman Blogger

Masuk ke dashboard blog, klik Laman > Laman Baru.

Buatlah judul laman, misalnya “Daftar Isi” lalu klik HTML. Kopi kode di atas lalu masukkan ke dalam laman tersebut.

Solusi Widget Daftar Isi Otomatis Tidak Tampil

Akibat pembuatan widget archive/daftar isi/sitemap yang tidak tampil ialah kemungkinan besar pada template blog tidak dilengkapi dengan Jquery seperti berikut atau versi lain.

<script src='//code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'></script>

Letakkan kode Jquery di atas tepat di atas kode </head> lalu jangan lupa klik simpan template.

Penutup...

Masih terkait: Cara Membuat Sitemap/Daftar Isi Berdasarkan Label Secara Otomatis

Demikian artikel ini, semoga membantu.

http://www.dte.web.id/2011/11/widget-daftar-isi-akordion-dengan.html