Membuat Sitemap (Daftar Isi) Di Blogspot

Ada beberapa kode untuk membuat sit map atau daftar isi artikel yang telah kita posting. Silahkan anda masuk ke Blogger untuk buat halaman halaman baru. Kemudian edit dalam tampilan HTML dan copas salah satu kode dibawah ini ke halaman baru tersebut. Selanjutnya bisa dipublish untuk melihat hasilnya.

1. Contoh Sitemap kesatu

<div class="jontor">

<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>

<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=teknomia_Load"></script>

</div>

<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}

.jontor a{color:black;}

.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}

.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}

user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}

.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}

.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}

.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}

.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}

ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}

.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}

.new{color:red!important;font-weight:700;font-style:italic;}

user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}

</style>

Demo bisa dilihat disini

2. Contoh Sitemap kedua

<style scoped="" type="text/css">

#comments,#sidebar-wrapper {display:none;}

#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}

</style>

<div dir="ltr" style="text-align: left;" trbidi="on"> <style scoped="" type="text/css"> .table-of-content{background-color:#009688;color:#fff;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:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#009688;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial} 

.table-of-content .toc-header:hover{background-color:#009688} .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:#fff} 

.table-of-content .toc-header.active:before{border-color:#FF0000 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:#008B8B!important;transition:initial} .table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial} .table-of-content a:visited{color:#000;transition:initial} .table-of-content a:hover,.table-of-content a:visited:hover{color:#000;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: 'https://tokobahtera.blogspot.com/', containerId: 'table-of-content', showNew: 15, newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#32CD32;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://cdn.statically.io/gh/ardycool/sitemapku/master/sitemap.js"></script> </div>

Silahkan ganti URL yang berwarna merah dengan alamat blogspot saudara.

Demo bisa dilihat disini