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

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

Blogger HTML Sitemap add

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"
Sitemap Create for blogger


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.
Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.

6 comments:

  1. Replies
    1. share a tutorial about this in next post. You may subscribe us

      Delete
  2. here is good design sitemap, check it down
    http://www.hiepb.com/p/sitemap.html
    Facebook Advanced User

    ReplyDelete
  3. We mainly use XML sitemap. But this is another HTML sitemap. Nice tutorial. Thanks for sharing with us.

    ReplyDelete