Welcome to part two of "I want to create my own awesome blog and not pay a thing for it." Today's lesson: Creating a really sweet Navigation Bar. Like Lesson One (click HERE if you missed it) we will be starting off using picmonkey.com. But I will also be introducing you to another awesome site that will relieve you of a huge headache if you were to work without it. Ready?
Lego.
First, I want to show you what you'll be creating, and what blog savvy people call a "Nav Bar".. AKA the titles usually located at the top of a blog to allow for easy navigation. Here is a sample:
To start, upload your white canvas that I taught you how to make in Lesson 1. (From here on out I won't tell you how to make this.) You'll be using this for pretty much everything that you create. Using the text, choose which titles you would like to use. Get creative and make your nav-bar your own. Crop the image into a skinny horizontal rectangle. Resize so it is about maybe 40-50 megapixels tall, and 700-800 wide. (Adjustments may need to be made depending on your blog layout.) SAVE to your desktop (always as .png).
You will need to upload your image to a host site. Photobucket.com is a great one. Upload to an album, view the album, and copy the "Direct Link" provided under the photo.
Go to the site image-maps.com. Paste the direct link from your Photobucket image into the url on their home page. Click "Continue to the Next Step" and wait for your image to load. When it does, there will be options to the right. First, you NEED to change the BASE URL. To do this, paste that same direct link from your image into that box, and click "Update".
Now, you need to separate the different links of your image. You want the "Home" title to take you to your blog's home page, your "About" title to take you to your about page, and so on. To do this, click on "Rectangle" in the options to the right. This will allow you to place boxes around your titles. Once you have the first one placed where your title is, you can type in the URL of the page you want it to take you to. Click SAVE.
You then need to click "rectangle" again and repeat the steps for all other titles. Make sure to save each one! You should have multiple boxes all over your image when done.
Side note- Uncheck the boxes to your right that say "show links" and "allow backlink". When you are finished, click "Get the Code." Click on "html code" at the top of the page and copy the entire code that it gives you.
Now, go to your blogger dashboard and click on layout. You will need to have an html gadget located directly under your header. Add the gadget, and click on "edit". Paste the code that you copied into the gadget, and click save. 
That's it. You're done! You now have a nav-bar.
Please CONTACT ME if you have any questions! P.S. Now that you know how to do this, I expect you all to create an "About Me" page so I can get to know you better!
P.S.S. I created a little page located on my side bar labeled "DIY Blog Design". This page will show the tutorials that I'll be creating all in one place. Yahoo :) Check that out HERE.
0 comments:
Post a Comment