which isn’t good considering I have and run a Blog.
Because of that, it takes a lot of googling to figure out how to do certain things on blogs. I wish there was one site that had all the answers, but that’s not the case.
Fortunately, I found a site that did help with making
CUSTOM PAGE TABS.
That was the main thing I was wanting to do over Christmas break, and I’m so glad I found this site to help.
I thought I’d share with all of you how to do this in case you were hoping to do the same for your blog.
TUTORIAL:CUSTOM PAGE TABS
DIRECTIONS:
1. Begin by Creating your Pages. The Pages are found under the Posting Section under DESIGN, under EDIT PAGES. There you can create your pages (About Me, Advertising, etc.)
Be sure to SAVE & PUBLISH your pages.
2. Create images of the different pages you would like to be in your Pages Section. You can use Paintshop or any other similar program to do this.
Mine look like this:
3. Once you have created your Page Images, upload them to a Free Image Server, like Photobucket. You will need the urls of these images, so be sure to keep note of them.
4. You then need to add the following code to your HTML.
To do that go to DESIGN and then to EDIT HTML.
Under the HEADER sections add this code:
This code will allow you to insert the horizontal navigation bar of images.
**The space in between the pictures (padding) may be changed depending on the number of images and the size of each image.**
(All my images were re-sized to 125 pixels so they all fit).
To resize images, you can use Picasa.
Go to FILE – EXPORT PICTURES TO FOLDER
There it will let you enter what size you want your pic and what folder you want it in.
5. To add the horizontal navigation bar, go to:
DESIGN – PAGE ELEMENTS – ADD A GADGET-HTML/JAVA-SCRIPT.
You will then add this code into your HTML Gadget Box:
In the BLUE areas, is where you will put the link where you want them directed to for that certain image. To find the link of the PAGE you are wanting, just go to that page in your blog and copy and paste that link into the BLUE area.
In the RED areas, you will put the link to where your images are hosted. For example, if your pics are all uploaded into Photobucket, insert the DIRECT LINK of your picture into the red area that links with the corresponding BLUE link.
(I hope I haven’t lost you yet)…
Be sure to SAVE your HTML Gadget box when you are finished adding all the links to the corresponding areas. For more links, add:
after the last one already edited.
For fewer links, just delete:
Be sure that this is at the end of your code:
BUT, if you do not want the TEXT horizontal navigation bar, you need to do one more step. Go to DESIGN – and then click on your PAGES Gadget. There you will unclick the boxes next to each page so that it doesn’t show. SAVE.
Now, I know that may sound confusing, but I hope it helps. There may be an easier way to do all of this, but this is the only way I know how to do it and it worked.
Please let me know if you have any questions. 
thanks! I always want to know these things for when I want to change my blog. your blog look great
WOW! I'm impressed you did this all by yourself LOL I would have tried after like step 5 and given up. Love the button btw : )Paula
Thanks for sharing. I knew how to create a tab but didn't know that I could customize with a picture.
This is exactly the information I've been looking for! My blog is a bit of a mess and is in need of some organization!Thanks for the tips!Theresa
SWEETNESS…Thanks! I need to clean some bloggy house. This is perfect. Thanks again. SMooCHes!Jennie {Cinnaberry Suite}
Wow – When you say you are not "super blog-savvy" , I think you under estimate your skills.
Thank you SOOOOO MUCH for this tutorial! It was perfect timing I actually needed to learn how to do that one the day you posted, thanks again!
Hey! This is a great post except you made all your HTML codes PDF files so we can’t copy & paste them! Any chance you could re-add them (even in the comments section) as text files so we don’t have to manually type the whole thing out? Thanks for the tutorial!
Hey Kristyn!
So your tutorial was great & worked really well – EXCEPT for some reason all of my icons link to the same page! I double checked and I have the code done correctly and have inserted the URLs of all the proper pages, but for some reason all of my icons link to the URL of the first icon. Any idea why this might be? Your help would be super appreciated! Thanks! -Amber
Yikes! I have no idea why that’s happening. I’ve never had anyone have that problem. Are you sure the right link is put in the code for that specific page?
I’m having the same problem as Amber. All of my links are going to my home page, which is the first link in the html code
I double checked the code to make sure I got it right but its still linking to home!