Edit HTML for Create an Index for Your Blogspot


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.

<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 />

1 Response to "Edit HTML for Create an Index for Your Blogspot"

Mickbass said...

How do i hide the contents of the new post so it only shows the title until you click on it?

wdcfawqafwef