Etsy Treasure Chest: Make a professional navbar for your blog!

So what is a navbar you ask? When you go to a website, and you see those buttons all across the top just underneath the banner, linking to different pages of the site, that's a navbar!

Did you know you can put one on your blog? It's pretty simple too!

This time around I'm going to give you a copy and paste code. Perhaps later on we will go into the details of customizing your navbar with images, but for now, lets focus on creating buttons for a navbar.

To begin, you need to create pages to link to. Do this by creating blog posts. For instance, lets say you want an "About Me" page. Create a new blog post titled "About Me" and write whatever you want. Of course you can always write about yourself later, but for now just make sure you create the page. These are also called static pages by the way!

Now the last thing you want is for this page to show at the top of your blog, right? Because it's a blog, and that's what blogs do. They show everyone your most recent posts. But we can fix this!

When you create your blog post, look at the bottom of the post. You should see where it says "post options". Click on this. You will then see where the post date is. Simply change this to a much older date...all of my static pages are dated before any of my other posts.

Now publish your post. This blog post will now be a post buried beneath all of your other posts.

Now copy the url and paste it into a word document for later use.

Now go to your blogs layout>page elements. Click add gadget, the one right above the header.

Choose html/javascript. This is where you are going to put the navbar code!

Here is the code to one button.

<a href="Your blog post url goes here!"><button style="background-color:transparent"><b><font color="white">Page name here</font></b></button></a>

Copy and paste this code into your gadget box, and replace "your blog post goes here" with the url to your about me page. then Replace "Page name here" with the title of your page, or whatever you want the button to say. This is where your word document comes in at. Go back to your word document and copy the url you pasted there and repaste here in the code.

Also notice where it says <font color="white"> . This is the color the font inside the button will be. You can change the "white" to any color you want. Mine is actually black. The original code I use on my blog doesn't actually have this option, because I didn't need it, but I thought you might like to have this option of changing the font color.

Here is an example of what the home page button looks like.

<a href="http://www.etsytreasurechest.blogspot.com"><button style="background-color:transparent"><b><font color="white">Home</font></b></button></a>

Click save, and drag your gadget so that it is underneath the header. Save again, and look at your blog! There it is, a pretty button that links to your page of choice!

Ok, so you want more than one now right? Of course! You want a Home button, and an About Me button, and a Shop button, etc. Just create more "older" blog posts, and repeat the process above!

Now for some slight customization.

If you're like me, you have a whole bunch of stuff you want to put in your navbar. In fact, there's too many to fit all the way across there. Blogger will automatically move the ones that don't fit down to another row. However, you can choose to control this yourself. Lets say you want 5 buttons on top, and 5 on the bottom.

Place this code after the fifth button

<br/>

This will put a break in your code. Now save this and refresh your blog to see how it looks!

Now you want something to separate the buttons from the blogpost don't you? I simply put a long line underneath the buttons. Just put this code after all of your button codes <hr color="#8A6C50" width="50%" size="4"/> <br/>

And now you have a nice brown line underneath all of your buttons!

Ok, now you don't like how all the buttons are clustered to one side of the blog? You can center all of your buttons easily!

At the beginning of the code, put this tag <center>
and at the end of the code, put this tag </center>

Now, everything, buttons and line, are centered over your blog posts.

But maybe you don't like the line being brown? Or maybe you want it to be a different size? Easy!

Go back to the code you pasted for the line. To change the color, change the number #8A6C50 to something you like. For instance, if you want it to be white, change it to #ffffff or if you want it to be black, change it to #000000 etc. You can find html color codes on the web, just google, "html color codes"

Now to change width, just change the percentage where it says "50%" to something else. To change the thickness, change the size number (size="4"/>)

Ok, so maybe you are a bit confused about how all the code should look together? Here is what the code to mine looks like! Notice how I keep everything separated. This will not affect the layout on your blog, it's just so I can see the code more easily.
Also you probably don't want to copy and paste this code, since this is the original code I used on my blog, and doesn't have the option of changing the font color like the above code does)

Beginning of code.

<center>

<a href="http://etsytreasurechest.blogspot.com/"><button style="background-color:transparent"><b>Home</b></button></a>

<a href="http://etsytreasurechest.blogspot.com/2008/11/resources.html"><button style="background-color:transparent"><b>Resources</b></button></a>

<a href="http://etsytreasurechest.blogspot.com/2008/11/favorite-shops.html"><button style="background-color:transparent"><b>Favorite Shops</b></button></a>

<a href="http://etsytreasurechest.blogspot.com/2008/11/giveaways.html"><button style="background-color:transparent"><b>Giveaways</b></button></a>

<a href="http://etsytreasurechest.blogspot.com/2008/07/submit-content.html"><button style="background-color:transparent"><b>Submit Content</b></button></a>

<a href="http://etsytreasurechest.blogspot.com/2008/11/contact-me.html"><button style="background-color:transparent"><b>Contact</b></button></a>

<br/>

<a href="http://etsytreasurechest.blogspot.com/2008/11/advertise.html"><button style="background-color:transparent"><b>Advertise</b></button></a>

<a href="http://etsytreasurechest.blogspot.com/2008/11/archive.html"><button style="background-color:transparent"><b>Archive</b></button></a>

<a href="http://etsytreasurechest.blogspot.com/2008/11/about-us.html"><button style="background-color:transparent"><b>About This Blog</b></button></a>

<a href="http://etsytreasurechest.blogspot.com/2008/11/about-me.html"><button style="background-color:transparent"><b>About Me</b></button></a>

</center>

End of code! I should mention that this code is for transparent buttons. Perhaps later on I will write another post about how to customize the button with images or different colors, but for now, have fun with your transparent buttons!

If you decide to try this, please come back and leave a comment for me, I'd love to hear how it worked out for you!