How to Add an HTML Sitemap Page in Blogger

Are you looking to create an HTML Sitemap in WordPress? HTML Sitemaps are different from XML Sitemaps that you submit to search engines to improve your crawelling rate or get a quick indexsation of your new posts. HTML Sitemaps, shows an organized list of your published posts, just like a table of content. In this article, we will show you how to add an HTML sitemap page in Blogger

XML Sitemaps vs HTML Sitemaps

An XML created with the help of an XML markup language and are especially intended for search engines. You can create and submit your site's XML sitemap in webmaster tools, which will not only improve your site's crawling rate but also quick indexation of your site.

On the other hand, HTML sitemaps are created with plain Hyperlink Text Markup Language and are especially intended for your website visitors. It is usually used to list all the post or pages that are published on your site.

You can check the demo of this widget here.

Adding an HTML Sitemap With All Posts in Blogger:

To add a HTML sitemap in blogger please follow the below instructions correctly:

The very first thing you need to do is to add the CSS codes so you can make your sitemap look attractive. Go to Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag and just above it paste the following code. You can also customize the below codes to match your style of template color scheme:

/* Sitemap plugin By MyBloggerLab */
#bp_toc {
color: #666;
margin: 0 auto;
padding: 0;
border: 1px solid #d2d2d2;
float: left;
width: 100%;
}
span.toc-note {
display: none;
}
#bp_toc tr:nth-child(2n) {
background: #f5f5f5;
}
td.toc-entry-col1 a {
font-weight: bold;
font-size: 14px;
}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3 {
background:#9E9E9E;
}
.toc-header-col1 {
padding: 10px;
width: 250px;
}
.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: #fff;
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: #666;
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: 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);
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;
}

Once everything is done, press Save Template button present at the very top of your screen.

Now Simply create a new page where you want to display your sitemap. Go to Blogger >> Pages >> New page. In the Blogger page editor, select HTML tab and paste the following code in the HTML code editor:

<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>

After pasting the above code, you can write a title of your page. If you wish you can also disable comments because you would not like people posting comments on your sitemap. Once everything is done, press Publish button.

We hope this article helped you learn how to add an HTML sitemap page in Blogger. If you enjoyed this article please share your thoughts in comments section below.

Top 4 Best Email Marketing Tools to build your blog Audience

You can either make one time sales, or you can accumulate wealth, wealth disguised as Emails, and keep making money forever, your choice. If you passed your 5th grade in one go, I'd say you're smart enough to go with option #2. Well, that's a good choice. But people won't just give you their E-mails, right? You need to have a system in place, to scrape it off of them, without pissing them off, so that they actually pay attention to your Emails in their inboxes. Now, you can use a variety of tools for the task. But what makes most of the impact is, the design. That's what people notice before they notice anything else, ofcourse you need to have advanced options too. In this article, we will show you the top 4 best Email marketing tool to build your blog audience so you can make most of every user. 1. GetResponse: The reason for me listing GetResponse right at the top is pretty simple. Cause, it's the best. As far as feature, service and the price is concerned.

Moborate

Search This Blog