how to design a simple navigation bar // blogger

Sometimes the default Blogger widgets just don't suit your style. Or sometimes it's too hard to customize them and get them the way you want. I didn't like the "Pages" widget when I was designing my blog, so I decided to create my own navigation bar. I'm really happy with the way it turned out. It's simple and clean. If this is the sort of navigation bar that you would like, then I hope this tutorial can help!

First, go to Dashboard > Layout > Add a Widget > HTML/Javascript and copy and paste this code into the textbox.

<p style="text-align: center; color: black; font-size: 15px; font-style: italic; font-family: Josefin Sans">

<a href="YOUR LINK URL"> YOUR TEXT </a>

&nbsp;&nbsp;&nbsp; + &nbsp;&nbsp;&nbsp;

</p>

Now let's walk through this code. First, the <p> tag tells the browser to write some text, and the style attribute allows you to make it look nice!

Since all of the actual words (about me, archives, blogs, contact) will be links, you will need to customize those separately if you don't like the way they look. You can do this by going into Template > Customize > Advanced > Links or, if you want more options, you can go to Template > Customize > Advanced > Add CSS and use this really helpful tutorial from Bloggeristan.com to customize them. This will change all of the links on your blog.

You can change the text in green and blue to change how the separators (in my navigation bar, they are pluses) look. You can change the color, font size, make it "italic" or "normal", and change the font. Here is a helpful tutorial for adding custom fonts to your blog.

Next, you will need to copy the third and fourth lines and paste one for each of the links that you will have. I have four, so my code would look like this:

<p style="text-align: center; color: black; font-size: 15px; font-style: italic; font-family: Josefin Sans">

<a href="YOUR LINK URL"> YOUR TEXT </a>

&nbsp;&nbsp;&nbsp; + &nbsp;&nbsp;&nbsp;

<a href="YOUR LINK URL"> YOUR TEXT </a>

&nbsp;&nbsp;&nbsp; + &nbsp;&nbsp;&nbsp;

<a href="YOUR LINK URL"> YOUR TEXT </a>

&nbsp;&nbsp;&nbsp; + &nbsp;&nbsp;&nbsp;

<a href="YOUR LINK URL"> YOUR TEXT </a>

&nbsp;&nbsp;&nbsp; + &nbsp;&nbsp;&nbsp;

<a href="YOUR LINK URL"> YOUR TEXT </a>

</p>

Make sure you remove the last "&nbsp;&nbsp;&nbsp; + &nbsp;&nbsp;&nbsp;" because that will add a divider after your last link and you don't need that!

Each <a> tag is a link. When you click on the text that you replaced YOUR TEXT with, this link will take you to the URL that you specify.

If you are not sure what URL you should use, head to the Pages tab in your blogger dashboard and click "view" under each page. This will open up a new window with the URL in the address bar.

Now for those weird &nbsp; things. Those are actually just spaces! When the browser sees that, it knows to add an extra space. You can add more of these or take away some from each one to get the spacing just right for your blog.

You can also change the blue "+" in the middle to a divider that you like. You can use +, |, //, -, or really anything you want.

I really hope that this tutorial has helped you! I remember when I started this blog and was reading tutorials to change things. I wouldn't have thought that I would soon be able to write my own! If you have any questions, feel free to comment!

Thanks for reading,

Bela