Create HTML Sitemap For Blogger
What is an HTML Sitemap ?
An HTML Sitemap is basically a page that contains all the URL's that are published on your website, their categories and their time of upload, most conveniently in an tabular arrangement.
Why do we need to create it ?
Sitemaps are of two types : XML Sitemap and HTML Sitemap. XML Sitemap is basically created for robot and plays a very important role in search engine optimization whereas HTML Sitemap is created for user and contains all the URL's, their categories and time of upload in an tabular arrangement which is also known as "Table Of URL's". HTML Sitemap is created to enhance the user experience, For Example, whenever a user visits your website he finds it difficult to find all the URL's or his destined URL and because of which he leaves that site and thus to stop this we need a place where user can find all the URL's along with its categories and this is why an HTML Sitemap is created.
So, I hope that by now you have understood why do we need to have an HTML Sitemap for our website.
Now lets see -
How to create an HTML Sitemap for Blogger ?
So, To create it you just have to follow this simple steps given below -
Step 1 : Open your Blogger dashboard.
Step 2 : Create a new page, If you don't know how to create it then click on pages - then click on new page.
how to create a new page
Step 3 : Then open the html view and paste the below code.
<style>
#bp_toc {
color: #757;
margin: auto;
padding: ;
border: 1px solid #6E1907;
float: left;
width: 100%;
}
span.toc-note {
display: none;
}
#bp_toc tr:nth-child(2n) {
background: #E3E0D6;
}
td.toc-entry-col1 a {
font-weight: bold;
font-size: 14px;
}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3 {
background:#AB8B84;
}
.toc-header-col1 {
padding: 10px;
width: 250px;
text-align: center;
}
.toc-header-col2 {
padding: 10px;
width: 75px;
}
.toc-header-col3 {
padding: 10px;
width: 125px;
}
.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: #F7F3F2;
font-weight: 700;
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: 5px;
padding-left: 5px;
font-size: 12px;
}
.toc-entry-col1 a,
.toc-entry-col2 a,
.toc-entry-col3 a {
color: #0E0807;
font-size: 13px;
text-decoration: none
}
.toc-entry-col1 a:hover,
.toc-entry-col2 a:hover,
.toc-entry-col3 a:hover {
text-decoration:underline;
}
#bp_toc table {
width: 100%;
margin: auto;
counter-reset: rowNumber;
}
.toc-entry-col1 {
counter-increment: rowNumber;
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
content: counter(rowNumber);
min-width: 1em;
min-height: 3em;
float: left;
border-right: 1px solid #fff;
text-align: center;
padding: 0px 11px 1px 6px;
margin-right: 15px;
}
td.toc-entry-col2 {
text-align: center;
}
</style>
<div id="bp_toc">
</div>
<script src="http://mybloggerlab.com/js/
sitemap.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
Step 4 : Then click on Publish.
After publishing your HTML Sitemap page will be live. So, this was how you can create an HTML Sitemap Page.
Note : You need to add this sitemap page to your menu for displaying it to users and if you do not know how to add a page to a menu and then watch the youtube video on the top.
0 Comments