28 July 2014

How To Customize Your Navigation Bar

Navigation bar (n): that thing that typically runs horizontally right underneath your header.  Maybe above it.  And sometimes it's vertical as a fancified list.  But it's always at the top, and it always has some prominence because it's displaying the most important parts of your blog in a compacted format.  You put links to your About page there, as well as your Contact page, as well as a few things like your Review Policy and Review Archive.

Making this sucker look good goes a long way towards instantly improving the look of your blog.

Some things to consider when it comes to navigation bars:
  • you can't put every important link you've ever had in the history of your blogging career in it
  • you're going to become a brilliant apprentice of creating navigation bars
  • you're going to do great

In this tutorial

What I'm about to teach you will have you leaving behind the navigation bar provided by Blogger and headed into the realm of a fully customizable navigation bar created entirely by you.  (And it's going to be a horizontal one, just so we're clear.)

Step #1

For organizational purposes (and because you're probably very new at this, which is perfectly okay), open up a document you can copy stuff into.  It can be a Word document or, if you're a Mac user, you can use TextEdit.  

Step #2

Copy and paste all the links you want in your new navigation bar into your document.  This is a great opportunity for you to prioritize your links.  If you need help with knowing what should go in your navigation bar, take a look around at other blogs for inspiration.  (If you're completely nonplussed, go with this basic template: Home, About, Reviews, Review Policy, Contact and add and subtract as needed.)

pause / note

What I'm going to teach you is how to install something with HTML that you're then going to style with CSS coding.  It sounds super crazy, I know, but it's actually (to me) the easiest way to do it.

Step #3

Here's what you're going to learn: how to create HTML links.  If you're already smooth and savvy, you know how to do this.  It's the same code you use to put your blog link in your signature when you leave comments on other blogs.  Hold onto your pants.  Here we go.

Here's how you create a link:
<a href="LINKY">This is a link</a>
Linkify all the links you copy and pasted into your document. 

pause / note

Do not put a break after the links.  That's one of these: <br>  If you're creating a horizontal bar, you want all of your links running in a proper line, which means you don't put breaks in.  And when I say you don't put breaks in, you don't put it in the HTML way.  You can have your links looking like this:
<a href="LINKY">This is a link</a>
<a href="LINKY">This is a link</a>
<a href="LINKY">This is a link</a>
<a href="LINKY">This is a link</a>
<a href="LINKY">This is a link</a>
For organizational purposes, this is great because it's the easiest to see and edit.  But don't put <br> after any of those </a>.

Step #4

Set up the customization.  I recommend this method because it's the easiest way.

Above all the <a href="LINKY">This is a link</a> stuff, you're going to create an anchor.  And you can name your anchor whatever you like.  I typically make it related to my navigation bar.  Mine is typically "navbar" or "mynav".  It goes like this:
<div id="ANCHOR_NAME">
Fill in any space with an underscore.  You can't have spaces in div id's.  Then at the very end of your list of links, close off this tag by putting:
</div>
Boom.  You're done with the HTML stuff.

Step #5

Go to the Blogger dashboard, get to your blog, and get to the Layout tab.  There, click Add a Gadget.  Select the HTML/Javascript option.  Copy and paste what you've got in your document into the field.  Reposition it so that it's at the top, underneath your header.


pause / note

Do not title your navigation bar.  Just don't.  There's absolutely no need.  And Blogger will let you save it without a title, so don't fret.


pause / another note

Take a deep breath.  You just underwent one of Hercules' labors.  You did a fantastic job.  :)  Ready to hit another one?

Step #6

Assuming you're still in your Blogger dashboard, head over to the Template tab.  Then hit the big orange Customize button.  Then head to Advanced, then to Add CSS.  (We're going to add some CSS.)

Step #7

First thing to do is make sure that the only thing we're messing around with is our baby navigation bar.  (It looks weird right now, I know.  We're about to unsmoosh everything.)  To customize just our nav bar, throw down this sucker:
#ANCHOR_NAME a {
}
Whatever you did for your anchor name, put it after the pound sign exactly.  Capitalization and everything needs to be exact.  (When things come after the pound sign is the only time capitalization matters in code, to my knowledge.)  And make sure you've got those fancy brackets.  Not the lame, boxy ones.  The fancy ones.  Because we're getting fancy here.

