HTML Tab Menu

The following image is the intro to my TV Stands lens. I did not use an intro picture. This will affect how my lens looks in Squidoo listings (yup...plain, orange Squid box), but I was more interested in making the lens look good to outside visitors.

Photos in the TV Stands lens used under Creative Commons. Left: adamjkane. Top: Brian E. Ford. Bottom: rscottjones. Right: ckindel.

Now, the first thing the visitor sees are the orange tabs with short descriptions to guide them through the lens: Measure, Find, Negotiate, and Remotes. Each tab is hyperlinked to the appropriate module in my lens so clicking on the "Measure" tab, for example, will jump the visitor directly to the module about measuring for the right TV stand. I purposefully used the same color scheme as Squidoo to tie my content into it's surroundings.

Portable_ebay, a fellow Squidoo member, encouraged me to find a way to do an intro picture AND be able to incorporate the tabs. That led to the intro on my Outdoor Rug lens:

I used a relevant picture for the intro and put the tabs just under the intro picture. This way, the tabs were still quickly visible to visitors.

Update April 22, 2009 - The TV Stands lens, with no intro pic and a bunch of code for tabs as the start of the intro struggled to get into Google more than any other lens I've made. Even when indexed by Google, it acted oddly. I can only assume having an intro start with a bunch of HTML code within the CSS layout of the Squidoo module was partially to blame. I've since redone the lens to mirror the tab setup I describe in this lens.

Update May 21, 2009 - Nope. Turns out it wasn't the tab menu stopping this lens from getting traffic. It was my keyword/phrase choice. I missed a step in researching the search engine optimization for this page. So, I have no reason to believe a tab menu near the intro of a Squidoo lens would hold you up on getting Google traffic. Ahhhh...I keep learning as I go along. :)

You don't have a lot of time in which to impress your visitors.

My lens with the longest average visit length from Google traffic still shows 72% of my visitors leave within 5 seconds.

Use Stat Counter to get visit information on your lenses. It's free and provides helpful information about each lens on which it's used including the graph above.

When I browse the web, I use a search engine, click on the first listing and immediately judge the page by how it looks. If it looks like an article, a rushed, crappy content page, or a store when I really wanted information, then I hit the back button within seconds. Think of the intro as your last chance to impress and keep visitors. If they don't like what they see, they're gone no matter how much work you put into the rest of your lens. What a lot of wasted effort if you work so hard to get visitors and give them useful information and then they never give your page more than those few seconds.

If you've optimized your lens for keywords and phrases and your content is built around those keywords, tabs can let your visitors know right away that you have a section of material that's of interest to them. If they do nothing other than click to get to that one section, you've completed your task. You delivered useful information to the person looking for that information.

I struggle with the pic requirement in the intro module with each lens. It sometimes just doesn't work with my topic or gets in the way of the idea I have for the lens layout. Sometimes, the TOC module can be so lengthy you have to scroll through it all and I don't take the time to read all that detail. I have some lenses in which I made my own table of contents but I still didn't think they were as professional looking or as concise as tab menus.

Tab menus give you one more way to keep your visitor from leaving immediately once they've opened your lens.

For more tips on how to increase visit length on your lenses, don't miss Cinetech's lens on How to Make Visitors Stay Longer.

If you've read my HTML to Copy and Paste lens, you know I love using GR Sites for backgrounds and borders. It's free AND great for making the tab images we need. The free account, however, limits the size of the tab to just a few letters. Using your own photo imaging software and a photo hosting site, you can increase the size of the tabs yourself and enter your own text.

Because you'll want your tab colors and text to match your lens, it's best to create tabs last. You can do this just before you publish or anytime after. You can even go back and add tab menus to your older lenses. You don't need a tab for each module. I suggest using 3-5 tabs and make those tabs focused on showing visitors you have the content they need. Or make a tab for content they might not have thought of but you know they wouldn't want to miss. These instructions are for four tabs. If you don't know HTML very well, it might be easier for you to use the code I provide at the bottom and plan on using four tabs.

First, we're going to create a Tab Template, a small, blank image of our tab. Like this:

1. Go to GR Sites.

2. Click on Button Maker in the menu at the top of their home page.

3. Click on Regular Shaped Colored Button.

4. Choose a color for your button.

5. Select the button's shape. I use TAB.

6. Choose the Button Style. I use Glass Curved for that shiny, 3D kind of look.

7. Leave Button Outline, Mouse Over Effect, and Button Shadow as None.

8. Leave the Button Width and Height alone. It won't matter. You're going to use the HTML in your module to determine the size of the button on the screen.

9. Leave Text and Text Color blank as you're going to edit this later yourself, too.

10. Choose a coordinating Background Color that works with the Button Color you selected. MAKE NOTE OF THE SIX DIGIT COLOR CODE of your background color. You'll need this later to code the background in your lens to match the background of your tab. GR Sites has an option for Transparent, but this only works if you link directly to GR Sites code after you create the button. We're not doing the tab that way so you're going to end up with a white or black background in your photo imaging software. Might as well pick the color you want now.

