Membuat Sitemap Responsive Di Blog

Membuat sitemap responsive di blog dengan kode HTML pada laman dapat memudahkan pengunjung untuk melihat semua konten yang terdapat pada blog. Kali ini saya akan share bagaimana cara membuat sitemap responsive di blog. Halaman sitemap / daftar isi berisikan list artikel atau post yang akan dikelompokkan berdasarkan label, karena pada blogspot tidak ada kategori seperti blog.

Gambar diatas adalah contoh sitemap yang saya gunakan dengan fitur responsive. Pada artikel sebelumnya saya sudah membuat artikel tentang Cara Membuat Sitemap Otomatis Di Blog. Namun kali ini saya akan share sitemap yang sedikit berbeda dengan tampilan yang lebih menarik untuk di pandang oleh pengunjung. 

Sitemap yang berarti 

Halaman yang menampilkan semua artikel pada blog berdasarkan kategori masing-masing secara otomatis.

Langkah membuat sitemap responsive adalah :
1. Login ke blog.
2. Pilih menu laman pada dashboard dan buat halaman baru…
3. Silahkan pilih mode html dan copy script di bawah ini..

<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:#fc4f3f}
.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:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>

<br />
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'http://banggarong.net/',
    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/ardycool/sitemapku/master/sitemap.js"></script>

</div>

4. Klik save lalu publishkan...

Note :

Ganti tulisan berwarna merah dengan URL blog kalian

Share this post