How To Create UI Grid Designed HTML Sitemap on Blogger
 |
| UI Grid Designed HTML Sitemap on Blogger |
Hello there, friends! Welcome to another blogger blog tutorial. In this tutorial, we will see How to easily create a sitemap page for a blogger blog. Unfortunately, Blogger sitemap lacks widgets and facilities when compared to WordPress, which has a plugin called "Yoast SEO" that automatically creates and updates website sitemaps. However, this is not a major issue. A sitemap can also be created in Blogger. However, coding knowledge is required for this. However, the majority of new bloggers lack coding knowledge.
What Is a Sitemap?
A sitemap is a blueprint for your website that assists search engines in finding, crawling, and indexing all of its content. Sitemaps also inform search engines about the most important pages on your website.
A sitemap is an XML file that contains links to all of your website's important pages. You may have already realized that this is extremely useful for websites with a large amount of content, and you would be correct! Simply put, it's a map that shows visitors how to get to specific areas of your website. It's a list that maps all the parts of your website that you want search engines to know about, giving you complete control over what appears in search results.
A sitemap can help search engines like Google crawl your website more thoroughly and ensure that no important pages are missed. That means they will all be ranked in search engine results.
What is HTML Sitemap?
With an HTML sitemap, a visitor can easily find their way around the whole site. An HTML sitemap is a single page on your website that has links to all the category pages. If a visitor can't find the page or post they're looking for on your website, you can use an HTML sitemap to help them find it.
With a good HTML sitemap, the crawler can also find pages that have been left behind. In the footer, many people like to have a link to the HTML sitemap.
How To Create HTML Sitemap Page on Blogger
- Open your Blogger Dashboard and Click the page Section
- After Creating the New Page and Covert to HTML View
- Now Paste the below script on your sitemap page.
- Now your sitemap page is ready to Use.
<!--[ 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=true&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>
In this article, I explain How To Create UI Grid Designed HTML Sitemap on Blogger.If you have any problems with the code or questions, feel free to ask them in the comments or join our Telegram Group to talk about them.
Farhan
Hello there, My Name is Farhan and Welcome To My Website. My Passion is to Share Knowledge With Everyone. Also I am a Larner.