11. Skip all other button options and scroll to the bottom and click on Make the Regular Shape Colored Button.

12. An image of your button will pop up with a pink warning box that says you can't have a button over a certain size without a subscriber (paid) account. Ignore the message. The subscriber account lets you link directly to the HTML code GR sites would generate for you if you were to use their tool to create your entire menu. My method is free and we're going to link to our tabs through a free picture hosting site. GR Sites makes it clear their images are freeware and available for your personal use, edited or not. Just make sure you give credit to GR Sites on your lens for the tab image.

13. Open your own photo imaging software. If you don't have one, see dagsmith's lens on Free Digital Photo Editing and choose one.

14. Open a new project or file in your photo imaging software. You should have a blank canvas.

15. Go back to GR Sites and right-click on your tab image. Click on Copy Image.

16. Return to your photo imaging software and paste the copy of your tab image into your blank canvas.

17. Crop your canvas so it's the exact size of your image. Don't leave excess background color or canvas on the sides of your tab or you'll have gaps between them when you put them all together.

18. Save your image with a name like LENS-NAME TAB TEMPLATE. I used HTML TAB MENU TAB TEMPLATE.jpg for my template file name. You want to keep a blank copy of this template without text so you can change it as needed or use it again.

If you haven't planned out your tab text yet, do so now. It's best if your lens is nearly complete so you know which important sections you want to hyperlink in tabs. Next, we're going to create versions of our tab with the menu text inserted like this:

1. Your photo imaging software should have an Insert Text function. Use this to place text on your tab template. Center the text.

2. Use SAVE AS to save your first tab as something like LENS-NAME TAB TAB-TEXT. For example, the first tab on this lens is Examples so I saved this tab as HTML TAB MENU TAB EXAMPLES.jpg. I know, too much, my own freaky organizational method. Name it whatever works for you. Just don't use SAVE or you'll write over your template and you might need that again.

3. Highlight the text you just saved and replace it with the text for your next tab, and use SAVE AS again to save the next tab. Do this for each tab you need. We're using four for this example.

4. Load each of your completed tab images with text into your photo hosting service. I use Photobucket. So far, the free version has provided me sufficient storage and bandwidth space.

Almost there!

1. The following code is written for four tabs centered within a text module. Copy the code into your editor (notepad, HTML editor, or text module - where ever you do your work).

<p style="float: left; margin-left: 40px; width: 125px; height: 40px; padding-top: 20px"><a href="URL FOR YOUR LENS MODULE THAT TIES TO TAB #1"><img src="URL LINK TO YOUR IMAGE FOR TAB #1" width="125px" height="40px" /></a></p><p style="float: left; width: 125px; height: 40px; padding-top: 20px"><a href="URL FOR YOUR LENS MODULE THAT TIES TO TAB #2"><img src="LINK TO YOUR IMAGE FOR TAB #2" width="125px" height="40px" /></a></p><p style="float: left; width: 125px; height: 40px; padding-top: 20px"><a href="URL FOR YOUR LENS MODULE THAT TIES TO TAB #3"><img src="LINK TO YOUR IMAGE FOR TAB #3" width="125px" height="40px" /></a></p><p style="float: left; width: 125px; height: 40px; padding-top: 20px"><a href="URL FOR YOUR LENS MODULE THAT TIES TO TAB #4"><img src="LINK TO YOUR IMAGE FOR TAB #4" width="125px" height="40px" /></a></p><p style="border-top: solid 60px #SIX DIGIT COLOR CODE; border-left: solid 10px #SIX DIGIT COLOR CODE; border-right: solid 10px #SIX DIGIT COLOR CODE; border-bottom: solid 10px # SIX DIGIT COLOR CODE; padding: 15px; text-align: jusify; line-height: 20px; color: #224466; font-size: 15px; font-family: verdana">YOUR TEXT HERE</p>

2. Insert the URL to the module to which you want each tab to hyperlink. I swear I used to be able to get these codes in edit mode, but I haven't been able to for the past month so I've had to wait and get these after I publish. Each of your modules has a unique URL that looks something like this: http://www.squidoo.com/html-tab-menu#module28157002. Once published, view your lens and use the default Table of Contents to click on the module you want to hyperlink. Your browser address bar will now show that module's URL. Copy and paste that specific module URL into the code where noted.

3. Insert the link to your own tab images where noted. If you used Photobucket, the Direct Link can be found under each image in your Photobucket album. Make sure you're tying the right tab hyperlink to the right tab image.

4. Insert the six digit background color code you documented when you were in GR Sites creating your tab. (You did write it down, right? Step 10 in Creating the Template.)

5. Save your work.

You did it! Now, a little tweaking might be in order. When you copied the code from this page into your editor, it might have left spaces where none are needed. Clean up the code by closing any little gaps. You might also find, depending on whatever other HTML code you have already written, that the tabs don't sit exactly on top of the border like they do in the image above. If that's the case, tweak the code for PADDING-TOP for each of the tabs (there are four locations in that code) until your tabs sit on the line.

6. Test your tabs once you've published and make sure they're hyperlinked to the correct modules.