Type in key words and search my blog here:


Sunday, December 28, 2008

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,



  1. WOW...I hope to start on mine tonight. I love what you have done with your blog and your tutorials are awesome. Thank you for sharing with us.

  2. Hi Jeanette! I actually bookmarked this site last night so I could come back and really read through it! Thanks for sharing all this and thanks for visiting my blog!! I haven't been around Flair much for awhile...just too busy with other stuff and only so many hours in the day LOL Hope you are doing well!!

  3. Thanks for the awesome tuts! I'm going to have to try this part too. LOL

  4. Hi Jeanette! Thank you so much for visiting me!! WOW! the things you can do with a blog!! i will definitely be back to read up and hopefully learn! hehe
    Wishing you a very safe & WONDERFUL New Year!! :D

  5. Hi Jeanette! Your blog looks fantastic and the tutorials are wonderful! Thanks for the mention in your post :) You can find the glass items here: http://digitreats.typepad.com/creativeteam/2008/10/skip-abc-kit---the-x-papers.html . Thanks for thinking of me!

  6. OH MY GOSH!!!
    It took me all morning but I did the tabs!!!!!! yipee! Thanks for your great tutorial Jeanette. Hummm now to figure out how to do the move over on each one ;)

  7. Whew....so far so good.....now to work on this part....(I'm sweating....is that normal???) :D

  8. Oh holy Mug....is it hot in here???? Here goes nothing....if I do this right; I promise to kiss the ground you walk on.... lol.

  9. Thanks Jeanette for the encouragement on making the tabs....it's a scarey process....I got only so far last night before I had to call it quits and get to sleep, but now I'm back trying to find the right design look for my tabs before I post them to Photobucket....

    I'll let you know how it goes when along the way....glad you found humor in my comments....LOL....nice to meet you too!!!

  10. I'm stuck....I've uploaded my tab images inidividually, but...

    What is the 'Target URL'....how do I get that for each tab? I mean how do I know what that is/where to find it? I see on your sheet that you have a different 'Target URL' for each tab....Thanks for your help. :D

  11. Hey Jeanette, I got your message and I contacted you on your contact tab so you'd have my email. Did you get it by chance? I also am following your blog now, but that's a bumber I'm not your 100th follower, but I'm #99....I wonder if I should wait for someone else to follow and then add myself after them to be the 100th....LOL....then you can have a party!!! :)

  12. You have been so awesome Jeanette!!!!

    Oh, no, someone took my 100th follower place....that's....(sigh)...speechless....

    Thank you so much for being such a blessing to me with all your amazing help! You're so super. Anyone reading this should be honored to have Jeanette share her tips and secrets with us. What an amazing and talented woman she is!!!

  13. Jeanette, how are you feeling? Are you okay after todays events?

    ~Sarah Cecilia

    And did you get my email?

  14. Jeanette,

    First, I want to thank you for the tutorial on how to customize the tabs - I would never have imagined I was capable of actually making this myself! I know you hear it all the time, but I truly do thank you for offering the step-by-step instructions. :)

    My question is this, I've made my header larger due to the fact that it fits perfectly under the 1st header (I have 2), but I tried to resize the tabs to fit perfectly under the 2nd header but they won't align directly under the way it is supposed to be. Could you help me figure out how to make mine work with the header being the size it currently is? You said to have your header 601 x 249 pxls -- mine is 799 x 459. I don't know how to resize the first header (with the butterfly) since it is a blinkie-type.

    PLEASE HELP!! :)


  15. Thank you so much for the great tutorials! I can't believe I did it and it works!!

  16. Jeanette, I have done everything correct on my header. Its uploaded to the right size, and the links all work. But the "Lyndsie" part is out of place. Any tips?

    My Blog: Stardoll News Gossip


Thanks for taking time to leave a comment. I would love for you to include your blog address

Just copy and paste the following in your comments and add your blog address and blog name, and you will easily post it in your comments. Don't leave any spaces!



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


Blog Background Template