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.

sticky navbar, scrolling navbar, navbar that sticks to the top of the page as you scroll, scrolling navbar, scrolling navigation bar on blogger, how to make a navigation bar that sticks to the top of the page on blogger, image maps, image mapping

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.

4. Go back to 'layout' from your blogger dashboard, click on the 'html/ javascript' gadget we added earlier under the header and paste the image map code between <center> and </center>

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

You Might Also Like

4 comments

  1. The image turned out really tiny... How do I fix it?

    ReplyDelete
  2. The image turned out really tiny... How do I fix it?

    ReplyDelete
  3. I fixed my issue! I didn't realize I had to resize and crop it (I feel so embarrassed!)I also don't think I was viewing in the normal size ^^' Thank you for this tutorial! xx

    ReplyDelete
  4. I followed all the steps correctly but the home|about|gallery seems to be in the middle of the navigation bar. I actually wanted it to be more to the left, how do I fix it???

    ReplyDelete

Follow

Related Posts Plugin for WordPress, Blogger...