Tuesday, August 7, 2012

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. =)


  1. I have got to find the time to use your tutorials! They make it seem so do-able!

    A Place to Thrive

  2. I wish I could come through the computer and kiss you right now!!!!! You have made my life so much easier!! Great tutorial, seriously the best one out there for this! THANK YOU THANK YOU!

  3. Exactly what I have been searching for. Thank you so much!

  4. I have a question... I used your tutorial and everything came up like you said it would, but there's also the blogger pages bar there, too. I've tried everything I can think of but it just won't go away! Can you help?


  5. Thank you so much for this wonderful tutorial! Just made my own tabs for my pages. I am so excited. Your directions were so easy to follow. Well done!

    Eclectic Educating

  6. Thanks for the tutorial..It's help me a lot..

  7. Thank you so much for this, have been looking for a tutorial on this for aaaaagess, and kept wandering what everyones secret was?! Just working on mine now :)

  8. Omg! Finally a tutorial that worked! I had been trying to find a website that could walk me through this for the past two days. Thank you so much!!

  9. This was so helpful! Thanks!


  10. We've been looking for a way to customize our tabs, and this was perfect!! Thank you so much. This was so helpful!
    -Kayla from Orchardgirls.blogspot.com

  11. I feel so stupid because I've done this about 10 times so far and my images keep showing up HUGE. I try to resize them in the blogger "rich text" preview-won't let me. I resize them to teeny tiny in photobucket, redo the direct link (which doesn't change) and the image looks exactly the same. Help!!!

    1. If you go into your HTML, you can adjust the images. So right after it says border="##" you just add the following:

      height="#" width="#" -- it may take some playing around to get the size you want. But it's easy!

    2. Thanks to Meghan for the excellent tutorial and to Emily Forever After for the last clarification. I was getting crazy because of the size of the image

  12. Thank you so much for the tutorial!

  13. Thank you so much! This was so helpful. The only thing I could find online was how to transfer a sidebar menu to a top menu, and I really wanted it to be pretty! Thanks!

  14. Thank you so much for this post! The only thing I could find online was how to make a sidebar menu into a top menu - not cute or pretty! Thank you!

  15. Thank you thank you! This has helped a lot!

  16. Awesome tutorial, totally used it, thanks so much!

  17. Awesome tutorial, totally used it, thanks so much!

    -Nalin from theekissoflife.blogspot.com

  18. Hello, how to put space between each tab ?
    Thank you ^^

  19. You are the BEST! Thank you so much!

  20. Thank you so much! I tried a lot of stuff and it didn't work. That worked for me this time. The only thing is that there is no space between the banner ans the tabs. I will fond...

  21. The pages bar wont go away when I do the pages HTML, and when I tried to do the second tab, the tab appeared BELOW the first one. I wanted it to go to the right side of the first tab. Any help?

  22. THANK YOU !


  23. thank you, Megan. I followed your tutorial one by one, and tada~ my blog looks so beautiful now. Your tutorial is really nice and easy to follow....:)

  24. Please help! I have done this and followed your tutorial step by step! I created my four custom tabs and I am very happy with how they turned out. I am now stuck as to how to post specific things under those tabs. For example, only the about me section under about me. As of right now, everything is posting under the same "default" page

  25. Thanks for your tutorial! I have one question- my page tabs line up vertically under my header.. how do I get them to go horizontally like yours? Thanks!

  26. Thanks, dear! They are pretty working on mine! awesome <3
    Check my out on Dear Labina Design.

  27. Hi! Thanks a lot for this tutorial! I have the same question as Gina Marie - how to get page tabs to show horizontally? So far they appear vertically... ;)

  28. Hello! Thank you so much for this! Although I am having the same problem as a lot of others, the tabs are appearing vertically instead of horizontally. Any advice?

  29. Thank you so much for this useful tutorial! I will be applying this to my blog very soon :D


  30. Thanks for this. I will put on to my blog http://www.zackons.com
    Great tutorial!

  31. Thank you so much, this is really heplfull for beginners like me. You are great :)

  32. thanks for the wonderful tutorial

  33. I could give you a massive hug right now!!! I have been searching for how to do this for months and I've been struggling so badly- but I followed your super clear instructions and have finally been able to do it!!! I am so pleased and so grateful to you for this amazing tutorial. I actually cried when I got it looking as I wanted!