Design It Up! (6)

Design It Up! is a feature which helps you learn handy little tricks to tweak up your blog. This week I am going to focus on a really nice feature that will help out a lot of bloggers in organization: the Navigation bar. This bar is almost a must have for any blogger. They help you get organized, as well as help your readers locate materials that they may be searching for.

Start out by going to:

1.) Layout- Edit HTML.
*Please note that it is always a good idea to save your current template before starting to mess with your blog's HTML. This can be done by Downloading the Full Template on the Edit HTML page.

2.) Search for this code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Once you have located it, you will change the '1' to a '3' and the 'no' to a 'yes'. After this is complete, you can save your changes if you like since all this step has done is make it possible for you to add widgets to your header.

3.) Next you will go to Layout- Page Elements. This is the section where we are actually going to create the nav bar for your site.

4.) Create a new HTML/Javascript widget. Within the widget paste the following code:

<div id="newnavbar"> <ul> <li><a href="link">What it is</a></li></div>

You will paste in whatever links you wish to input into the link section, and name the link in the What it is section. If you want to add addition link for your nav bar, you will just add in:

<li><a href="link">What it is</a></li> after the last link. For example, this is what my code looks like:

<div id="newnavbar"> <ul><li><a href="http://www.theneverendingshelf.com">Home</a></li>
<li><a href="http://www.theneverendingshelf.com/2009/07/about-me.html">About</a></li>
<li><a href="http://www.theneverendingshelf.com/2009/07/review-listing.html">Reviews</a></li>

5.) Once this step is complete, drag and drop the widget into the header section. After this is complete, you may save again. Please note that if you view your site at this time, the links will look vertical instead of horizontal. This is due to a few more steps needing to be completed.

6.) Now go back to Layout- Edit HTML and find the Header section in your layout's code. It should look something like:

/* Header
-----------------------------------------------
*/

#header-wrapper {
background-image: url();
width:675px;
height: 398px;
margin:0 auto 10px;
border:px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto; margin-right: auto;
}

#header {
margin: 5px;
border: px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
*******

Now what you are going to do is, paste this code into your header. It does not really matter where it is pasted as long as it is after a }. However, I tend to put it at the top for easy access.

#newnavbar ul li{

font-size: 180%;

font-family: verdana;

display:inline;

padding: 15px;

margin: 15px;

margin-right: -10px;

}

#newnavbar li a{

color:#45D7DD;

}

#newnavbar li a:visited {

color: #45D7DD;

}

#newnavbar li a:hover {

background: #45D7DD;

}

****

This is the most difficult part of the whole tutorial because you determine how it turns out. I have emphasized the areas that you may wish to tweak. The first half deal with how the nav bar is situated on your blog. This section is really a matter of hit and miss. To be honest, it may take you a while to get things perfectly how you want it. Just be patient.

The second half deals with color. If you are not sure what color code you are looking for, visit the Color Picker which is an amazing tool.

Now it is just a matter of tweaking and Previewing your site until you get everything exactly how you want it.

Here are also additional tips that you may find useful:

* If you want the nav bar to be centered, then place <center> at the begining and </center> at the end of your code in the Header widget.

* It is possible to position your nav bar at the top or bottom of the Header space. To move, simply drag and drop to where you want it to be.

I know this one may be a little difficult to get just right, so if you have any questions, please feel free to contact me. Happy Designing!