Tech Tuesday: Customized Horizontal Navigation

Yes, this post almost didn't make it to Tuesday...

Let's begin by stressing that I am NOT tech savvy AT ALL.  I want to make this clear because all of my "tech" posts will be the result of trial and error (usually after many, many errors).  I probably won't use appropriate tech lingo and I apologize in advance if my explanations are more stream of consciousness and not really coherent.  Additionally, these are tech-related things that worked for me in my blog re-design "adventure" (or rather, disaster), and they haven't been tested anywhere else...  Also, my advise is strictly limited to Blogger - can you imagine what a mess I'd be if I tried to figure out Wordpress, TypePad, Tumblr, etc?!?!

That being said, here's what I learned about creating a customized horizontal navigation bar thing.  I'm horrible, absolutely horrible, with all that HTML stuff.  I have no idea what I'm doing and typically end up making things worse than they were. 

I began by attempting to add a HTML/Java Script gadget.  First, I completely wrecked the code that Kileen of Cute and Little explained so eloquently in her Tutorial: Creating Custom Blogger Tab Navigation.  Yes, I managed to fail at implementing the most simple and well-instructed of tutorials.  Second, I fixed my code, but couldn't drag the gadget to the top of my layout under my header.  I tried this for probably a day and a half.  Lame, I know.  Third, I finally figured out how to move the gadget to the top, but it wouldn't show itself on my blog - taunting me like the evil little thing that it is.  I fiddled with this for another day or so before I gave up (*note, it showed up whenever I dragged it to another location like above my Blog Posts or on my sidebars).

That's when I started cursing at my computer screen.  Shiner probably thought I lost my mind or assumed he did something wrong.  Poor dog.

I started scouring the internet for other options and found out that everyone is smarter than me.  Literally.  I could give myself some leeway and say that I found a handful of articles/posts about using Link List, but sadly there are hundreds.  So, let me add another one to the interweb...

This is the easiest friggin thing ever.  Click on the pictures below to enlarge.

BEFORE YOU START...
Obtain all URL addresses that you want to display on your navigation as tabs.  For instance, specific pages that already exist on your "Pages" gadget (ex: About Me) and labels that you'd like to display all related posts (ex: Fitness).

To access the URL for a specific page...  From your blog, click on the page you want.  When that page is displayed, copy the URL and save it to a document.  Do this for every page you want to link to on your navigation.  It should look something like this: http://www.fitfashionfoodie.com/p/about-me.html

To access the URL for a label that will display all related posts...  From your blog, click on a desired label from one of your blog posts (ex: I wanted a "Fitness" tab so I went to a post I wrote where I included the label "fitness").  Copy the URL and save it to a document.  It should look something like this: http://www.fitfashionfoodie.com/search/label/fitness

Don't forget to save your document! (or you'll have to go through the madness again)


FROM YOUR DASHBOARD...

1. Click on the "Design" tab.
2. Click on "Page Elements."  From Page Elements you can edit your layout.  
3. Click on "Add a Gadget" from your sidebar. 

ADDING THE LINK LIST GADGET
Scroll down until you find "Link List."  Click on "+" to add the gadget. 

Once you click "+" the "Configure Link List" page will appear.  Leave "Title" and "Number of links to show in list" blank.  Enter a link you saved earlier into "New Site URL."  Type what you'd like to appear as the name of the link on the navigation into "New Site Name."  Click "Add Link."  Repeat with each link.

Once you've entered all of your links it should look something like this:

You can move the links up and down to customize how you'd like them to appear on your horizontal navigation.  When you're satisfied with the order of your links click "Save."

FINISHING UP...

Once you save your completed Link List, you'll be directed back to your layout/Page Elements.  From here you can drag the gadget from the sidebar placement and position it under your header.

To ensure you only have one navigation on your blog, click on your "Pages" gadget on your layout to edit.  Leave the "Title" blank and uncheck all of the pages.  Click "Save" to save the new settings on your Pages gadget and you'll be directed back to your layout.  Click "Save" on your layout.

View your blog and make sure your new, fancy-schmancy, customized horizontal navigation is displayed properly and that all of the links work.  DONE!