Membuat Daftar isi Otomatis Berdasarkan Label

Untuk memudahkan para pengunjung kita, yang kebingungan mencari artikel yang mereka butuhkan inilah suatu cara membantu para pengunjung blog yang kebingungan itu dengan cara membuat halaman Daftar Isi atau Sitemap artikel blog kita.

Daftar isi atau sering di sebut sitemap ini, bisa membantu para pengunjung blog kita yang mecari artikel yang mereka butuhkan

Sitemap juga bisa di fungsikan untuk menginformasikan kepada search engine ( Google misalnya ) tentang halaman-halaman pada situs kita yang bisa di crawl.

Bentuk paling sederhana Sitemap adalah berupa file .xml yang berisi daftar url sebuah situs beserta metadata-nya masing-masing. Metadata misalnya : kapan terakhir di-update.

Biasanya file sitemap.xml ini sudah otomatis ada dan bisa sobat lihat melalui URL ini:

http://namablogmu.blogspot.com/sitemap.xml

Penampakan file sitemap.xml tersebut kurang lebih seperti ini:

Sitemap bisa kita buat di halaman statis blog kita dengan cara berikut ini.

Widget yang saya bagikan ini merupakan hasil modifikasi dari widget yang dibuat oleh Arlina Design di blognya www.arlinadzgn.com.

Ok, Langsung saja berikut caranya :

Membuat Daftar isi Otomatis Berdasarkan Label

1. Buka Dasbor Blogger.
2. Buka Menu Halaman lalu buat Halaman Baru. 
3. Pindah ke HTML Lalu masukkan kode berikut:

<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#4e6cef}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#4e6cef;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>

<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'https://www.denylistianto.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    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://rawgit.com/Deny-Listianto/tips/master/Sitemap1.js"></script>
</div>

Ganti Kode url: 'https://www.denylistianto.com/' dengan url blog sobat, dan showNew: 15 adalah jumlah artikel yang akan di tampilkan dengan tulisan Baru/New

Terakhir Publikasikan dan lihat hasilnya.

Demo

Demikian tutorial Membuat Daftar isi Otomatis Berdasarkan Label, semoga bermanfaat, semoga bermanfaat.