How To Create HTML Sitemap Page on Blogger (UI Grid Designed Sitemap)

How To Create HTML Sitemap Page on Blogger (UI Designed Sitemap)

Hello friends! Welcome to another blogger blog tutorial, in this tutorial we will see how to create a sitemap page for blogger blog in a very simple way. It is unfortunate that there are no widgets and facilities for Blogger sitemap compared to WordPress which has a plugin called “Yoast SEO” which automatically creates and updates website sitemap. But, this is not a very big problem. You can also create a sitemap in Blogger. But coding knowledge is very necessary for that. But most of the new bloggers don't have coding knowledge.

What is HTML Sitemap?

By using an HTML sitemap, the visitor can easily navigate the entire site. An HTML sitemap is the creation of a single page on your website that contains links to all the category pages. If a visitor is having trouble finding the desired post or section on your website, you can use an HTML sitemap to help the visitor reach the desired page.

With a good HTML sitemap, the crawler can also reach orphaned pages. Many people prefer to have a link to the HTML sitemap in the footer.

How To Create HTML Sitemap Page on Blogger

  1. Open your Blogger Dashboard and Click the page Section
  2. After Creating the New Page and Covert to HTML View
  3. Now Paste the below script on your sitemap page.
  4. Now your sitemap page is ready to Use.

Demo

<!--[ 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=true&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}
  }
</style>

Video Guide

Final words

We hope this sitemap script is very helpful to you. if you like this article. please make subscribe our Youtube Channel. Thank you for reading...

Post a Comment