Assalamu Alaikum I am Mohammad Roman,Today I Will Show How to Make Html Sitemap Page For Blogger.Simply put Sitemap is the summary of all the posts on your website. With Sitemap Search Engine can easily understand how many posts are posted on your blog / website. As a result, any search engine indexes the content of your site in 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. Moreover, 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 multiple 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 was some problem with font for Bangla blog, it was solved. Hope you enjoy it. Demo from Here
How to add to the blog:
- Login to your blog first.
- Then click on Page 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.
<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://tricklab24.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadsitemap"></script>
</div>
#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://tricklab24.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadsitemap"></script>
</div>
EmoticonEmoticon