Create an interesting HTML Sitemap page in Blogger

Simply put Sitemap is the summary of all the posts on your website. With Sitemap, Search Engine can easily understand how many posts you have on your blog / website. As a result, any search engine indexes your site's content index to search results. This is the search engine of your blog / website submissions in various search engines. But I will show that the HTML Sitemap page is created for your readers. Through which readers will know how many posts are posted on your blog. Apart from this, the advantage is that this HTML Sitemap Page will show each label separately. Visitors can easily access their favorite links. Besides, new posts will automatically indicate that no new post will be posted. This post may have been many times in different blogs. I still share it again, because I've got all kinds of browsers compatibility to add new features to it. Which will make it more interesting. Besides, there were some problems of font for Bangla blog, it was solved. Hope you enjoy it. From here you can see the demo

How to add:

• First login to your blog.
• Then click on Pages from Blogger Dashboard.
• Now click on Create a New Page.
• Then click on the HTML of the page.
• Copy the code below and paste it on the HTML page.

[code start] <style type="text/css">

#sitemap {
   width:100%;
   margin:5px auto;
   margin-left: 4px;
   border:1px solid #23A839;
   border-top:0px solid #2D96DF;
}
.label {
   color:#FF5F00;
   font-weight:bold;
   margin: -16px -1px 0px;
   padding:1px 0 2px 11px;
   background: -webkit-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Firefox 3.6 to 15 */
   background: linear-gradient(right,#6DFC85 0%,#23A839 40%); /* Standard syntax */
   border:1px solid #23A839;
   border-radius:0px;
   -moz-border-radius:0px;
   -webkit-border-radius:0px;
   display:block;
}
.label a {color:#fff;}
.label:first-letter {text-transform:uppercase;}
.new {
   color:#FF5F00;
   font-weight:bold;
   font-style:italic;
}
.postname {
   font-weight:normal;
   background: -webkit-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Firefox 3.6 to 15 */
   background: linear-gradient(right,#6DFC85 0%,#FFF 40%); /* Standard syntax */
}
.postname li {
   border-bottom: #DDD 1px dotted;
   margin-right:5px
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
</style>

<div id="sitemap">
<script type="text/javascript" src="https://cdn.rawgit.com/prozokti/rashid/master/sitemap.js"></script>
<script src="https://www.kawsar360.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadsitemap"></script>
</div> [code end]

• Now replace the address of your own blog url on www.kawsar360.com
• Finally click on the Publish button.
• That's all