Create a Simple Table of Contents Quickly & Easily
Create a custom table of contents
For online content creators
Easily build a custom table of contents
If you write for a site that uses modules to help you organise your articles, it's easy to create your own customised, clickable table of contents. This is essential.
This helps your readers find what they are looking for simply and quickly.
Below you'll find step-by-step instructions, plus the code you need. Simply copy the code, edit it and add to your article.
This might appear a little complex when you read the instructions but the reality is very different. You'll be able to build custom tables of content within just a few minutes.
I promise that this is easier than it looks.
See Step Four if you'd like to get the link to the code with you can copy, adapt and paste into your own article.
Copy the URL
Open a plain text document such as Notepad. Go to your article online and copy the URL that shows in the address bar.
I'm making four links in my table of contents so the first step is to paste the URL into the document four times, one per line.
See the image below.
Add your titles
Alongside the URLs, add the titles of the modules you want to link to. In this example, I'm linking to 1922, Big Driver, Fair Extension and A Good Marriage.
See below that I've added this at the end of the URLs.
View the source code of your article
In most browsers, this is simply a case of right clicking your page and then choosing the option to 'view code' or 'view source'. (Be sure not to right click an image as this will give you a different menu).
You'll be taken to a page that will, unless you are familiar with HTML, look like complete gobbledegook. Don't worry.
Use your browser's 'find' function (often CONTROL+F) to locate the title of the module you want to link to. Each module has its own unique number. See the example below.
The title of the first module I need is 1922. You can see that the search function has highlighted in word in yellow You'll also see that close by is the module identifier. I've framed it in a yellow box so that you can see it more clearly.
In this example, the part I need is mod_27254712
Copy this. Add to your document at the end of the URL, preceding it with a hash symbol. See below.
Repeat until you have #mod_number on every URL. See below.
Get and edit the code
Click here and copy the code. Add it to your plain text document below the links.
Combine the information to create the final code
Use the two pieces of information to create the code.
1. Copy the URL and paste in place of http://yourusername.hubpages.com/hub/your-title
2. Copy and paste the titles in place of Your display text
3. Copy and paste your unique module numbers in place of the example numbers given
Your code will now look like the images below (a one-line version plus an enlarged version for your reference).
Add the code to your article
Edit your article. Go to the module in which you would like your table of contents to be (a text box). On the left hand side of the text box editor, you'll see the HTML button. Click that and paste in your code.
Your links will now look like the image you see on the right. These work and will be a benefit to your readers because they will be able to jump straight to the information they require.
But doesn't it look a little boring?
That's fine because now you can edit it as you would any other text. Here you see an example with bullets added to divide the text.
If you have just a little space in the layout of your articles, leave the links as they are - the bullets help to distinguish them.
If you have more space in your layout, space them on their own individual lines as shown in the screenshot on the right.
Make your table of contents attractive
When you're editing a text box, click on the omega icon which is the fifth from the right on the toolbar. Using this, you can add bullets. But there's more.
Check the symbols to see if there are others which might be more appropriate for your topic or for the look and feel of your article.
♥ ♦ ‡ ¤ →
There are many more and can make your table of contents truly unique. You can see the symbols in the image below.
The seven easy steps
- Copy your URL and paste into a plain text document - once for every link you want to make
- Alongside each, add the title -the text you'd like to show
- View the source code to find the unique ID numbers for each module you want to link to. Paste these into your text document
- Grab the code and paste into your document
- Copy and paste your own details into the code
- Add the code to the HTML of your article
- Make your link list more attractive by adding bullets or other symbols.
© 2014 Jackie Jackson