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:

HOW CAN I CREATE A FUNCTIONAL HEADER IN BLOGGER?

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):



<a href="http://i116.photobucket.com/albums/o4/mlbraves03/Blogger%20Stuff/SiteButtonFinal.png"><img border="0" alt="Photobucket" src="http://i116.photobucket.com/albums/o4/mlbraves03/Blogger%20Stuff/SiteButtonFinal.png" /></a>

Using the "a href" code above, it is linking to the picture's address on the photobucket web site. (The code that begins with <img...> 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:



<a href="http://www.melissas-bookshelf.com"><img border="0" alt="Photobucket" src="http://i116.photobucket.com/albums/o4/mlbraves03/Blogger%20Stuff/SiteButtonFinal.png" /></a>

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 <center> and closing it off after you've pasted all your tab codes with </center>.


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



<a href="URL of web site you want to link to">Text you want to link.</a>

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"

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

So your new code looks like this:



<a href="URL of web site you want to link to" target="_blank">Text you want to link.</a>

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