Freckles in April Home About Style Recipes DIYs Subscribe Babble Facebook Twitter Pinterest Instagram Google Plus

Thursday, June 21, 2012

DIY Blog Design Part 6: 100 Level Navigation




There are LOT of different ways to do your nav bar. I'm going to talk about three different options. One is really easy, one is of medium difficulty and one is quite a bit more work. The difficult and time consuming one is my fav (of course). Today I'll focus on the simple nav bar. This is a really long tutorial for something really simple, but I don't want to leave anyone in the dust by assuming you know something! Also, just because I explain how to do something one particular way doesn't mean that's the only way to do it. If you prefer a different method then that's fine!

Before you get started, you need to figure out what you want in your navigation and collect the appropriate URLs. The benefit of doing your own navigation bar (versus just having static Blogger pages listed across the top or in your sidebar) is that you can link to dynamic content via a label. For example, Summer links to her "Tutorials" tag so that clicking that button in her nav bar brings up all posts with that tag.

Summer has the following in her nav bar-


(she decided to remove "Parties" though, so I won't be including it in the examples)

The easiest way to create a navigation bar is an HTML text-based bar.


This is the HTML for linked text-

<a href="http://frecklesinapril.com">Freckles in April</a>

When I copy and paste that code into the HTML section of this blog post it looks like this-




Summer needs her navigation across the top of her page since her sidebars are pretty full. I just took the code above, input the URLs and text then separated them with a |.

<a href="http://sumossweetstuff.blogspot.com/">Home</a> |
<a href="http://sumossweetstuff.blogspot.com/p/about-me.html">About</a> |
<a href="http://sumossweetstuff.blogspot.com/search/label/tutorial">Tutorials</a> |
<a href="http://sumossweetstuff.blogspot.com/p/featured.html">Featured</a> |
<a href="http://sumossweetstuff.blogspot.com/p/follow.html">Follow</a> |
 <a href="http://sumossweetstuff.blogspot.com/p/links.html">Links</a> |
<a href="http://sumossweetstuff.blogspot.com/p/advertising.html">Sponsor</a> |
<a href="http://sumossweetstuff.blogspot.com/p/contact.html">Contact</a>

The nav bar from that code looks like this -

Home | About | Tutorials | Featured | Follow | Links | Sponsor | Contact


If I wanted list navigation in a side bar (it would look like that area I highlighted in pink up above), I would include a line break at the end of each link. The code for a line break is <br />. The HTML would look like this-

<a href="http://sumossweetstuff.blogspot.com/">Home</a><br />
<a href="http://sumossweetstuff.blogspot.com/p/about-me.html">About</a><br />
<a href="http://sumossweetstuff.blogspot.com/search/label/tutorial">Tutorials</a><br />
<a href="http://sumossweetstuff.blogspot.com/p/parties.html">Parties</a><br />
<a href="http://sumossweetstuff.blogspot.com/p/featured.html">Featured</a><br />
<a href="http://sumossweetstuff.blogspot.com/p/follow.html">Follow </a><br />
<a href="http://sumossweetstuff.blogspot.com/p/links.html">Links</a><br />
<a href="http://sumossweetstuff.blogspot.com/p/advertising.html">Sponsor</a><br />
<a href="http://sumossweetstuff.blogspot.com/p/contact.html">Contact</a><br />

I always test my code in a W3 try it document (which I wrote about earlier this week). Test your links to make sure you added them correctly!

An easy (cheater! :) way to do this is in a blog post. Type our your nav bar the way you want it, link everything like you would for a normal blog post then hop over to the HTML tab to grab the code. I'm not sure how much formatting transfers, though, if you try to get fancy. I've never actually done it this way.

Then, to install-

Go to your Dashboard > Layout

Click to enlarge
Click "Add a Gadget". If you want your nav bar across the top you'll click that section. If you want it in a sidebar then you'd click the gadget over in the sidebar. Add an HTML/JavaScript widget.

Click to enlarge

Then copy and paste your code into the box.

Click to enlarge

If you are putting your text across the top, you'll probably want it centered.

Add this code at the very beginning: <div align="center">
And this code at the very end: </div>

(You can also find code to bold your text, make it bigger, etc. over at W3)

Save your widget then go take a look at your blog.

This was before I worked out some header issues.


Your nav bar is made up of links so in order to change the colors you need to change the link colors. You can can do this by going to Template > Customize > Advanced > Links. This will affect all links in your blog.

Also, I've learned this the hard way, but when you get your code the way you want it, save a copy somewhere. I keep folders for each blog design client (as well as my own blog) and individual text documents for pieces of code. It's good to keep safe somewhere!

4 comments:

  1. GREAT tip! I needed this!

    ReplyDelete
  2. I wanted to tell you I've really been enjoying this series. It gave me the push I needed to get started on the revamp I've been thinking about. I hadn't changed my blog aside from the side bar since I set it up over three years ago. Last night I made a new header. Next step, adding a nav bar.

    ReplyDelete
  3. I'm really glad that I discovered your blog. Very helpful guidance on blogger! Sample Statements

    ReplyDelete
  4. Thank you for not "leaving me in the dust by assuming that I already know something" because I know absolutely NOTHING. Nothing! But I recently started a blog, so I can use all the help I can get. Your tutorials have been very, very helpful. It's my goal not to have to ask my husband for any more help on the computer. :-) So thank you a million times over!

    ReplyDelete

Thanks for your comment!

Any trolls will be dragged into the trees and beaten soundly.

Related Posts Plugin for WordPress, Blogger...