How To Create Stylish HTML Sitemap Page In Blogger?

Create Stylish HTML Sitemap Page In Blogger; How do I create a HTML sitemap for Blogger? Can a sitemap be HTML? How do I find my sitemap on Blogger?

What Is A Sitemap? What Does Site Map mean?

A site map (or sitemap) is a list of pages of a website. A site map is a model of a website's content designed to help both users and search engines navigate the site. A site map is a visual or textually organized model of a Web site's content that allows the users to navigate through the site to find the information they are looking for, just as a traditional geographical map helps people find places they are looking for in the real world.

Table of Contents...
html-sitemap-imamuddinwp

A site map is a kind of interactive table of contents, in which each listed item links directly to its counterpart sections of the Web site. Site maps perform the same service that the layout maps in large shopping malls perform: without them, it is possible to explore a complex site by trial and error, but if you want to be sure to find what you're looking for, the most efficient way to do that is to consult a model of the resources available.

Features of HTML sitemap page for Blogger

  • Sorted alphabetically (A to Z).
  • Lists blog posts based on labels.
  • Automatically adds "New" tag to latest articles.
  • Labels are neatly separated.
  • A lightweight Javascript used.
  • Beautiful color combination.
  • Blog posts are numbered automatically on each labels.
  • Easy for users to navigate through the posts.

Typically, site maps are organized hierarchically, breaking down the Web site's information into increasingly specific subject areas. Many sites have user-visible sitemaps that present a systematic view, typically hierarchical, of the site. These are intended to help visitors find specific pages, and can also be used by crawlers. Alphabetically organized site maps, sometimes called site indexes, are a different approach.

Benefits Of A Sitemap To Users And Search Engines

Let's discuss on Benefits Of A Sitemap To Users And Search Engines.

Benefits Of A Sitemap To Users

The user benefits from sitemap because they can go and if they can’t find a page of your site through the main navigation they can actually, go and look at your sitemap and possibly find the information there. If you have a large site, using a sitemap can actually break down your site into smaller sections by categories or alphabetically, labels, authors, etc. So, creating a sitemap for your site is very beneficial for your users in helping them to find information on your site.

Benefits Of A Sitemap To Search Engine

Search engines can go and crawl your sitemap and find all the different pages of your site. So, it will help your site get indexed and also for SEO purposes in order to help certain page rankings.

Steps to add an HTML sitemap in Blogger

  • Step-1: Go to your Blogger Dashboard and open the Page section.
  • Step-2: Create a new page and switch the Editor to HTML view.
  • Step-3: Now copy the below code and paste it into it.
  • Step-4: Now set the title as Sitemap and publish the page.

Now you have successfully created your stylish HTML sitemap on the Blogger website.

Stylish HTML Sitemap Page In Blogger Demo

Stylish HTML Sitemap Page In Blogger Demo.

html-sitemap-imamuddinwp

Code for HTML sitemap:

Code for HTM sitemap:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-u3JpsnxyAQHEy1xJDmwzCKsHe02OtZfthIygNjgH5vYJr8xUPoywEzn9TZklDoD7igFDbExspj5iGslK0D40toA5TmPzDO_ZCZB0s8bd_pJ4tMxtpw4FH6jcBhED8gIGzNTSpVqBm7q/s1600/Sitemap+Arlina+Code.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-u3JpsnxyAQHEy1xJDmwzCKsHe02OtZfthIygNjgH5vYJr8xUPoywEzn9TZklDoD7igFDbExspj5iGslK0D40toA5TmPzDO_ZCZB0s8bd_pJ4tMxtpw4FH6jcBhED8gIGzNTSpVqBm7q/s1600/Sitemap+Arlina+Code.png" title="Sitemap Arlina Code" /></a></div>

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style>

If you have any question related this article then feel free to ask me, on the comment section. Best of luck and create your own html sitemap page for blogger.

Tags:

  • How do I add an HTML sitemap to Blogger?
  • How do I create a sitemap for Blogger?
  • Can a sitemap be HTML?
  • How do I create a sitemap in HTML?
You may also like...

About the author

Imam Uddin
Howdy! It's me! Imam Uddin, imamuddinwp. A passionate SEO Expert, Freelance Digital Marketer, Shopify Expert, and Web Designer. Founder Of NextGen Digital. Find me in google by 'imamuddinwp'.


3 comments

  1. My Prime Journey
    My Prime Journey
    We Website Designing Company in Chicago, Build User & SEO Friendly websites with customized features and designs all according to the needs and requirements of our clients.
  2. faisal ayub
    faisal ayub
    Thanks Imam i really like this post, its help me to style my Blogger Sitemap.
    1. Imam Uddin
      Imam Uddin
      Hi @Faisal, Thanks And Great! Carry on bro...
Pls, don't spam or share any sensitive or personal details here. Thank you for being with us.

Join the conversation