- If you do not already have the exact "buttons" you need (such as the one to right), please follow the directions listed within my Navigation Image tutorial.
- Now then, go to your Dashboard. Click Layout or Design.
- Go to Edit HTML.
- (Optional) At this point, you have the option to download your current template. This will allow you to save your current settings if you should mess up or anything, if you truly fear it. Personally, I do not do this.
- Find the code listed in the link below near the lower portion of the HTML:
- Change 'no' to 'yes' and '1' to '3'. Makes it look like this:
- Click Save, and you are done with this part. This has allowed you to place a widget in your header. Return to your Layout/Design page and it should look like this:
- While you're checking your Layout page to insure that it is the same as the example, go ahead and click Add a Widget or Add a Gadget. I clicked the one right beneath the header. Choose HTML/Add Javascript.
- In the text box, copy/paste the code in the link below (you will need to edit it, just change the words and webaddresses that are in caps).
- Navigation HTML
- I recommend copying/pasting this code into Microsoft Word or another text document if you are planning to add images to your navigation rather than leaving it plain text.
- If you would like to add more pages and links to your navigation, use the following code to do so after having made the pages.
- Add Another Link/Page to Navigation
- If you would like for your Navigation to be in the center of the page, simply type < center > at the beginning of the code you just input and < /center > at the end. Be sure to take out the spaces in this portion of the code or it will not work properly.
- Click Save, and go check out your blog. It should look like the following, but don't freak out, it won't stay stacked that way.
- Navigation Stacked
- If your Navigation is above your header and you want it below, go into your Layout page and switch it out.
- Go back to your Layout / Design page and click on Edit HTML. Look for the Header section, the beginning of which will appear something like this:
- Input the following code anywhere within the Header section. Just be sure that you have placed it after a bracket which will look like this }.
- Header Section New Code
- The parts in bright green can be changed to suit your needs. Personally I recommend making the background color transparent, in order to do so, simply take the last green portion and type 'transparent' (include the apostrophes) in the place of the number code.
- If you would like a different color for your Navigation bar than what is presented after you have this saved, do a search for HTML Color Codes, find the one you want, and replace the code. If you need help, please ask.
- Click Preview prior to saving to insure that you are happy with what you see. What you should see is pretty much the exact same thing as seen in #11, except it will be a different color, have a background color (unless you used transparency) and it will be horizontal.
The next portion of this tutorial is to show you how to add Images / Graphics to your navigation bar if so desired. Images such as the one first one in this tutorial are also included.
- Create your image, if you do not already have one. If you'd like to create your own, please visit my tutorial for that as well.
- Upload the image(s) to Photobucket or Flickr, I personally use Photobucket.
- Copy and paste the url(s) of the image(s) into a text document so they will be ready for use.
- Go to your Design / Layout page and to the HTML you edited in #9 of the previous section in this tutorial.
- Replace each section title (Home, Bio, Links, etc.) with the following code, when finished, preview, save, and enjoy:
Your Navigation Bar should now be complete. Enjoy!
No comments:
Post a Comment