Hey Everyone,
two weeks ago I showed you how to create a header for your blog so this week I thought it was time to show you how to create a Navi Bar. A Navi Bar can be a very important part of your blog (links different pages), so its just as important to get the design right of this as it is of any other aspect. I'm going to show you the simplest way I know making one:
Step 1: To get the size of your bar right, you need to decide the width of it. You can do this two ways:
1. If you want it to run the entire width of your blog you need to check the width size of the blog (Template>Customise>Adjust Widths)
2. If you want the bar to be center with your header (This is how I did mine) you need to find out the width of your header. You can do this by just clicking on the image (header) you created and making a note of its width.
1. If you want it to run the entire width of your blog you need to check the width size of the blog (Template>Customise>Adjust Widths)
2. If you want the bar to be center with your header (This is how I did mine) you need to find out the width of your header. You can do this by just clicking on the image (header) you created and making a note of its width.
Step 2: Once you know the width go to Picmonkey.com and then click the 'Design' button.
Step 3: Then click the 'Custom' button.
Step 4: It will then ask you to input your measurements so into one box you put the width you decided on earlier and in the other put in a height you like. Next click the 'Do It' button!
Step 5: When you first enter the design stage in the left sidebar there will be an option for canvas colour. I would suggest matching this to the background of your header to make sure it is in-keeping with your design, but its totally your own choice. Next is when you design your Navi Bar how you want it, whether its with text or symbols.
The 'Butterfly' button will take you to lots of shapes and interesting images. You can change the size by dragging the image by one of the corners and change the colour by clicking the colour box that appears when you select and image.
The button 'Tt' will bring you to a huge variety of text options to help spell out your blog name or description. Select the text you like then click the 'Add Text' button at the top to add in your text. You can change the text size and colour by using the box that appears when you add the text.
To delete either text or shape select the item by clicking on it and then either press the delete button on your keyboard or the 'delete' button in the box that appears for each item.
Step 6: Once you have created your Navi Bar you need to save it, click the 'Save' button at the top of the screen.
Step 7: Name your File and Select the quality 'Sean' to give you the best quality image.
Step 8: Click the 'Save To My Computer' button and put it in a folder where you will know where to find it.
Step 9: Next you need to upload your navi bar to an online picture hosting site I would suggest www.photobucket.com. Create a free account. Then Click the 'Upload' button.
Step 10: Then Click the 'Choose Photos and Videos' button. Double click on your designed navi bar to upload it.
Step 11: Once uploaded click on the 'Library' button and 'View Library'.
Step 12: Find your Navi Bar in the library, at the top right hand corner of the image there will be a little cog if your hover over that a list of options will appear click 'Get Links'.
Step 13: A list of links will appear, click into the box labeled 'Direct' it will automatically copy the direct text for you.
Step 14: Next you need to create links to your pages so go to http://www.image-maps.com/
Step 15: Right click into the box and paste your Direct Code you just copied from the previous site. Then click the 'Start Mapping' button.
Step 16: The site will then upload your navi bar, when it appears click 'Continue'.
Step 17: Right Click on the image, a list of options will appear, select 'Create Rect'.
Step 18: A box will appear leave that for a moment. To create a link drag your mouse over a title of a page on your navi bar a rectangle will appear over it highlighting the area (This will be your link). Now go back to the box, in the box there is a text box called Map URL in this put in the link to your page (e.g If you have selected Home put in your blog link). Then click the save button.
Step 19: Repeat step 18 for every page within your navi bar. Once finished right click again and the option bar will appear click the 'Get Code' button.
Step 20: A box will appear, at the top click the 'HTML Code' button.
Step 21: Scroll down, till you see a box titled HTML Image Map Code, Copy this HTML.
Step 22: Go to blogger then go to layout. If you haven't already made your own (or had it made for you) you will have a pages bar in the layout just below your header if you have had a navi bar made before it will more than likely be called HTML, either way make sure it is your pages bar before temporarily dragging it into your sidebar. I would suggest doing this rather than deleting it encase something goes wrong with your new bar you can always drag this one back.
Step 23: To upload your new Navi bar click the 'Add Gadget' button in your sidebar.
Step 24: A new tab will appear scroll down till you see option called 'HTML/Java Script' and select that.
Step 25: Into the box titled 'Content' paste your HTML code and then click the 'Save' button.
Step 26: Now drag this gadget so that it sits in the box below your header. Then click the 'Save Arrangement' button at the top right to save your new navi bar.
Step 27: To check out your new navi bar click the 'View Blog' button.
Step 28: check all your links are working, once they are then you can remove your old navi bar.
I hope this helps, if you have anymore questions please don't hesitate to ask!
I will be uploading Blog design tutorials on Sundays for the next while, so don't forget to check back!
Previous Blog Designing Posts:
*I am not responisble for any changes you make, Please save your blog and blog html first somewhere. Any changes or mistakes you make are your own responsibility and I am not liable!
.JPG)
0 comments:
Post a Comment