How to add a stylish HTML sitemap in Blogger - Here is a Simple step by step guide

A sitemap is a file where you provide information about the post, pages, videos, and other files on your website.

Today In this article, we will learn How to add a stylish HTML sitemap in Blogger and set up an HTML sitemap in Blogger.

How to add a stylish HTML sitemap in Blogger

Before set up a Sitemap on our blog website, let's understand what is a sitemap and what are the advantages of having a sitemap on a blog or website.

What is a sitemap?

A sitemap is a file where you provide information about the pages, videos, and other files on your site. It helps Search Engines like Google, Bing, Yahoo to crawl your site efficiently and eventually indexing of pages done quickly.

It tells the search engine about essential pages and files of your website and also provides valuable information about these files.

For example, it helps in identifying information like the last update and how often the page is changed, and any alternate language versions of a page.

Types of sitemaps:

There are two types of sitemaps available there are –

  1. HTML Sitemaps
  2. XML Sitemaps

XML Sitemaps are further divided into the following types:

  • News Sitemaps
  • Mobile Sitemaps
  • Image Sitemaps
  • Video Sitemaps

How to add an HTML sitemap in Blogger

Today we learn you How to add stylish HTML sitemap in Blogger as we mention on starting this article.

A HTML sitemap is an HTML page on which all subpages of a website are listed in an single page, generally it is found in the Footer area of the all popular website.

HTML sitemaps are mainly created for Visitors, for they help them to get an overview of the structure of your site and to navigate through all the subpages of your website easy way.

To add a stylish cool looking sitemap to your Blogger website you need to add an HTML code and create a page named sitemap.

  STEP –1   Go to your Blogger Dashboard and Click on the Page

  STEP –2   Now Create a new page and switch to HTML View

  STEP –3   Now set the title as Sitemap and Click on option

  STEP –4   Now copy the below code and paste in the page and published.

Here is the Code for HTML sitemap

<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.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://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.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>

Note: if you not avail copy above Code or face any problem! I will provide 2 Direct download link below—

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

After publishing the page sitemap is auto-generated with all subpages and post . You can see Post name, date, and label name in a tabular form. You can also check the demo on our Sitemap page in the Footer section.

Note : This sitemap HTML code Created by Arlina Design

Conclusion

You like this post? You think this article helpful for you? If yes! Please share your feedback about this new stylish HTML sitemap on Blogger and do share with your friends.

If you face any problem creating this page ask me in the comment section or contact us on telegram.

Debashis

Debashis is a Young Entrepreneur Blogger having Good Technical skills, He also an Experienced Article Writer. He likes to Share Knowledge and Experience with People. facebook whatsapp telegram instagram

Post a Comment

To be published, comments must be reviewed by the administrator.

Previous Post Next Post