Professional Magazine Blogger Templates Read More ×

Tuesday, March 03, 2015

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

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!
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.
SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

7 comments:

  1. How make to sitemap full page? :(

    ReplyDelete
    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