How to Create Blogger HTML Sitemap Page or add HTML Sitemap in blogger.

Hello my dear friends, today i am going to show how to add a HTML Sitemap in blogger. From this case today i am a Sitemap creator :P. Okay now come to main point. I think every blogger's have an clear idea about sitemap. yeah, Sitemap is a most important part of SEO (Search Engine Optimization). When Google Bot  comes on your page for Index, then it find your sitemap. If you add a sitemap page then Google Bot easily find your all content and content's page for indexing.

If your search on google for Site map Builder then you will found millions of results. But those are not for you if you run a blogspot or blogger site. If your searching for auto sitemap generator or auto sitemap builder then its are not be valuable for you. Cause you are running blogspot site. Now you have make HTML Sitemap  manually. That's why i am preset here for this tutorial. 

How to add HTML sitemap page in blogger?

Yes, it is an common fact. By this article you should easily make a HTML Sitemap for your blogger site. This sitemap is for blogger. Now lets start,

Step 1: Create a new page and give the title "Sitemap"

Step 2: Click oh HTML tab and copy the below code and past on your HTML Section

<script src="https://ms-design.googlecode.com/svn/Sitemap.js" type="text/javascript"></script>
<script src="http://msdesign92.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<div style="display: none;">
</div>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 {background:#fff;border-bottom:1px solid #fafafa;color:#444;font-size: 20px;margin: 0 0 10px 2px;padding: 0 0 10px;}
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a {background:#fff;color:#444;display:block;border-bottom:3px solid #f0f0f0; font-size: 14px; line-height: normal; outline:none;padding:10px 15px;transition:all .25s ease-in-out;}
.ct-columns-3 p a:hover {background:#02a4e5;color:#fff;border-bottom:3px solid #0392cb;}
.ct-columns-3 p span{color:#fff!important;font-style:normal!important;font-weight:normal!important;}
@media screen and (max-width: 768px){ .ct-columns-3 {-moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style></div>

Note: "msdesign92.blogspot.com" replace it with your blog url.

Now Publish your page. That's it... If you think this article is helpful then don't forget to share. Cause your support is our future. Thanks.

Tags

HTML tutorial Web Tools

Zorex Zira

I'm A Web Designer And Developer, Stay Connect with us. facebook twitter instagram youtube external-link

Related Posts