Tuesday, April 14, 2009

Blogger Tips & Tricks: Functional Headers

Welcome to my second post of tips and tricks to make Blogger work for you! One of the features I began to turn green over when I saw it on other Blogger sites was a header with working links, tabs, or whatever you fancy. You can see examples on Nymeth's Things Mean a Lot and Becky's Book Reviews. (Yes, that's where the envy began, I admit it!) After fruitless hours of searching for a way to do that within Blogger's settings and layout page, I did some searching on Google, using phrases like "header tabs in Blogger" and "header links in Blogger." Finally I was able to answer the question:


You know those "Add a Gadget" links in the "Page Elements" section of Blogger's "Layout" tab? Notice you don't originally have that option with the header? Well, here are instructions for adding elements to the header (meaning I could create tabs and links): Blogging For Good In the Modern World.

Finally! I could give up my header-envy and focus on other blog elements to be jealous about. :-)

You can choose to add your gadget above or below your current Header field. One quirk I haven't been able to fix: The additional element is partially hidden behind the sidebar and posting sections in the Layout. It doesn't appear that way on the actual blog, but for editing and moving objects, it's made it slightly more challenging. If anyone knows how to fix that, I'd be eternally grateful! See, these posts aren't all about me telling you what I know about Blogger, because I still have a lot to learn and hope that many of you will share your ideas with me.

But back to links in the header... Here's what I chose to do--you may think I'm nuts and will opt for an easier method. I decided to create buttons that had the look and feel of my blog, using a combination of Picture Viewer/Editor (on the Mac, you could use Paint on a PC) and Power Point to play around with text options, etc. (If you have access to it and are familiar with Photoshop, I'm sure you could do really amazing things with buttons, etc.) Anyway, Macs have this really cool feature where you can "take a picture" of just a part of what is on your screen, similar to the Alt-Print Screen option on PC's. **If PC's let you take a partial-picture, perhaps someone can share that info in a comment.** Anyway, I took a picture of one of the butterflies in my header, sized it down and popped it onto a rectangle of a coordinating color in my blog (all in the Picture Editor) and then I typed up some text (without a background color) in Power Point (again I tried to get a custom font color similar to one of my blog colors), copied & pasted it on the picture, tweaked the text box size as needed, and boom! A picture of a tab that could be linked back to a post on my site. Not to mention, we've also confirmed that I'm a HUGE dork!

I uploaded all of my "tabs" to Photobucket--if you aren't using a photo sharing web site, I highly recommend it. You'll be surprised how quickly you take up your Blogger storage space by uploading every picture you need, every time you use it. BTW, as for how to size your tabs, I have to be completely honest: I got lucky that all of mine fit perfectly across my header. But you should be able to determine pixel widths that would work to match up to the width of your Outer-Wrapper (mentioned in yesterday's post). Or, if you're just going with simple text links, the text will conform to the outer-wrapper width, and depending on how many links you have, you may end up with multiple rows when you look at the blog in your browser window.

Anyway, from there I added an HTML gadget to my header and pasted the code for each tab, one right after the other. (I would also recommend using an HTML gadget as opposed to Link Lists, so you can run the links horizontally under the header, assuming that is the look you are going for.) Here's an example of what the HTML code looks like from Photobucket (yes, it's ugly, I'm sorry):

Using the "a href" code above, it is linking to the picture's address on the photobucket web site. (The code that begins with is for the picture itself.) You can change that web address to link to the post with the information pertinent to your tab by replacing that code with the permalink of your post:

NOTE: I chose to center my tabs while I was adding them, since originally I wasn't sure if I'd have enough to fit across the header. You can do this by starting the HTML code with and closing it off after you've pasted all your tab codes with .

You can link text the same way you linked those pictures up there, as well. Simply use the code as follows:

If you want the link to open in a new window so that your site doesn't disappear from view, add this code right after the "URL you wish to link to"

(precede the word target with a space as shown in the example below)

So your new code looks like this:

You can add that target="_blank" code after any URL you want to open in a new window. So you could do the same with your tabs or any links you include in your blog posts. I have to admit I haven't bothered with it there because it would be too much trouble--I know most of us don't have all the time in the world to devote to our blogs--we need to post and move on!

Questions? Need clarification? Does this help you at all? Leave a comment and let me know what you're thinking!

Stay tuned for the next edition of Blogger Tips & Tricks: Grab Buttons/Badges


  1. *claps* Another excellent post! You explain everything so well.

    I saw you ask Kristina about how to check who your top commentators are - there's a tutorial here. If you don't want a sidebar widget but would like to access the info from time to time, just copy the code to notepad, save it as .html, and ta da! The downside is that the scrip doesn't process your total comments, just the most recent 5000.

    I also have a file with code for neat stats like total posts and comments received that I use when I'm feeling nosy :P I can e-mail it to you if you want!

  2. Nymeth!! Thank you so much for the link to the tutorial, you're my hero today! :-) I had found the code for post and comment totals, but not a by-commentator total. And I'm also glad you think I explain everything well, because as I was re-reading the post for the millionth time, I was really afraid that it sounded more complicated than I wanted it to.

  3. This is fabulous Melissa. I hope to come back and carry out some of these tutorials when I have more time. Thanks for posting.

  4. Ooh thanks for this, I was wondering how everyone did it!

  5. oh my word -- I spent literally 6 hours one weekend trying to figure out how to add tabs to my header! Never could figure it out ---- so I had to make do with links.

    This is GREAT information and I plan to have a functional header on my blog soon :)

  6. I'm bookmarking this so I can come back to it. Thank you so much for the tips!

  7. Scrap girl ~ Let me know if I can be of help when you get started!

    Molly ~ For all I know there's another way, but like you I spent a long time trying to figure it all out. Looking forward to seeing your header soon! :-)

    Literary Feline ~ You're welcome! Hope the tips come in handy!

  8. Oh my goodness, Melissa!! I'm in complete awe. How long have you been blogging for (I know you have some other personal blogs). I've been going at this for almost two years and it took me that long just to figure out how to change my background color without getting a new blogger template. I'm impressed!!

  9. Thanks, Trish. I knew my dorkiness would be on display with these posts. :-D I've been blogging since last August, when I started my personal blog. Honestly, most of what I've learned I've done by searching for what I want to do. And since we're being honest, I also think this blog (not to mention reading other blogs) has become a bit of an obsession. :-)

  10. I have simple HTML links under my header but have been thinking about changing them, and this post will help!

  11. I've spent the better part of today sorting out my blog, and adding a nav bar, and THEN I find you've blogged about it. 8-) Typical. Great post, very easy to understand!

  12. Your blog has given me so much inspiration and information. I really appreciate it!. I just did the functional header thing. I tried putting the HTML gadget above my posts in my header, but it isn't where I want it. I tried to get it moved higher, but that it the only place blogger will let me put it at the top. I want it to be in the header, not just above the posts. Here is my blog address so you can see what I am talking about. http://romanceaddictedreviews.blogspot.com/
    Any suggestions?


This blog does not use CAPTCHA, please comment freely! However, I have had to disable the "Anonymous" commenting feature since the spammers are just out of control. Thanks so much for taking the time to leave a comment -- I love to hear what you think! Feedback and discussion are always welcome. Happy reading :-)