How to Add a Full Width, Sticky Navigation Bar to Blogger (Part Two)09:30
Continuing from THIS tutorial, I showed you how to add a navigation bar to the top of your blog that sticks to the top and scrolls with the page. This post will explain how to add your clickable links. First you need to design the image that you want to become clickable.
1. Go to Picmonkey.com and click 'design' to take you to a new document. Select 'crop' on the left and set the dimensions to about 700px x 50px. Using a free font from the text feature on the left add the links you want in your navigation bar and style it to look how you want it to appear on your blog. Important: click 'canvas colour' on the left hand side and make sure the 'transparent canvas' tick box is checked. Save to your computer as a transparent/ png file.
2. Next you need to host your image online, I recommend tinypic.com as it's free with no signing up. Upload the file and copy the 'direct link for layouts' code. Go to image-maps.com and paste the link, click into the box and click on 'start mapping.' It's important that you don't upload the file to here directly from your computer, as image maps only host files for a few days before deleting them.
3. Right click on your uploaded image, click 'draw rect' and draw a box around the text you want to make clickable. Then simply fill in the link information that corresponds to the link titles you've chosen. Do this with each link. Once you're done, left click and select 'get code.' Along the top you'll see a 'html code' tab, scroll down (ignore the signup request) and in the bottom box will be your image map code.
Save and you're done! You now have a custom navbar that sticks to the top of the page when you scroll down that you designed yourself- for free! You can see a working version of this on my beauty blog HERE