Tuesday, September 7, 2010

DIY Blog Makeover - Adding Tabs

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.
New Post
Click Edit Pages:

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
Upload your 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

Then click HTML/JavaScript

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]

Like this:

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?
It's time.
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.

Tedious, huh?

When you're done, click "Save,"
and your blog should have some lovely new tabs:

And, of course, a before and after:

post signature

I'm linking to
these parties.


Lulu said...

You are amazing to share these step-by-step instructions. This is exactly what I want for my blog . . . but now I need to find the time to do this. How much do you think I need, an hour? I'm thinking I'll try this some night after the baby is asleep.

hiyaluv said...

wow this must have taken you YEARS to write!!! I am so impressed:)

Allison said...

yeah! Thanks for this one! I can't wait to make some fun tabs for my blog. :)

Clare B said...

great tutorial Mandy

theteo5 said...

Thanks again for the great tutorial! Amazingly easy...I finished in less than a half an hour! I didn't even have to make tabs. Somehow my program had them there already, I just didn't know how to start them. So it was super easy! Thanks again. :)

Tony and Kimra said...

wow, i've been doing it a much more complicated way. i'll definitely have to try this.


Sourkraut said...

Whew, that seems like a lot of work but it's something I've been considering adding to my blog. Thanks for the step-by-step tutorial!

Sarah said...

I just found you via Tatertots and Jello. I am new to the blog world... I am talking like a week. :) I have bookmarked your blog tutorials so I will be back often. Thanks!

Rita May said...

WOW! lots of great blog tips. I'll be back tomorrow and give it a try. Thanks!

Melissa said...

Ok...possibly the most useful tutorial EVER! I have to go try this...now!:)

LambAround said...

Holy moly! This is quite the detailed tutorial! Thanks for this :)
If you have a free moment, I have a new weekly (I hope!) Linky on my blog called Not “Baaad” Sundays with LambAround. I’d love for you to post this :)

Rachelle said...

Wow! This is great! I've been wanting to do this with my blogs but haven't had time to figure it all out on my own. Thank you so much for the info.

Visiting from Kusak's Closet's link party.

Rachelle S.

Inspiring You To Save! said...

Thanks so much for this post. Very helpful.

Visiting from the Blog Hops! Stop by when you get the chance. I have a Meet Me Monday blog hop and a Wandering Wednesday blop hop and I would love if you could join in.


Zhanna said...

you are so awesome! thanks so much for these instructions! i was stumped!!! :)

Sarah B. said...

Success!!! I just did this for my blog thanks to your brilliant tutorial :)

Elle said...

you rock. i've wanted to do this for so long!

Christa said...

Thanks so much! This (as well as your other blog design tutorials) has been invaluable as I try to redesign my own blog. You're a gem!

Lynn B said...

Thankyou so much for a tutorial that I can understand, you have done a great job explaining this!

I have wanted to put coloured tabs on my blog for ages but did not know how to do it.

Thankyou so much!