Add a Sitemap to your blog

This should be a simple and short tutorial because it only involves 4 lines of code copied and pasted to a page or new post. You'd think it should be a short tutorial but after thinking about this topic I decided to add some "NEED TO KNOW" information about this widget that will help you immensely. Please read this tutorial from beginning to end before adding the sitemap code to your blog.

Sitemaps on a website are always very useful. It is a known fact that when a visitor becomes stuck, either because of poor navigation, not knowing where to look for something, or is just having a hard time finding what they are after, they will always turn to a sitemap or table of contents page if they can find it. If they cannot find either page they will leave your website or blog and go elsewhere.

Some months ago I found several sitemap/table of contents widgets. I wanted to add one to one of my other blogs. I tried a few of them out but most of them were really complicated, and I had to add the urls manually into the sitemap.

To be honest I don't like wasting my own time trying to achieve something. Having a sitemap on any blog, even if it is not submitted to Google or some other place, is a really wonderful thing. People will stay on your blog a lot longer simply because you have a sitemap or table of contents page.

Of all the Sitemap widgets/code out there, I am going to give you the code for the best one available, and talk about it a bit more.

Below is the code for the same sitemap that I am using on this blog. I located this sitemap widget at http://www.abu-farhan.com

Here is the sitemap widget code:

<script src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js">
</script><script src=http://bloggertutorialsabforeveryone.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc>
</script>

That's all there is to it, just six lines of code.

Now, before you add the six lines of code to your own blog, THERE IS SOMETHING YOU NEED TO KNOW ABOUT THIS WIDGET. The sitemap will not have a white background as it is supposed to, if you have, let's say, a blue coloured background for your posts. I don't know why that is so, but that is just how it is with this widget. SO, BEFORE YOU ADD THIS WIDGET TO YOUR BLOG PLEASE CHANGE THE COLOUR OF YOUR POSTS' BACKGROUND TO A WHITE OR VERY PALE COLOUR THEN SAVE YOUR TEMPLATE. This you must do otherwise the sitemap will simply not display properly, or at all. If you don't change the colour of your posts background you will have to delete the widget and start all over again.

HOW TO ADD THE SITEMAP CODE TO YOUR BLOG:
Firstly you need to think about where you are going to put the sitemap on your blog. The best place to put the sitemap code is in one of the ten static pages that you have on your blog. But if you have used up all your ten static pages, then simply place the Sitemap code into a new post.

Once you have figured out where you want to put the sitemap, you can now copy the six lines of the sitemap code and paste it into the 'EDIT HTML" tabbed section - the tabbed section appears when you are editing a post or static page. Do not paste the code into the "Compose" section.

With the sitemap code pasted in the "Edit HTML" section of the post or page, if you click on the "Compose" tab nothing will show up. All that you will see is an empty white page and it looks like nothing has been added to that section at all. If nothing at all shows up in the "Compose" section then the sitemap code is working properly. The blank white page in the "Compose" section is exactly what is supposed to happen, so do not think you done something wrong. You have not done anything wrong - in fact, you added the code correctly.

I do not know why the sitemap code is supposed to go in the "Edit HTML" section, but what I do know is if you place the code in the "Compose" section the whole sitemap widget will not work and it will only display some of the javascript code itself if you click on publish then view that post or page. So just remember, place the code into the "Edit HTML" section, and it will display perfectly.

Now before you click on "save" you have to change the url in blue to your own url. If you do not change the url one of two things will happen. 1. The sitemap will not display anything at all. Or, 2. The sitemap will retrieve all my information from my blog and will add it as your own sitemap's content. So, please change my blog's url to your blog's url - only the part in blue remember, and then click on "save". That's all that you have to do.

BUT HOW DO I CHANGE THE LOOK OF THE SITEMAP ITSELF TO DISPLAY OTHER HEADINGS?
For the time being you may like the overall look of your new sitemap but after looking at it you may want to change how everything is listed in the sitemap itself. Well, let me tell you a little secret: Everything listed in your sitemap is entirely dependant on what "Labels" you give each post. Each "Sitemap HEADING" is actually an individual "LABEL" for each blog post.

