Before you try out any tutorial on this blog it's a really good idea to BACK UP YOUR BLOG!
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.
Although, we created the categories first we actually want the code for the index to be right at the top of the page.
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.
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://edit-html.blogspot.com/p/time-to-play.html#" name="Science">Science</a>
</h3>
<h3>
<a href="http://edit-html.blogspot.com/p/time-to-play.html#" name="Maths">Maths</a>
</h3>
<h3>
<a href="http://edit-html.blogspot.comk/p/time-to-play.html#"name="Imagination">Imagination</a>
</h3>
<a href="http://edit-html.blogspot.com/p/time-to-play.html#" name="Science">Science</a>
</h3>
<h3>
<a href="http://edit-html.blogspot.com/p/time-to-play.html#" name="Maths">Maths</a>
</h3>
<h3>
<a href="http://edit-html.blogspot.comk/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. Theorange 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://edit-html.blogspot.com/p/time-to-play.html#Science">Science</a>|
<a href="http://edit-html.blogspot.com/p/time-to-play.html#Maths">Maths</a> |
<a href="http://edit-html.blogspot.com/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://edit-html.blogspot.com/p/time-to-play.html#" name="Science">Science</a>
</h3>
<a href="http://edit-html.blogspot.com/2013/02/does-it-always-sink.html">Sink and Float Experiments</a><br />
<a href="http://edit-html.blogspot.comk/2013/01/20-early-years-static-magnetism.html">Static and Magnet Experiments</a><br />
<a href="http://edit-html.blogspot.com/2013/03/10-experiments-that-go-fizz.html">Fizzy Potions</a> <br /> <br />
<h3>
<a href="http://edit-html.blogspot.com/p/time-to-play.html#" name="Maths">Maths</a>
</h3>
<a href="http://edit-html.blogspot.com/2013/01/how-many-birds-are-there-in-garden.html">Learning Simple Maths with Charts</a> <br />
<a href="http://edit-html.blogspot.comk/2013/02/a-question-for-you-which-of-five.html">Capacity and Volume</a> <br />
<a href="http://edit-html.blogspot.com/2013/02/my-mums-maths-manifesto.html">A Maths Manifesto</a> <br /><br />
<h3>
<a href="http://edit-html.blogspot.com/time-to-play.html#"name="Imagination">Imagination</a>
</h3>
<a href="http://edit-html.blogspot.com/2013/03/5-dressing-up-ideas-you-can-make.html">Dressing Up Clothes</a> <br />
<a href="http://edit-htmlblogspot.com/2013/02/i-want-one-like-you-mummy.html">Make Believe Toys</a> <br />
<a href="http://edit-html.blogspot.com/p/time-to-play.html#" name="Science">Science</a>
</h3>
<a href="http://edit-html.blogspot.com/2013/02/does-it-always-sink.html">Sink and Float Experiments</a><br />
<a href="http://edit-html.blogspot.comk/2013/01/20-early-years-static-magnetism.html">Static and Magnet Experiments</a><br />
<a href="http://edit-html.blogspot.com/2013/03/10-experiments-that-go-fizz.html">Fizzy Potions</a> <br /> <br />
<h3>
<a href="http://edit-html.blogspot.com/p/time-to-play.html#" name="Maths">Maths</a>
</h3>
<a href="http://edit-html.blogspot.com/2013/01/how-many-birds-are-there-in-garden.html">Learning Simple Maths with Charts</a> <br />
<a href="http://edit-html.blogspot.comk/2013/02/a-question-for-you-which-of-five.html">Capacity and Volume</a> <br />
<a href="http://edit-html.blogspot.com/2013/02/my-mums-maths-manifesto.html">A Maths Manifesto</a> <br /><br />
<h3>
<a href="http://edit-html.blogspot.com/time-to-play.html#"name="Imagination">Imagination</a>
</h3>
<a href="http://edit-html.blogspot.com/2013/03/5-dressing-up-ideas-you-can-make.html">Dressing Up Clothes</a> <br />
<a href="http://edit-htmlblogspot.com/2013/02/i-want-one-like-you-mummy.html">Make Believe Toys</a> <br />
Relax and enjoy, don't be rush.
ConversionConversion EmoticonEmoticon