Table of Contents
81
Creating a Table of Contents in your Hub
I'll probably write this and then the powers-that-be will create a Capsule to do in a few seconds what may take a while to create.
Which is fine by me! I wish there was such a capsule!But in the meantime you can do it the way I've done it.Why have a Table of Contents?
If you go to my hub on HubScore, and after what I call the Introduction Capsule, you'll notice that I have a capsule titled Table of Contents.
I figured that I have a long hub, and there's information there that people might want to go back to as a quick reference. Rather have them scroll through the entire hub they can browse through the Table of Contents list, click, and jump straight to the bit that they need.To be quite honest I've put it there to make it easier for ME to find the information.Links Capsule
I used the Links Capsule to pull it off.
You could probably use the Text Capsule to do it too.
It's important to note that while you're in edit mode the Table of Contents won't work properly. It won't jump you down on the same browser window. It'll open a new browser window. So keep that in mind.
Step 1.
Open up your hub. In the view that the general public sees (ie: not in edit mode).
Copy and paste your capsule titles into a Notepad text document (or whatever you feel like using) EXACTLY as they are. Make a list of the ones you want in your table of contents.
Step 2.
You now have to enter the alien world of HTML.
To do this you have to view the Page Source of your hub.
A reminder: make sure you're in the normal view of your hub, not in edit mode.
In Firefox you Right click and select View Page Source. In Internet Explorer you Right click and select View Source. It will open up a new page, like a Notepad text document.
Next you want to FIND each of the titles that you've copied and pasted. One at a time.
Now lets say you have a Capsule that you've titled "Café Royale", you want to search for that IN the source code.
The CTRL F keys should bring up the ability to do a search. Copy and paste Café Royale in and find it.
You'll find something like this:
<div id="mod_487697" class="module moduleImage"><h2>Café Royale2</h2>
If it's wrapped in the h2 tags, then that's more than likely our target! If it's not, then keep lookin (because you may have used the word more than once).
What you do next is "grab" the div id. In this illustration it is mod_487697.
Copy and paste that underneath the corresponding title in your Notepad doc. You'll be using it later.
Go through and find every div id for each of your titles. Copy and paste each one.
Step 3.
Now lets say your hub is http://hubpages.com/hub/Hubscore what you do next is add a # to the end of that and copy and paste http://hubpages.com/hub/Hubscore# to the start of each of your div id's that you have in your list.
So it would look like this: http://hubpages.com/hub/Hubscore#mod_487697
What you have now is a link that goes STRAIGHT to that module. Each of those "module ID's" are unique. Try it out with one of your own in the address field of your browser window.
BOOM. Straight there.
Step 4.
Now go into Edit Mode on your hub and add a Links Capsule. Move it to near the top. I position mine AFTER an introduction. I don't want people and particularly Search Engines to see it straight away. It being in second position seems like a good place to put it.
Now go through your Notepad list. Copy and paste each in Link URL/Link Title and Add Link. No need to add a Link Description. But that's up to you.
Keep doing that until it's all done.
Then of course save it.
And publish it.
And then try it.
How'd you go?
Hopefully it worked for you. It should. If it didn't then you've probably made an itty bitty mistake somewhere. HTML is unforgiving. You leave anything out or accidentally put anything in (even a space), and it won't work.
If you're unfamiliar with HTML it can be a bit daunting but if you've got a keen eye and a sense of adventure then keep at it and you'll get it right eventually.
PrintShare it! — Rate it: up down flag this hub
Comments
Excellent hack darkside. I will have to try this soon. Like Bonnie I was also wondering how it was done. Thank you so much for this info.
Best Regards
Thanks, Darkside, you're a LEGEND!
Jenny
Wow that's the coolest hack Ive seen on HubPages -thank you!
That's great. I've got a very long 'Winemaker's FAQ' hub which is crying out for this kind of navigation aid. Thanks!
Thanks so much for sharing this info!
And that picture is pretty cool too
You truly know what you are doing...Now i have to read this over and over to get it right LOL
Cool, I will try this for sure. Everything looks more organized.
Great. Thanks, darkside.
darkside
A million thank you's for sharing this with us. Your explanations are so simple I might even be able to learn this technique! lol Thank you again.
Great info - thanks for sharing!
Great instructional! I may have to use a table of contents in a few of my hubs. I'll have to figure out if I have any that would need one though... (I'm thinking Caring for Pet Rats may need one; I need to check it out.) What would make it look pretty is to add a picture on the right side of the links.
Clever :-)
Whitney, the picture on the side would look good. There's so many ways in which it could be done too. Maybe an arrow or a finger pointing at the contents list. Or... my mind starts to think up a few wild and crazy ideas. I'm off to go experiment! :D
Lissie, I was pretty happy with the way that image came out. That's if we're both talking about the one right at the top :D
Yeah that'sthe one - must play some more in gimp!
On several of my Star Wars ezine hubs I had a list of contents, so I've made a start at making on one of them, and it already had the image on the right side with a Text Capsule. Now here's what it looks like with a Links Capsule Table of Contents: http://hubpages.com/hub/issue9
Lissie, I used the SKEW feature (in Photoshop). And then added a drop shadow (so the white wouldn't be lost in the white background of the hub).
Thanks - puts photoshop on birthday present list!
Tried a different layout with this one: http://hubpages.com/hub/issue14
I like the new designs on the other hubs. Great way to mix it up.
Well done for working this out - Useful info and how to on using HTML within Hubs
Way cool hack! Thanks for sharing it.
I will have to read that again, thanks!
That's brilliant darkside !! Just what I was looking for.
Thank you!!!
I've just recently published my first Hub and have been reading up on various ways to improve my page... primarily through more experienced Hubbers like yourself. =)
I just finished implementing the TOC steps you outlined, and am very happy with the results. As time goes by, I'll understand the art of presentation... but until then - I think your suggestion will make it MUCH easier for people to enjoy info-packed hubs!!
Wow. I am gonna be up all night til I fihure this out, thanks darkside. I don't know you're tastes but Id's be happy to write anything to like to pay you back.
No payback needed. Go hub and prosper.
I love the step-by-step with graphics, best way to learn.
Thanks!
Thanks darkside, I like it, but may be too much for this old biddie but will have to have a go just the same. Having fun in here. And like they say never to old to learn new tricks.
Darkside--Just found this Hub----thank you sooooo much! I use HTML quite a bit on Squidoo and a few other sites and really miss it here at HubPages. Wish they would include a simple HTML option for those who want it. Maybe someday!!
Again, thanks!!
Eileen--trust me, if this Grandma can do it so can you. It's not that hard if you just take your time and be sure to do EVERY step as written. I knew NO HTML 3 months ago and was even scared of the letters,(lol) but I'm doing all sorts of things now! It's sort of like a giant puzzle you have to put together in the right order! You can do it, gal!
Thanks for the graet info I will try do this one..,.
Fantastic hub! I have at least one long hub where I will implement this!
Thanks to Shibashake as well. If I hadn't read is hub of the Do and Dont's maybe I never found this one!
Brilliant, Darkside. Thank you!
It certainly sounds like a lot of work, but considering the advantage on a longer hub (which I tend to write) it is probably worth it! Thanks
Hey darkside thanks for enlightening us...definitely gotta try it one of these days!
This is wayyy cool gotta try it ~ Thanks!
This is a really useful hub. Thanks for writing it!
I've used this hub for reference so many times and I've never said thanks. So a belated thank you for such a useful hub :)
Yes, I did it! :D Thanks, darkside. :)
darkside maybe you can help me. In my Hub I mention quite a few Hubbers. How can I put their name in, well their name is already in for eg.
Tom Rubenoff
(paragraph about him) so that when you click on his name his profile page will come up, I see this getting done all the time
Maybe you can help me, how do I change the name of a hubber that I have mentioned in my Hub so that when the reader clicks on their name there profile page will open?
Blondepoet, that one is easier than what's required to make a Table of Contents. Just go to their profile page and copy the URL in the web address field of your browser, come back and highlight the Hubbers name in your Text Capsule and click on the chain icon in your editor. Or if it's a Links Capsule you just do it as you'd do any other links.
wow great hub. Darkside I've just become a massive fan of you. Keep up the good work.
Tracey
Oh that is a great help. I didn't know that each capsule is already given an id (e.g. mod_487697). All this while I was thinking how to make Hubpages do that. Good little research. Thanks man!
Thankyou so so much I never saw your reply for ages as they are going the opposite way up ROFL
Glad I read this! This kind of article is the type I crave as it is very difficult when you are my age (60) to keep up with all of this without a guideline.
This is so cool - I would never had known how to do this without your hub. I followed your step by step instructions and just implemented a TOC on one of my longer hubs without a glitch. I'm a huge fan of yours right now - thanks!
Thanks for seemingly having a hub for just about everything I need to know. You are aw....sssss.....oooommmmeeee! :D
I just wanted to say one thing because I can be a dingy sometimes...most of the time.
On the part where you put a #. Can you clarify? I spent like 20 minutes putting a number 1 in instead of a #. LOL. :D
But super, it works!
The # seperates the URL from the module number. It is the anchor. It's telling it to go down to the module number that's in the source code.
Yes this is exactly what I wanted! Thanks
Fantastic. You solved my problem. Thumbs Up for you.
This is a great explanation of how to do it and really useful thanks.
Thanks, man. Now I finally know how to add a table of contents to my Hubs.
Bonnie Ramsey says:
2 years ago
WOW! This is awsome info! I am going to try this to see if I can get it right! I know doodley about HTML except it is needed to build a website LOL. There is enough explaination here I think I may be able to tackle it! Thanks for sharing!
Bonnie