Mommy Hacks # 7 - How to Create an Index for Your Blog

One of the constant challenges for bloggers is to get readers to hang around and check out their great old posts.

One of the most effective ways to do this is to create pages that provide an overview of all your blog content.

The Six Sisters Stuff - one of the most popular mommy blogs out there with over 100,000 hits a day - has done this for all their recipes.

It makes it really easy to find what you're looking for on their blog - you just click on the category you want in the index at the top, e.g. Freezer Meals, and this takes you directly to a list of links for all their Freezer Meals.

The great advantage of this, over for example a cloud tag is that you then get an overview of all their Freezer Meals rather than having to scroll through all the freezer meals posts to find ones you might be interested in.

In this latest of a series of Mommy Hacks I'll show you how you can simply implement something similar - the code may look a bit longer than some of the previous hacks but I promise you none of it is complicated.

Before You Get Started

Before you try out any mommy hacks it's a really good idea to BACK UP YOUR BLOG!

Create Categories

The first thing to do is to work out the categories that you want to divide your content into.

We need to create a marker in the page for each category. In the example below, I have created markers for three of my learning through play categories: Science, Maths and Imagination.

The yellow code is the URL of the page or post where you want the index to appear. Notice that you need to add a hash - # - after the URL.

The blue code is the category as you want it to be displayed on the page.

The green code is the name of category you want to add. The name won't be displayed on the page but it will be added to the URL so it's best to keep it as close as possible to the category but also short and sweet.

The purple code just says to display these categories as sub-headings.

<h3>
<a href="http://mumsmakelists.blogspot.co.uk/p/time-to-play.html#" name="Science">Science</a>
</h3>

<h3>
<a href="http://mumsmakelists.blogspot.co.uk/p/time-to-play.html#" name="Maths">Maths</a>
</h3>

<h3>
<a href="http://mumsmakelists.blogspot.co.uk/p/time-to-play.html#"name="Imagination">Imagination</a>
</h3>

Create the Index

You can now create the index using the categories you have defined. This is very simple - we are just going to create text links to the categories.

The pink code is the URL of your page, plus a hash sign, plus the name of the category. The orange code is the value that you want to be displayed in the index - it doesn't have to be the same as the category that you defined in blue above, but it makes sense if it is.

<a href="http://mumsmakelists.blogspot.co.uk/p/time-to-play.html#Science">Science</a> |

<a href="http://mumsmakelists.blogspot.co.uk/p/time-to-play.html#Maths">Maths</a> |

<a href="http://mumsmakelists.blogspot.co.uk/p/time-to-play.html#Imagination">Imagination</a>

Although, we created the categories first we actually want the code for the index to be right at the top of the page.

Add the Post Links to the Categories

We are now going to add links to individual posts into the categories.

In the example below, I have used text links as on Six Sisters Stuff but you could also use image links as I do in my index pages. If you're not sure how to create image links, check out this tutorial how to add buttons to your blog.

<h3>
<a href="http://mumsmakelists.blogspot.co.uk/p/time-to-play.html#" name="Science">Science</a>
</h3>
<a href="http://mumsmakelists.blogspot.co.uk/2013/02/does-it-always-sink.html">Sink and Float Experiments</a><br />
<a href="http://mumsmakelists.blogspot.co.uk/2013/01/20-early-years-static-magnetism.html">Static and Magnet Experiments</a><br />
<a href="http://mumsmakelists.blogspot.co.uk/2013/03/10-experiments-that-go-fizz.html">Fizzy Potions</a> <br /> <br />

<h3>
<a href="http://mumsmakelists.blogspot.co.uk/p/time-to-play.html#" name="Maths">Maths</a>
</h3>
<a href="http://mumsmakelists.blogspot.co.uk/2013/01/how-many-birds-are-there-in-garden.html">Learning Simple Maths with Charts</a> <br />
<a href="http://mumsmakelists.blogspot.co.uk/2013/02/a-question-for-you-which-of-five.html">Capacity and Volume</a> <br />
<a href="http://mumsmakelists.blogspot.co.uk/2013/02/my-mums-maths-manifesto.html">A Maths Manifesto</a> <br /><br />

<h3>
<a href="http://mumsmakelists.blogspot.co.uk/p/time-to-play.html#"name="Imagination">Imagination</a>
</h3>
<a href="http://mumsmakelists.blogspot.co.uk/2013/03/5-dressing-up-ideas-you-can-make.html">Dressing Up Clothes</a> <br />
<a href="http://mumsmakelists.blogspot.co.uk/2013/02/i-want-one-like-you-mummy.html">Make Believe Toys</a> <br />

Putting it All Together

Now we put it all together and get a nice simple index which gives a nice clear overview of the topics I write about and the posts that I have written on each topic ...

Science | Maths | Imagination