This is what our blog looked like when we got done yesterday:
Today we're going to add tabs below the header.
Here's the process:
1. Creating Pages
2. Designing Tabs
3. Resizing Tabs
4. Creating Codes for Tabs
First we need to create the extra pages that we're going to link up to the tabs.
Go to your blogger dashboard.
Click New Post
Click "New Page":
You can design your page just like a regular blog post.
When you're finished, click to publish it.
Click No Gadget:
Repeat this process until you have all the pages you need:
You don't need to make a "Home" page, since that will just be your blog.
[But do remember to make a "Home" tab when we are designing the tabs!]
Other page suggestions: Tutorials, Shop, FAQs, Features, Copyright, About, Buttons, Blogs I Love, Parties I Link To, Etc...
When you finish, you may want to leave this page open, because we'll be back to it!
To design our tabs, we're going to use Picasa again.
Remember when I said that my way of doing things isn't necessarily the best way, but it works?
Here's a great example :]
Click on ANY picture in Picasa. . .
It doesn't matter which, because we're only using it as a means to an end.
Then click the Create tab and select Picture Collage
When your collage is loaded, make the picture as small as you can, and hide it off in the corner of the screen:
You can leave the background white if you'd like, but I'm going to show you how to change the background if you'd like colored tabs.
Make sure that you are under the settings tab, and then [under background options] click inside the white box to pick a color:
Then click Create Collage:
Now use the text application to add all of your tab names:
We want them all to be cropped to the same size, so this is what I did:
I cropped the first one, and selected Save As
Instead of clicking Undo Crop, click Recrop at the top:
Then you can drag the crop box over to the next word, and it will be the same size:
Do this for each of the tabs.
***EDIT: I had originally shared how to resize you tabs on photobucket, but I've had reports that photobucket has not always worked [and have experienced it for myself now!]
You can definitely use photobucket to resize your tabs, but about 50% of the time they will still be HUGE when you link them to your page. I do not know why this is.
So instead, I suggest that you use Pic Resize to resize all your tabs.
I have 5 tabs, and my wrapper is 1000 px across, so I changed the width of each of my tabs to 190 px.
[If you have trouble figuring out Pic Resize, see my tutorial for Resizing Your Header.]
When you're done resizing, save the tabs to your computer.
Then go to Photobucket.
Upload your tabs:
CREATING CODES FOR TABS
Once you've resized all your buttons, we can create the codes.
It's actually the same code that we used yesterday to make our buttons:
Go to your Design page and click Add a Gadget
Paste this code there:
[You will need to paste it once for each page that you created...
so if you made 6 pages including your home page, paste the code 6 times]
But don't save yet, because we still need to edit it.
First, if you made a "Home" tab, change the very first place that it says "YOUR URL" to your blog url.
Then change the very first place where it says "PICTURE URL" to the DIRECT Link to the "Home" tab picture on photobucket:
If only they were all that easy...
Remember how I said we'd be back to the pages?
Go back to "Edit Pages"
Click "View" for the page that you'd like to be listed first on your blog:
Copy the URL and paste it into the next available space in your code that says "YOUR URL":
Then Find the tab picture on photobucket that matches it, and copy the DIRECT link, and paste it in place of the next "PICTURE URL."
Do this for each tab.
Be careful to match up the URL for the page and the URL for the tab picture correctly.
When you're done, click "Save,"
and your blog should have some lovely new tabs:
And, of course, a before and after:
I'm linking to these parties.