November 27, 2013

How To Create A Navigation Bar



Have you heard of a Navigation Bar? It's like the pages gadget of blogger, but this one is classy and not too bulky. Some of my favorite blogs have really nice navigation bars. 

I recently learned on how to make a navigation bar and I'm going to share this to you guys. It's an easy tutorial on how to make a basic navigation bar. 

{tip: play a song that would make you happy before you code, because I get stressed when I code, hehe}

This code is for a black navbar. (Just like my blogs navbar) but you can customize it. I'll do a post about that next week. 

<style type="text/css"> 
<!-- 
 #navbar ul { 
        margin: 0; 
        padding: 5px; 
        list-style-type: none; 
        text-align: center; 
        background-color: #000
        } 
#navbar ul li {  
        display: inline; 
        } 
#navbar ul li a { 
        text-decoration: none; 
        padding: .2em 1em; 
        color: #fff; 
        background-color: #000
        } 
#navbar ul li a:hover { 
        color: #000
        background-color: #fff; 
        } 
--> 
</style> 
<ul>
<li><a href="LINK">TITLE</a></li>
<li><a href="LINK">TITLE</a></li>
<li><a href="LINK">TITLE</a></li>
</ul>



How to make it 'live' in your blog:

Sign in to your blogger account.
Click your blog.
Click Layout.
Click "Add a Gadget"
Choose HTML/JavaScript
Then paste your customized navigation bar html.
Click save.
Drag your gadget to the upper side. It must be on top of the header. 

Ta-da! 
Please do comment if you've used this tutorial on your blog. Thank you! 
If there are other questions, please leave a comment I will be glad to help you. 

Just a bible verse I want to share:
[SEEK & SAVE]
click image to see source

FAQ about this tuorial:
F: Can I put a or more links?
A: Yes you can. :)


Have a great day everyone. And remember to keep smiling. ☺

6 comments:

  1. Replies
    1. You're welcome, Claire! :)

      Delete
  2. That's awesome! I've always loved the way navigation bars look, but couldn't ever figure out how to do them. Alas, I am no longer on blogger, but I'm sure I'll use this tutorial some time or other :)

    ReplyDelete
    Replies
    1. I just saw your new blog! The design is so cool, it fits your blog title! Thanks for reminding me I'll be changing your link in my "love" list, hehe! Thanks for dropping by! :)

      Delete
  3. Thanks for doing these, Jodie - they're always helpful. :)

    I will say though, mine won't "drag" to the top of the header... could just be my layout though - blogger may not like it. ;)

    Happy Thanksgiving!

    ReplyDelete
    Replies
    1. Hello, Rissi! You're welcome!

      I think the theme 'Template Galauness' you're using isn't customize able. You also have two navbars, it's transparent, tho'. I loove your new theme, suits the blog! :) Happy Thanksgiving too! :)

      Delete

"The words of the reckless pierce like swords, but the tongue of the wise brings healing." ~ Proverbs 12:18