DIBALIK LAYAR - Sitemap atau peta situs menjadi halaman rujukan bagi pengunjung jika ingin mencari artikel pada situs tertentu, berikut saya bagikan script sitemap keren, didukung optimasi mesin pencari (SEO), Mobile Friendly, dan juga tidak membuat situs loading.
Gunakan TOC yang berkedip biru di samping untuk memudahkan melihat semua bagian, ingat Tunggu beberapa saat agar tampilan sitemap muncul
1. Script Sitemap yang menampilkan artikel hanya sesuai label yang dipilih
Sedang Mengambil Data . . .
Salin Script dibawah ini untuk tampilan Sitemap Diatas
<link href="https://cdn.rawgit.com/penaindigo/project/d4a73206/penaindigocom.css" rel="stylesheet"></link>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Sedang Mengambil Data . . .</span></div>
<script>
var tabbedTOC = {
blogUrl: "https://supportjo.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: ' – <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>
2. Script Sitemap yang menampilkan keseluruhan artikel
Salin Script dibawah ini untuk tampilan sitemap diatas
<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://supportjo.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>3. Sitemap Ala Median UI 1.6 (Dokumen resmi dari owner median ui
Salin script dibawah ini untuk tampilan sitemap diatas
<!--[ Sitemap script DTE, source: dte.web.id/teknis/widget-daftar-isi-tabulasi-blogger ]-->
<script src='//dte-project.github.io/blogger/tabbed-toc.min.js?active=0&load=true&ad=false&date=%25M~%25%20%25D%25%2C%20%25Y%25' defer='defer'></script>
<style>
.tabbed-toc{border:0;font-size:15px}
.tabbed-toc-tabs{width:10em;font-size:14px}
.tabbed-toc-tab{padding:0 15px;border-radius:3px 0 0 3px;position:relative;transition:var(--trans-1);color:inherit}
.tabbed-toc-tab::after{content:'';position:absolute;top:0;bottom:0;right:0;border-right:1px solid var(--linkC);opacity:0}
.tabbed-toc-tab:hover, .tabbed-toc-tab.active{background:var(--transB)}
.tabbed-toc-tab:hover::after, .tabbed-toc-tab.active::after{opacity:1}
.tabbed-toc-tab.active{color:var(--linkC);opacity:.7}
.ltr .tabbed-toc-panels{border-color:var(--contentL)}
.ltr .tabbed-toc-time{position:relative;font-size:12px;opacity:.7}
.tabbed-toc li{padding:5px 7.5px;line-height:1.6em;min-height:40px;display:flex;align-items:center;justify-content:space-between}
.tabbed-toc li >*{padding:0 7.5px; margin:0}
.tabbed-toc a{color:inherit}
.tabbed-toc-title{font-size:16px}
.tabbed-toc-title sup{font-weight:400;font-size:12px;color:var(--linkC)}
.drkM .ltr .tabbed-toc-panels{border-color:rgba(255,255,255,.1)}
.drkM .tabbed-toc-tab.active, .drkM .tabbed-toc-title sup{color:var(--darkL)}
.drkM .tabbed-toc-tab::after{border-color:var(--darkL)}
@media screen and (max-width:750px){
.tabbed-toc nav{display:flex;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch; /*position:relative;width:calc(100% + 40px);left:-20px;right:-20px;padding:0 20px*/}
.tabbed-toc nav::-webkit-scrollbar{width:0;height:0}
.tabbed-toc nav::-webkit-scrollbar-track{background:transparent}
.tabbed-toc nav::-webkit-scrollbar-thumb{background:transparent;border:none}
.tabbed-toc-tab{border-radius:3px 3px 0 0;white-space:nowrap;flex-shrink:0;scroll-snap-align:start}
.tabbed-toc-tab::after{top:auto;left:0;border-right:0;border-bottom:1px solid var(--linkC)}
.tabbed-toc ol{margin-top:15px;padding:0 15px;list-style:decimal}
.tabbed-toc li{display:list-item;padding:5px 0;overflow:visible;list-style:inherit}
.drkM .tabbed-toc-tab::after{border-color:var(--darkL)}
}
@media screen and (max-width:500px){
.tabbed-toc-title{font-size:15px}
}