pause / note

The little "a".  It isn't part of the anchor name, and so therefore should be separated from it with a space.  The "a" targets the links sandwiched between the anchor you put in the HTML.  

Step #8

In between these fancy brackets is where all the magic happens.  First thing we're going to do is get everything centered.  On the line after the first bracket, slam down this monster:
text-align: center;
The text should swoosh to the center.  (And yes, that's a colon and a semi-colon.)

Step #9

Now we're going to unsmoosh those suckers.  To do that, we need to target the space between each link.  (That's called a margin.)
margin: 0px 15px;
Here's what the numbers do: the first number adjusts the top and bottom, the second number adjusts the left and right sides.  Adjust the second number as much or as little as you like until it looks good to you.

Step #10

Now that everything is center and unsmooshed, we can stylize.  Let's start with font.
font-family: Georgia;
Or whatever.  Whatever font you want to use, there's where you use it.
font-size: 16pt;
That obviously changes the size of the text.

Step #10.1

Maybe you want to make it all uppercase?  You can do that with this:
text-transform: uppercase;
Or hell, make it lowercase.  Lowercase looks awesome, too, you know.

Step #10.2

Or maybe you want to change the color.  That's totally cool, too.  Use this:
color: #123456;
I just filled that in for effect.  Use whatever color you want.

Step #10.3

Or hey... wanna be really fancy?  Let's do hover effects.  You're going to create a new bracket for this, so that you can customize just what happens when your mouse hovers over the links.
#ANCHOR_NAME a:hover {
}
You cool?  Alright, let's keep going.

Step #10.4

Let's say you want the text to be a different color when you hover over it.  That's typically what happens.  This goes inside those brackets:
color: #654321;
Boom.  You just did a hover effect.

pause / note

Because Blogger can be weird and really behind the times, you can't view hover effects while in preview.  So you'll have to hit Apply to Blog and then View Blog and roll your cursor over the links to see what happens.

Step #10.5

Here's something I love to do that is really neat looking and pretty simple.  Change in opacity.  In the #ANCHOR_NAME with the little "a" put:
opacity: 0.5;
You can change the number.  0 is completely transparent and 1 is opaque.  

Then in the #ANCHOR_NAME with the "a:hover" put:
opacity: 1.0;
Then hit Apply to Blog, View Blog, and check out your awesome hover-ness.

pause / note

You can do a ton of things to customize your navigation bar.  So many things that I can't list them all here.  I just showed you the bare bones of it.  If you're looking for more CSS elements to try out, I'd recommend w3schools because they have a ton of resources for coding.  And they have it where you can try it out yourself right then and there.

The Final Product

Let's make sure we're all good here.  This is what you should have in a gadget in your Layout:
<div id="ANCHOR_NAME">
<a href="LINKY">This is a link</a>
<a href="LINKY">This is a link</a>
<a href="LINKY">This is a link</a>
<a href="LINKY">This is a link</a>
<a href="LINKY">This is a link</a>
</div>
And this is what you should have in your CSS area:
#ANCHOR_NAME a {
font-family:georgia;
font-size: 16pt;
text-transform:uppercase;
color: #123456;
opacity: 0.5;
}

#ANCHOR_NAME a:hover {
color: #654321;
opacity: 1.0;
}
You are brilliant.  Give yourself a nice chocolate chip cookie.

to conclude

If there's something you wanna do, but can't find it because you don't know what it's called (or because it's so revolutionary that it doesn't exist yet) feel free to ask me in the comments.  I'd be very happy to help. :)  I hope this tutorial has helped you!