Search This Blog

Friday, August 13, 2010

Easily make HTML sitemap for your blog using Javascript

Note: HTML sitemap to facilate vistior (human) navigation only. If you are looking for a sitemap to submit to Webmaster, you will need an XML sitemap or a Google Sitemap.

A commentator at Blogger Tips and Tricks (HTML) Sitemap (Table of Content) said: "Hi Peter, This sitemap is really good and helpful. I would like to add a sitemap like this one to my blogger blogs. Can you please give me a detailed reply on creating a sitemap like this and loading it to blogs and then to Webmaster tools."

Fortunately for me, that is not difficult a task for all you need to do is to first create a post or better, a static page, making sure you are in the Edit HTML mode, copy the following Javascript:

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://myblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


and paste it into the post editor/page editor making sure to replace http://myblog.blogspot.com with the actual URL of your blog. To make this clearer, below are 2 examples of the codes I used to create such HTML sitemaps of 2 of my blogs, one of which is Blogger for Dummies sitemap which is a blogspot blog with the URL http://bloggerfordummies.blogspot.com:

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://bloggerfordummies.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


and the other Blogger Tips and Tricks Sitemap which is a custom domain with my own registered domain name http://www.bloggertipsandtricks.com without the blogspot in the URL:

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.bloggertipsandtricks.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


Note that such HTML sitemap generated by the above Javascript automatically updates each time you publish a new post and is fuss and maintenance free.

Regarding submitting to Google Webmaster, the above generates a HTML sitemap and not a XML sitemap so is not suitable for submission to Google Webmaster, but it would be instructive to hear what Matt Cutts of Google have to say about HTML sitemap.

Regarding XML sitemap, perhaps for now refer to Adding Google sitemap to your blog. I will follow up with another post on sitemaps later.

Acknowledgement: We are indebted to Abu Farhan for the Javascript used in this post.

25 comments:

  1. hi, sorry but i don't know where else to ask this...
    i have been blogging for quite a while and i somewhat know how to handle html but im having a hard time editing my template.
    this is my blog http://livingamericana.blogspot.com
    what i would like is to change the colors, maybe add a wallpaper image as the background, change the color of the sidebar etc...
    do you think you could help me?

    ReplyDelete
  2. I'm new to your site and Blogger. I tried your "Easily make HTML sitemap"... and it doesn't populate my static page in Blogger. Perhaps my src="http: is wrong?

    Will it pick up posts already published or only new ones?

    ReplyDelete
  3. The script used for this is dependent on a third party and if that failed us then it wouldn't populate the page. Perhaps that is what happened because the same thing happened to this test site map. Will need further checking because this Blogger Tips and Tricks sitemap is still populated with links. Perhaps I need to make a new entry and see if that gets added to the sitemap.

    ReplyDelete
  4. Hi, I've searched through your page but couldn't find anything. I have two questions. First I was wondering if you knew how I could make the comment line's design more like http://facehunter.blogspot.com/, if you know what I mean? I've tried to explain it to a lot of people, but no one understands.. Second, when I upload a picture and press the X-large button, the image gets kind of blurry. How do I post a X-large picture without making it blurry?

    I would be so thankful if you helped me!

    ReplyDelete
  5. when i am submitting HTML site map in webmaster tools it shows URL contains illegal characters

    ReplyDelete
  6. I am sorry I should have added a note that this sitemap is a HTML sitemap which is not meant for submission to webmaster. For that you will have to submit a Google Sitemap

    ReplyDelete
  7. Thank you very much for the good trip

    ReplyDelete
  8. oke this is nice post and that i'm find to make sitemap on infolusion, that is my blog.

    ReplyDelete
  9. I was able to add this sitemap, but I want it to be centered under my title and currently it is left justified, how can I fix this?

    ReplyDelete
  10. nice blog.. have a view of my blog when free.. http://www.lonelyreload.blogspot.com .. do leave me some comment / guide if can.. if interested can follow my blog...

    ReplyDelete
  11. i m still confused of how to make a sitemap of my blog www.toppakjobs.blogspo.com i submit feed in gooogle webmaster tools but urls in web index show no more than 25 links always.please help me in this regard.

    ReplyDelete
  12. There are 2 types of sitemap - HTML sitemap and Google Sitemap. The one described in this post is HTML sitemap which comprises active clickable links to all your posts in your blog.

    ReplyDelete
  13. Nice tutorial..it's look like abufarhan.com was parked for monetize from adsense...hehehe :P

    Trims. <a href="http://blog.mouzella.com>Blogger Pemula</a>

    ReplyDelete
  14. is it possible to do with other blogs?
    like wordpress?

    ReplyDelete
  15. Wordpress.com don't allow you to edit the template so can't but you can for wordpress.org

    ReplyDelete
  16. This blog Is very informative , I am really pleased to post my comment on this blog

    Share tips

    ReplyDelete
  17. must remember to edit HTML mode before save and publish that javascript.it work but wait for a while for their process.dont worry if your post only out name of post[sitemap].it work..but if you not edit for html[i means you save and publish post in compose mode] they out with all javascript that you have paste to save and publish on your post.it not work..hehe.

    ReplyDelete
  18. Trusting a 3rd party script makes me a little leary, especially after seeing only 1 comment as to how this worked for someone.

    ReplyDelete
  19. Thanks alot for this works great.

    Kevin From: www.downloadfreewindowssoftware.com

    ReplyDelete
  20. I needed some thing else . The SITEMAp should be According to date and not labels.
    AND it makes my Template ugly , Ispend days to make it attractive . http://music-tapleaks.blogspot.com

    ReplyDelete
  21. I have four blogs with blogspot platform. so, I can try this tips blogging on my blogs. thank you so much

    ReplyDelete
  22. I can't create sitemap for my blog - Free Apps For Android

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications