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 'http://www.yoururl.com' 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!
