Konten Blog Ini Bebas Hak Cipta --- Presented By www.jokkajo.com
Ayo Baca Artikel Menarik Di JokkaJo.Com Klik Disini Subscribe

Script HTML Sitemap Keren, Responsive, Mobile Friendly, SEO

Kode html

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: ' &ndash; <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>
Selanjutnya...

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&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
Selanjutnya...

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&amp;load=true&amp;ad=false&amp;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}
  }
Selamat Mencoba...!
Baca juga :
"Sebaik-baik Manusia Adalah Yang Bermanfaat Untuk Manusia Lainnya" -Muhammad SAW-

Post a Comment

Tinggalkan Komentar Disini, Agar Tetap Diingat
© DIBALIK LAYAR. All rights reserved. This Site Developed by Jokka J