Production-Now.com Media Production Mentoring

Free online film school designed with beginning filmmakers in mind.

2.18.2009

Tutorial: Blogger Nav Bar

Many Blogger blogs look the same, since Google only offers a few standard templates to choose from. Blogger does point out that you can find many templates for free online. And that is a great option. But sometimes you just need to take matters into your own hands...

Today I'm going to walk you through adding a simple navigation bar to your blog that links to some of your most common subjects. For instance, this blog has a few tutorials, and I could add a Nav section with a button that links to those (and, in the future, I just may <smile>).

This tutorial is inspired by Thoughts of THAT Mom, and her really slick looking Nav:


Blogger Nav


Step 1: Add Labels to your posts that correspond to the Nav options you want to include. For example, I have added a "Tutorials" label to this post.


Tutorial Label


Step 2: Somewhere in the <head> area of your blog's html, paste the following code:

a.navigation {
background: #673f20;
color: #ffffff;
margin: 1px;
padding: 5px 30px 5px 30px;
border-width: 0;
text-transform: lowercase;
text-decoration: none;
font-weight: normal;
}
a.navigation:hover {
background: #5faab7;
text-decoration: none;
}

I included it with the other anchor style elements. Quick reminder: "background" dictates the color of the button, and "color" defines the color of the text.


Step 3: In the actual <body> section of the html--probably between the "header-wrapper" and the "content-wrapper" div--paste:

<div>
<a class="navigation" href="http://blog.production-now.com/">Home</a>
<a class="navigation" href="/search/label/Tutorials">Tutorials</a>
<a class="navigation" href="/search/label/Other%20Stuff">Other Stuff</a>
</div>

Each "a class" you include will be another button. If you want a Home option, you will need to include your entire url. But for all of your labels you can truncate the code to just the sub-directories as I have done here: /search/label/....

Note: If you have labels with spaces, you must include the %20 instead of a space in the url, as in the case of the Other Stuff button.


So there's the introduction. This will work, but it may not look good. You will likely need to style your navigation <div> so it fits more within your blog's layout. But you've gotten this far, so you're well on your way to having a sweet looking blog that is unique to you, and you alone.

 ~Luke Holzmann
Your Media Production Mentor

2 comments :

Suburban Correspondent said...

This is so cool. Not sure if I am brave enough to try it, but it would be fun to have a NavBar with headings for Mice and Vomit.

Luke Holzmann said...

As long as you save your HTML before you start playing, you can't mess up anything too badly <smile>.

~Luke