Adding a Horizontal Menu (Nav Bar)

and other blog updates.  I've learned by trial and error and am by no means an expert at any of this stuff.  If you are an expert, please hurry down to the next post, 'cause this post might give you a headache.  Summertime is a good time to make blog modifications, don't you think?  It's rather slow, so if you mess up or really don't like what you've done, not as many people will notice.

For awhile now, I've been thinking about changing my format from three columns which I did early on, to stretch minima.  In the meantime, Blogger changed it's "Design" feature, and I didn't see the option anymore, so what's a girl to do?  I found where the old templates are hiding (and you can, too) from the Sneaky Momma blog post, Where Did the Old Templates Go? Her blog is worth checking out for all kinds of tips.

I also ran across a post last week from Scary Mommy that said something like (and I'm paraphrasing here) 'when someone comes over to your blog it should be like relaxing at the beach,' not waiting at a bus terminal.  I was thinking my blog wasn't looking very beach like...that's when I decided to pull the trigger on the changes.

After changing to stretch minima, I then wanted to add a horizontal menu (sometimes called a navigation bar or nav bar) and clean the screen up a bit.  I've seen the very top blogger bar also referred to as a navigation bar, too, but that's not what I'm referring to.   You may be able to see in my first photo that awhile back I had a custom nav bar.  Then, I discovered Blogger Pages, so I switched over to those.  They are quite convenient, but aren't as pretty and you can't link to a series of blog posts, i.e., recipes.  So, back I was again looking for the how-to's on making another one.  The resource I used the first time around didn't exist anymore.  Luckily for me, with the substitute instructions I found, I like the new bar better because when you click on the tab it doesn't open a new tab in your browser which my old one would do.

I followed the directions at the Tips for New Bloggers blog using the post Horizontal Menu and Navigation Bar.  This was easier than the tabs I set up before (it could be because I have more experience, but it seemed easier).  You only add one bit of code to your html, the rest is set up in adding a Gadget.  So if you mess up, you only need to fix Gadget code, not crash and burn your entire template--a definite plus!  Okay, I'm going to trust that you can add the code on your own.  I would suggest doing it when you know your concentration will be at it's best.  What I want to talk about is how to get the actual tab graphic made.

First find a croppable photo.  I got this tip from Linda at Craftaholics Anonymous from her Linked Menu post.  (You don't need to worry about linking your menu, unless you want to, it's just to give you ideas for photo cropping.)  For my new tabs I used this photo:

Yes, this photo (!) and cropped the top of this primed little bench so it was a long slim photo primarily white with some wood striations.  Then I uploaded it to photobucket. While there, under the tab "Decorate," I selected "Borders" and rounded the corners slightly. Then I custom colored it using the "Effects" tab to "Tint" my photo.  From that point, I had this to work with (note the streaks from the wood grain):



From here, I used the "Decorate" tab again to add text.  You'll need to make as many copies as tabs that you want.  If you'll notice my new tabs the "about me" is darker, which is not because I want you to read about me, but because I left the type black instead of changing it to gray.  That's totally a mistake (which I can correct, but haven't yet).

So, if you are looking for all of my cute little link party buttons that used to be in my left sidebar, they are now under the Party tab.  The blog buttons are now under the Friends tab.  You get the idea.

One last fun announcement, I had a new blog button made for me - hooray!  Have you been to Bird Crafts?  Her blog is where I got much of my inspiration, so I had Bird "craft" a button for me.   To get the code, go to my Button page. 


I'm linking with Donna: