Navigational Tabs-Step 2

First, you should have completed Step 1. You will find instructions here.
Then you will need to create your tabs and upload then to your favorite photo hosting site (make sure that the size does not get changed when you upload to the site). I am including a sample tab for you to recolor to meet your specific needs. This tab size works perfectly to create 6 tabs with the sample blog header that will also be provided. Just scroll your mouse over the tab, and then right click, and select SAVE AS and save your tab template.

The 6-tab blog header has a measurement of 601 x 249 pxls. Here is the sample for it. This blog header is not sized to scale. Make sure you use the measurements given.

You will not be making the tabs and the header together. Each tab is a separate image, as well as the header.

Second, make a planning sheet to keep all the information simple. I use Word to create my planner. I listed each tab I wanted and put in the same code for each tab. The code will change with the TARGET URL and the IMAGE you want to post. I added the blog header at the end (because it will be at the end of the code). Here's what my planning sheet looks like:

Here is the code you will use for EACH TAB, and the Blog Header as well:

<a href="TARGET URL GOES HERE" target="_blank"><img border="0" src="DIRECT LINK TO PHOTO OF TAB HERE"/></a>

When you finish, your planning sheet will have each tab (with TARGET URL and PHOTO IMAGE LINK). Then you will delete all the labels on your planning sheet, and make sure there are NO SPACES BETWEEN CODES. Now, the code is naturally long, so there will be some spaces WITHIN the code, and you cannot delete that.

Here's a sample of what it looks like AS YOU DELETE THE LABELS, and REMOVE SPACES.

Then your final document will have all labels and spaces removed.

I save each word document (the planning document and the finished document).

Third, you will need to click on your header in the page elements section, and you will remove it. Don't get nervous, you can always add a header back if you completed the instructions in STEP 1 from yesterday. ***HINT: If your header will not offer an option to remove, then you haven't completed the steps from yesterday.

Fourth, you will go to your newly created 'Add a Gadget' in the header section of your PAGE ELEMENTS. Go to CUSTOMIZE/LAYOUT/PAGE ELEMENTS/ADD A GADGET (in the header section). Select HTML/JAVA SCRIPT, when the popup comes up PASTE the code you created in planning document.

Then you will click SAVE and VIEW BLOG. THEN YOU WILL HAVE TABS. You can also get very creative! I was thinking of other items to use for my tabs, and I remembered these awesome glass pieces I got from Digitreats as a freebie a few months ago. Think outside the "tab." As long as you have the size right, then your code should work. Last night as I was changing my blog "dress" I initially made the tabs too big. FORTUNATELY, I saved my code from and just put it back, while I made all the adjustments. YES, I had to resize and re-upload every tab photo, and then make the changes in my planning document, and copy/paste it. It is work, but well worth the result. In addition, I am only changing my blog once a month...LOL!

Here's to more happy scrapping, and
Hugs from the heart,

Jeanette