Blogger Tips & Tricks -5-

Blogger Tips and Tricks is a new semi regular feature where I will try to shine some light on some little known blogger things and maybe give you a few how to’s.

Last week Keegan Shayne asked:

For Next week could you maybe do a tutorial on how to customize what the tabs look like, for instance how you did yours and used the custom font and such?

Well, I did mine and most of the other blogs I design with slicing in Photoshop CS5. But I think there is a way to do it with GIMP (free photo editing software). Follow this link to see that. But I am not familiar with that program so I’m going to show you a way to have custom title images a easier way. This won’t look like mine, but it will be more custom than just plain ol’ Pages.

If you don’t want to do all of this, scroll to the bottom for a few tips on easily customizing your Pages tabs.

First find the font you like. Maybe you already have a pretty font for your header and you want to match them. If you don’t have a font you can find some fantastic ones at kevinandamanda.com. Once you find a font download and install it.

Now open up whatever photo editor you plan on using. I’m going to be doing this with Photoshop Elements but you can use GIMP or even paint.I’m going to open up a new document 100 x 50. You may have to make it bigger depending on what your titles are going to be. Set your background to transparent too.

Next write out your title. Play around with the size and center it and save for web, if you want the background transparent make sure to save it as a png. Here’s mine:

 Now make the rest of your titles and save them. Try to keep level if you can. That way they will be in a straight line when you add the to your blog.
Now that that’s all done upload your titles to a image hosting site like Photobucket. Now we’re going to add the to your blog!

Go to Design – Layout. Add a new HTML/Javascript gadget under your header. This is the code you will need:

<a href=”URL HERE” target=”_blank”><img border=”0″ src=”IMAGE URL HERE” /></a>

Copy that code and paste it into your gadget. Replace the URL HERE with your page url. Replace the Image URL with the direct link to your image. Do this with all of your titles. Save it. Go take a peek! If you are happy with it then you are done! You might have to do some resizing/realigning to get them all to fit. Just play around it it. Here’s what mine looked like:

Maybe you don’t want to do all of that…I don’t blame you! Maybe you just want your Pages tabs centered or in a nicer font. Here are a few easy ways to do that:

Want to center you Pages bar?
Want to add a custom blogger font? Go to Template Designer – Advanced and go to your text font, post title font etc and pick out a new font!

That’s it for me this week. I hope that helped you out and gave you some new ideas!

What Tips & Tricks would you like to see next week?