Confused? Okay, let me tell it this way, and hopefully you will understand it better. Every time you add a new label to a blog post those labels become individual "HEADINGS" in your sitemap. For example, I have only added "Blogger tutorials" as this post's labels. The moment I publish this post that label will automatically be added as a new "HEADING" in my sitemap.

Underneath each "HEADING" in the sitemap will be a list of blog posts that will have the same labels attached to them. And that is how this sitemap code works and displays the contents of your sitemap.

But let's say you want to change the "HEADINGS" of your sitemap, and the list of blog posts that will be displayed underneath each heading. Okay, the very first thing you need to do is think about, and even write it down on paper, of how you want all your blog posts to appear in the sitemap. Let's say you have a blog about dogs, and that is all you write about. Sorry, I couldn't think of anything else. Let's say you want these particular headings:

* Tall dogs
* Short dogs
* Purebred dogs
* Mongrels
* Hybrids
* Police dogs
* Working dogs
* Unusual breeds of dogs
* Strange behaviour of dogs
and,
* Native wild dogs

Let's also say you already have 251 posts about all the dogs you could ever think of on Earth. Now, because this sitemap widget does not allow for subheadings to be added to the sitemap itself, your only option with this particular widget is to reword the title of each blog post.

The title of each blog post is what will be displayed underneath each heading in your sitemap. So, you will need to come up with a clever way of displaying the contents of your sitemap underneath each of the ten headings about dogs.

For example, let's say you wrote an article about Police dogs, and it was about "Training German Shephards from a young age". Maybe you gave the post this title: " German Shephard Police Dog training". Anyway, let's say you have similiar post titles but the contents of each post is different in regards to German Shephard Police Dogs being trained. You simply reword each blog title so it looks more like the table of contents page of a book. Give your blog post titles very specific "titles" so they will be more of an accurate description of the contents of the blog posts. For example, instead of having the title " German Shephard Police Dog Training" you could give it the title of "Training German Shephards at a young age", or to actually give your sitemap subheadings, reword it to something like this: "German Shephards: Training young dogs".

THE SITEMAP LISTS EVERYTHING ALPHABETICALLY
The sitemap will automatically put everything into alphabetical order for you, but it also has the habit of separating capital letters from lowercase letters at the beginning of each label. Every number label you add (e.g. "2011" or "200BC", etc) will always be at the very top of the list in the sitemap. All words that start with a capital letter that you add to a post as a label will be displayed in the middle of the list in the sitemap. And every lowercase word that you add to a post as a label will automatically be put at the bottom of the list. Within each of these three sections (numbered labels, Capital letter labels, and lowercase labels) each lot of posts will also be categorized alphabetically within/underneath each heading. So, the trick is to start each label with a capital letter. It will look like this, from top to bottom in the sitemap:

2011
Little dogs
big dogs

HOW TO AVOID BLOG POSTS FROM APPEARING MORE THAN ONCE IN YOUR SITEMAP?
There is only one solution for this and that is to only give each post one "label". If you really want a neat and tidy sitemap it is better to relabel all your posts so each post is displayed underneath the appropriate heading, and begin each "label" with a capital letter.

HOW TO CHANGE THE LABELS FROM LOWERCASE TO CAPITAL LETTERS:
If labels frustrate you when you try to change them there is an easy and quick way that will eliminate your frustration. Normally if you change a label and save it the label will resort back to the original label you gave a blog post. It doesn't matter what you type in as a label, it will always revert back to the original label. This is simply because the label you want to change will always exist until you delete it.

The trick to this solution is simple. What you do is open the blog post in the "Edit" section and delete all the lowercase labels, or the labels you want to change. Then you click on the "save as draft" button underneath. You will then be shown the "Edit Posts" page. Locate the blog post you just deleted the labels from and click on the "Edit" link next to it on the left. Your old labels have now been permanently removed so you can now add new labels all starting with a capital letter, or however you want your sitemap headings to appear as.

Once you have added the new labels to the post click on the "Publish Post" button and you are done.

Now that you have read this post in its entirety you can now go ahead and change your posts' background colour to "white", save it, and add the sitemap code to your blog. Have fun with it.