How to Make A to Z Links for Your Blog or Website


Charakterset_of_OptimaDo you have a lengthy list on one of your blog posts or web pages? Would you like an A to Z list similar to this list of colors to help your readers move down the page easily?

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A List of Colors

Aqua
Blue
Crimson
Green
Hazel
Ivory
Jade
Lavender
Maroon
Mauve
Olive
Orange
Orchid
Sapphire
Silver
Taupe
White

Click on “M” or “S” in the A to Z list and see what happens. (You can get an idea of a more complex use of the A to Z list on Our Blogrolls page.)

Hopefully, your blog has an option for you to write HTML (a computer language).  This tutorial will tell you how, using named anchors.  Don’t worry, it’s not that difficult.  You’ll be able to “jump” from a linked letter in your A to Z heading to the A to Z named anchors in your listed items. In the above, Maroon is the named anchor for M and Mauve is just part of the list.

Step One: Paste this A to Z code in your blog (if you have an option to write HTML for your post) to get the A to Z heading with links for all twenty-six letters.

<a href=”#A”>A</a> <a href=”#B”>B</a> <a href=”#C”>C</a> <a href=”#D”>D</a> <a href=”#E”>E</a> <a href=”#F”>F</a> <a href=”#G”>G</a> <a href=”#H”>H</a> <a href=”#I”>I</a> <a href=”#J”>J</a> <a href=”#K”>K</a><a href=”#L”>L</a> <a href=”#M”>M</a> N <a href=”#O”>O</a> <a href=”#P”>P</a> <a href=”#Q”>Q</a> <a href=”#R”>R</a> <a href=”#S”>S</a> <a href=”#T”>T</a> <a href=”#U”>U</a> <a href=”#V”>V</a> <a href=”#W”>W</a> <a href=”#X”>X</a> <a href=”#Y”>Y</a> <a href=”#Z”>Z</a>

Step Two: You probably don’t need a link for every letter as in the color list example.  If you don’t want to start with A or don’t have an X Y Z, for example, just replace the parts of the HTML code you don’t need.   You would probably start links with the first letter that  does not appear on “page one” of your list.   For instance, you would replace <a href=”#A”>A</a> with A and <a href=”#X”>X</a> <a href=”#Y”>Y</a> <a href=”#Z”>Z</a> with X Y Z in your A to Z link heading.

Step Three: Paste this code in front of the appropriate members of your list that are going to be the named anchors and change G to whatever the letter is that you need for the named anchor:

</a><a name=”G”>

Step Four:

Then, you will need </a> at the end of each named anchor to indicate the end of the link destination.

This is the HTML code for the color list to help clarify the steps for you.

This is the HTML code for the A to Z heading with links to only the needed letters:

A B C D E F <a href=”#G”>G</a> <a href=”#H”>H</a> <a href=”#I”>I</a> <a href=”#J”>J</a> K <a href=”#L”>L</a> <a href=”#M”>M</a> N <a href=”#O”>O</a> P Q R <a href=”#S”>S</a> <a href=”#T”>T</a> U V <a href=”#W”>W</a> X Y Z

This is the HTML code for the color list with its named anchors:

Aqua
Blue
Crimson
<a name=”G”>Green</a>
</a><a name=”H”>Hazel</a>
</a><a name=”I”>Ivory</a>
</a><a name=”J”>Jade</a>
</a><a name=”L”>Lavender</a>
</a><a name=”M”>Maroon</a>
Mauve
<a name=”O”>Olive</a>
Orange
Orchid
<a name=”S”>Sapphire</a>
Silver
<a name=”T”>Taupe</a>
<a name=”W”>White</a>

NOTE: The image of type is available at Wikimedia Commons.

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s