Wednesday, March 11, 2009

Win-o-the week: Creating a navigation bar for your blog

So I was going to originally post this on Saturday, but then, well, LIFE happened. And darn it, it was fun. Better late than never!

First: these instructions only apply if you use Blogger. Wordpress, Typepad and others use different programming, so the instructions I provide are in XML. Its my intention to word each of these "tidbits" to be useful for those of us {ahem} who may not be the most technically inclined. Even so, if you find that I've gone too fast or missed a point, please email me or otherwise let me know. I'd be happy to help as much as I can.

You've backed up your blog template, right? 'kay. Good.

On we go.

Just so everyone knows what I'm talking about, when I say "navigation bar", I'm talking about what I have up at the top of my blog, under the header graphic and over the place where my posts start. See the "Home", "Meet Mommy", etc?

They're super nice if you're browsing someone's blog and would like to get to know them better. Imagine you've followed a link from a blog carnival and think, "Wow, this gal's really funny/clever/good at making cake. Wonder what else she's written!" Because carnivals request that you include permalinks, having a "Home" button so that folks can easily jump to the most recent post you've written is a good idea.

Think about what other information you'd like to make easily available to your blog buddies. Of course there's your Blogger Profile (see mine here) but you may want to create a more in-depth or unique "about me" page. Wordpress and other blogging programs have dedicated pages for such things, but you can cheat on Blogger by writing a post, changing its date and burying it in your archives.

This is also a good way to clean up your sidebars!

Once you have decided what pages you'll link to in your nav bar, copy their permalinks into Notepad or something similar. (I find it easier to work with.)

We're going to start by modifying the code IN the Notepad document you used to make your template back-up.

Step 1: Save a copy of your blog template backup. Call it whatever you want, so long as you know you aren't modifying the original. I can't tell you how many times I've goofed in my code and had to restore from a backup just like this. Code is picky - if even one . is off, your page may go all "wonky" on you.

Step 2: In that copy of your template backup, find the

/* Page Structure----------------------------------------------- */

section and scroll till past all the entries (#right, #main, etc.) until you see

/* Title & Description----------------------------------------------- */

Just above this 'Title & Description' code, we're going to enter a little section defining the style of your "navbar".

This is the code I have in mine. The sections I've bolded are where you're going to need to get a bit creative and adjust the numbers (leaving the px in place) to account for the size of your header graphic and the height of your nav bar. You'll have a chance to preview this after you copy it into the code section of your template.

#navbar-wrapper { height: 55px; width: 1030px; top:260px; }
#navbar { height: 55px; width: 1030px; }

"Top" here refers to the number of pixels from the top of the browser window you want your nav bar to start. Depending on the size of your header graphic, you may need to bump this number up or down.

Step 3: Find

Just under that, we'll need to put the actual code that defines what should be in the nav bar. I'd allow you to just copy and paste what I have below, but Blogger was having a near heart-attack and kept reformatting the code when I put it into one of those handy dandy little boxes that will let you copy code. You'll just have to be extra super careful to type this out exactly.

You'll obviously replace '' with the appropriate corresponding URL for your blog or individual post, and you can change the words (Home, About Me, Awards) to be whatever you want those links to read.

Step 4: Now we'll go paste your new code in over the old. Do a "select all" of the entire document where you've just added the nav bar code, then copy.

Then, from your dashboard, click layout,

then Edit HTML.

You'll see this:

Put your cursor anywhere inside that 'edit template' box, and select all again. Only this time, just delete the code. Then do a paste of the new. Click Preview.

You'll see a preview of your new blog layout that isn't yet made "real" yet. You can then go back and forth, adjusting things as you'd like until you're ready. Then click Save Template.

Congrats! You should then have a pretty navigation bar!

Want some examples of good navigation bars? Check out Sarcastic Mom, Anglophile Football Fanatic and Autumn at Oak Hollow.

*These examples use font only for the nav bar. If you choose to use graphics for your buttons, the code is a bit different. I recomment uploading those graphics to Photobucket, and then the code would look like this:

Was this helpful to you? Stumble it so that it might help other bloggers, too!


Kaycee said...

This is a really good tip. I love your nav bar.

Elizabeth Symington said...

Over the weekend I learned how to make a home button. Ironically the next thing I wanted was a nav bar. Thank you for posting! I'll use your tutorial when I'm not so tired.

Jenny said...

Awesome tip. I bookmarked it and will work on it tomorrow!


LaVonne Long said...

Okay, I definately need to read this when it is not after midnight. thank you, thank you. I have been searching "blogging tips" today and nothing valuable came up. WWFW link has made my day.

~*Michelle*~ said...

Thanks! Will bookmark this when I have time to really read it all. I was planning on sprucing up my blog and this will def. come in handy!


Mama Smurf said...

I would love a navbar but lost me in step 2. I think I'd rather have someone do it for me cuz computer techy talk hurts my brain. =)

mub said...

Oh yay! You deserve an award for posting this... now I need to get brave and try it out =)

Amy said...

Came over from WFMW.

I think I love you.

Um, now can you tell me what "Stumble It!", "Save to", and "Digg This!" mean? Yeah, I'm new at this...

Oh, and check my blog now and in a few days (okay, maybe a week depending on how quick I am) to see my hopefully swanky new nav bar!

Amy @ muddy boots

Colleen - Mommy Always Wins said...

I love you, too, Amy. ;-)

That's a great topic for next week's "win of the week". In fact, a bloggy friend of mine, Jennifer (Playgroupie) wrote a few posts about Stumble Upon that you should check out. Come to think of it, I think there's a link to them in her nav bar!

La said...

thank you!!! this is what i was needing! =)

Kate @ Life As I Live It said...

Thanks Colleen! I may have to give this a try.

Heather@Autumn At Oak Hollow said...

Hey, thanks for the shout out. I'm glad I wasn't used as an example of what NOT to do :-)

Kim H. said...

One word....


Karen MEG said...

Thanks for this Colleen... I'm gonna give this a try, but only after a few drinks to make things clearer ;)

Secret Mom Thoughts said...

Thanks for the tips. I'm going to try this when my head is not swimming.

Jenny said...

LOL, I'm stuck at step #2. I don't have /*Page Structure-----------------------*/ or the next part.

mub said...

I'm wondering what template you're using to do this with? I've got mine set up on Minima and don't seem to have the text listed on step 2.

LaVonne Long said...

Okay I am starting to work on this. I linked to your post on my latest blog post. Thanks again.

Roger said...

Consider yourself bookmarked - well at least this post. Next, I'll need your emergency email address so I can contact you when I crash my blog. :)

Anonymous said...

Very nicce!