Wednesday, March 23, 2011

How to Create a Navigation Bar








OK, I wanted to teach everyone how to make their own navigation bar for his or her blog. One to fit under your header or on your side bar. 
First step, you need to make a list of what links you want! For example, I have Home, About me, Contact, Twitter, and Tumblr. 
Now head to your posting page in your dashboard. You will then see a link that says EDIT PAGES. Click this.
That will bring you to a page that says add new page, DO SO.
READ MORE AFTER THE JUMP.



Now, this page can be anything you please, your subject line will be at the end of your URL though, so if its your about me page, make the subject say ABOUT or ABOUT ME. Then add whatever you please in the body.


CLICK BELOW IF YOU WANT TO READ MORE








When you hit publish you will be brought up to this page:

CLICK NO GADGET.
Click SAVE
Then click VIEW PAGE.

When you are viewing your page, please copy the URL into a document or sticky note for later!
Now, create as many pages as you please!!
When you are done, make sure you have all the URLS saved so its easier later. 
Now, open up photo shop or paint or any other image creator software you might have.
I will use paint for this tutorial since almost everyone has it, I usually use photoshop though.
I made my document 120x49, just drag your corners and you will see the size moving on the bottom, (if you are on photo shop when you create a new document you can add the size right in)
You can add your text right onto this document

Now, save this image as a PNG
Then you will need to upload it to an image hosting site, like photobucket.

NOW REPEAT with however many tabs you are going to have!! 
Then come back here and keep reading.

Ok, all done?
Now, lets get really technical.
Go to your dashboardàdesigns-àpage elements
ADD A GADGET underneath your header or on your side bar (wherever you want this placed)
Click HTML/Javascript

Now tab over to your photobucket, click what your first tab is going to be, mine is my ABOUT page. Copy its HTML code.

Add this into your gadget. NOW YOU WILL SEE THIS:


<a href="http://s14.photobucket.com/albums/a302/Justine19/?action=view&amp;current=about-14.png" target="_blank"><img src="http://i14.photobucket.com/albums/a302/Justine19/about-14.png" border="0" alt="Photobucket"></a>

WHERE IT IS RED REPLACE WITH THE URL FROM YOUR PAGE THAT YOU CREATED.

Like this:


<a href="http://missjustinelynn.blogspot.com/p/about-me.html" target="_blank"><img src="http://i14.photobucket.com/albums/a302/Justine19/about-14.png" border="0" alt="Photobucket"></a>


BINGO!
If you have made it this far you are almost done!!
Now, repeat, all steps until your gadget looks like this:

Then click save and view!!
You can drag this box around, so if you decide to place it under your header or on the side after, don’t worry, you can!
I change mine up often:

13 comments:

  1. this is awesome, thank you so much!!

    ReplyDelete
  2. Yes! As I said, here you are, saving my life hahaha thanks!

    ReplyDelete
  3. someone tweeted about this page, and I've always wondered how people got cool buttons! I have now used this tutorial on my own blog.

    Thank you so much!

    ReplyDelete
  4. this series is great. i can't wait to have a time to use all your tips and tricks!

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. i'm working on mine right now! thank you so so so so much for this. i've been wondering how to do this for weeks.
    -rachel
    boymeetsgeek.blogspot.com

    ReplyDelete
  7. I stumbled across this page and just wanted to thank you - I've been trying to figure out how to do this for ages, and your tutorial was perfect! Thank you!

    iamthechaser.blogspot.com

    ReplyDelete
  8. Hmm... i didn't get the option to decide if I wanted to have no gadget or not... Darn... Any ideas?

    ReplyDelete
  9. You saved my life!!! I finally did it! Thank you!

    ReplyDelete
  10. This was so much easier than I thought it would be...thanks for the help! Other tutorials made it so much more confusing. I've been a follower for a while now, this is why :)

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Thanks!!
    www.throughmyeyes-vaibhav.blogspot.com looks better coz of u now!!

    ~Cheers~

    ReplyDelete