Blog Tutorial 4: Customizing your Tabs and Gadget Titles

I'm back with what will be my second to last planned tutorial. I have this one, and then I was going to do a "finishing touches" post. That post will consist of tweaks you can make to your design in blogger and/or photobucket to make it perfect! 

My question to you is: are there any other things that you'd like a tutorial on regarding blog design? Leave a comment or shoot me an email! There are tons of tutorials if you google what you're looking for, but I'm trying to put it into teacher friendly language and use lots of pictures! =)

So, onto this tutorial: Customizing your Tabs and Gadget Titles.

First, I have to give credit to Terri from The Creative Apple! I wanted to customize the tabs on my design about a month ago, and she had just done it. I asked her how to do it, and she emailed me back right away! So thanks, Terri!

The first thing you'll have to do is head over to Gimp or Word to make your tabs! They can be images or words. Now, I only know how to do the words if you have a solid color background, because I'm not sure how to make text with a transparant background. I'm sure it's possible, though!

So, just like you did your header, you need a starter image. Hopefully, you have been looking through and downloading scrapbooking kits [making sure you follow their TOU!] recently!

[For this tutorial, I am going to use an image from Scraps by Missy. Click that link to visit her blog. She has many freebies and kits to purchase!]

Open your image in Gimp using File--> Open as Layer. Scale your layer a little smaller, but make sure that you keep the proportion so that the image stays intact! I'm going to make the width 200, but you can make it however big/small you want. Remember, though, that these will have to sit horizontally on the top of the center of your blog.

The problem now, is that there is a whole bunch of extra space around the frame. Even though it is transparent, it would still take up space. So we are going to get rid of it! Go to Image--> Zealous Crop. This crop will get rid of the extra space, and it will make sure that there is only as much transparent extra space that is needed. The image didn't center for me after that step, and it doesn't matter. It will turn out the same!

You don't have to do this step, but if you need help centering, set guides like we did with the background. Go to Image--> Guides--> New Guide by Percent. Set one vertically, and repeat to set one horizontally.

Now, you can add your text! Many bloggers have tabs on the top of their blog. The most common that I've found are Home, About Me, Freebies, Awards, Resources, and Copyright. You can make a "page" on your blog for whatever you want! For the sake of time, I'll just be making three tabs.

Just as we added text before, click the A in your toolbar and click your image. Type in your page title. I'll start with Home! Remember you can change the font, color, size, spacing, etc! Move your text to the center of your tab by clicking the move button in the toolbar.

You are finished making your first tab! We are ready to make another, but we aren't going to start from scratch! We are going to duplicate what we already have.

You are going to duplicate the WHOLE thing, not just the layer. So go to Image-->Duplicate. A new window will pop up that looks identical to the one that you have just finished! 

[Don't close the first one, we didn't save it yet! Just minimize it.]

Once you have a duplicated image, you only have to customize the text! I'm going to use the same font, a slightly smaller size, and the same color. When you go to change the color, the color that you used in the first tab should be saved. Easy-peasy!

Duplicate and repeat as many times as you'd like, depending on how many tabs you need! I'm going to make three-- home, about me, and resources.

You are ready to save! Just like we did the button, you are going to save each one as an .xcf [in case you'd like to go back in and fix] and export it as a .png [so that we can upload to photobucket and install]. I would name them TAB_home, TAB_about, TAB_resources, etc., just so they are easy to find!

Once they are saved, upload them in photobucket!

Now you'll need to go to your blogger layout. Right below your Header, you will need to add an HTML gadget in the long space. If you want, you can create it anywhere in the layout, and then drag it to that position! [If you have a Pages tab from Blogger already, you need to remove it.] Name it Pages for easy identification.

Here is where the coding comes in. In essence, you will be adding each of your tab images in the order that you want them to be. Each image will be linked to the individual page.

If you would like your tabs centers, put <center> at the beginning of the HTML gadget.

You will need the below code for each tab/image. [Thanks again, Terri!] Copy this into the gadget box as many times as you have images. Where it says YOUR PAGE URL, go to your page and paste the URL there. Where it says YOUR IMAGE URL, go to Photobucket and grab the direct URL.

<a href="YOUR PAGE URL" mce_href="YOUR PAGE URL"><img src="YOUR IMAGE URL" mce_src="YOUR IMAGE URL" border="0" /></a>

When you're doing this, make sure you make them in the order that you want. You can easily switch them around by cutting and pasting the code. Here is what mine looks like.

Click Save and then Preview your design. They should be in one straight line under your header. You may need to resize if they are too large. You can go back to them in Photobucket, resize them, and fix the direct link, as I've showed you in previous tutorials. Here's the finished tabs on my test blog!

-----------------------------

PHEW. That was long! Thankfully, you make your gadget titles in the exact same way using GIMP. You can use the same frame as you did in your tabs or a different one. Up to you! On my blog here, I used a slightly different one. I'm going to use the ones I already have from my actual blog.

Make them and save them in GIMP. You will want them to be pretty small, depending on the width of your side bars. I'd start with 200 or less. I would save them as title_followers, title_labels, etc so that you can easily find them later!

Now, go to blogger and add a new HTML gadget.

Title your gadget so that you know which image it will be. I'm doing the followers one, so I added that title. Then, paste the following code in the box. Where it says YOURIMAGEURL, go to Photobucket and get your direct link code. Paste it there.

<center><img src="YOURIMAGEURL"/></center>

After you save it, drag it directly above its corresponding gadget. This is why you titled it the way that you did.

Click preview, and you should see something like this. You have the new gadget title, your new image, the actual gadget title, and your followers gadget. That is a lot of titles! Even though it looks like that, leave it there for now!

Now, repeat the same exact thing for each gadget that you have! You will have a lot of gadgets on your sidebars, along with a lot of titles. That's okay! Once you're finished adding your images above each gadget, you can go back and delete ALL of the titles. This will create a smoother side bar!

Here is just the followers portion of my test blog, after I deleted the titles!

YAY! You have customized your blog! I'll be back soon with my last planned tutorial. Please comment if you find these tutorials useful! I made a little button in case you want to pin a tutorial for later use. I've also added a new tab on my blog that will have links to all my tutorials. =)