December 22, 2013

How to Replace Your Header With an Image Map · Blogger

 
Ever since I posted "basic blogger css codes to improve your blogger blog" , I have received many requests for more css/html codes and tutorials, and I decided to share a tutorial that I would have absolutely loved to read when I first started blogging.

This tutorial will teach you how to replace your blog header with an image map, which is basically just an image with links on it (like my header). That way you can have a more personalized navigation bar to make your blog even more unique!

1. Create your new header image with Photoshop, Picmonkey, or any other editing program that you like. *TIP: Save your header image as a .png file to ensure sharp fonts and graphics.

2. Upload your new header to www.image-maps.com, and create links over different parts of your image.

3. Once you have finished, click "Get Your Code", and then click "HTML Code" in the tabs, and don't copy the code until step 9 (but make sure that you leave that page tab open!).

4. Now go to your Blogger Dashboard, select your blog, and go to Template → Edit HTML.

5. Hold down 'Ctrl+f' and search for these following lines in your HTML code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>2<b:widget id='Header1' locked='true' title='YOUR_BLOG_TITLE (Header)' type='Header'/>

6. Change 'maxwidgets' to '2', 'showaddelement' to 'yes', and 'locked' to 'false', so that it looks like the following code:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> <b:widget id='Header1' locked='false' title='YOUR_BLOG_TITLE (Header)' type='Header'/>


7. After you have done that, save your work, and head back to your blog layout.

8. Once you are there, click 'edit' next to your header, and then click 'remove'.

9. Now add a new HTML/JavaScript gadget in the space where your header used to be, and finally copy and paste your image maps code into the gadget. Once you have saved your new gadget and viewed your blog to check that it looks good and the links work correctly, you are done! Good job! :)

I will be sprinkling a few more blog code posts around my blog in the future, so be sure to let me know what kind of tutorials you would like! Anything from blog advice to css/html codes, I would love to share it with you.

And if you have any questions at all, just leave a comment and I'll get back to you!
xo Rachelle

51 comments:

  1. Thank you. I knew how to make the title a picture however I was still unsure about the links. Will be sure to use this technique when I get my blog ready !

    ReplyDelete
  2. Awesome tutorial!! You know those annoying blue borders. If you paste this into your CSS it fixes it.

    map area {
    outline:none;
    }

    I finally found a code that is actually useful. Thanks for the great tutorial though. The part about unlocking the original header was real helpful!! thanks xx

    ReplyDelete
  3. Oh my god. Thanks so much! I have been trying to find a way to do this for ages!

    xo
    Mahnoor
    www.mahnoorapple.blogspot.com
    www.mahnoorapple.blogspot.com

    ReplyDelete
  4. Thanks so much! That was really useful! Also I was wondering if you kew how to get rd of the little pop up that says "showing posts labeled with ..." at the top of the page becuase it is really annoying xx

    ReplyDelete
    Replies
    1. Hi Sophie, I'm glad that you found it useful! :) That is a super easy fix, just Google it and you should find your answer very quickly.

      Delete
  5. hii,
    i want to do this with a widget.
    Where do i have to paste the image map code to make a image in a widget clickable ?

    ReplyDelete
    Replies
    1. For a widget, all you have to do is just paste the image map code into a new html/javascript widget, then save it.

      Delete
  6. Seriously Rachelle- your html tutorials are amazing- thank you! Alex

    tobebeautifulingodseyes.blogspot.com

    ReplyDelete
    Replies
    1. Thank you, Alex! I'm so happy that you enjoy them. :)

      Delete
  7. Hi! I've been looking for this tutorial for forever! But I have a question? What do you mean by step eight (how do you remove your header...?) I tried following it exactly (your directions) but they aren't cooperating with me.

    ReplyDelete
    Replies
    1. Hi! If you saved your work from step 7, when you do step 8, just click 'edit' on your header image on your blog layout page, and beside the buttons that say 'save' and 'cancel' and such, there should be one that says 'remove'. You should click that. What that does is remove the built in Blogger header and lets you replace it with your own coded header. It should work if you correctly carried out step 7. If it still doesn't work, check the code in step 7, and make sure that where it says 'YOUR_BLOG_NAME' you put your blog name, because that could mess things up if you don't.
      Hopefully it will work for you now! Thanks for asking. :)

      Delete
  8. Hi everybody! Thanks for this great tip, the image is outlined to the right and not in the centre. Anybody else same problems?

    ReplyDelete
    Replies
    1. Hi, I'm sorry to hear that you encountered a problem! To center the header, go to your blog's Template > Customize > Advanced > Add CSS > and paste this code into the box: ".header-outer {margin-left:90px;}"
      You can adjust the number of pixels to change the location of the header. Then press 'enter' and save. Hopefully this will work for you!

      Delete
    2. I tried using that code that you suggested right here, and my header isn't budging to the center at all... any thoughts? I've even adjusted the number a lot and nothing is helping!

      Delete
  9. Hi Rachelle! I have tried this tutorial. but it's seems the site has changed. I am totally clueless. Can you help me? :)

    ReplyDelete
    Replies
    1. Yes, they did change it, sorry for the trouble! Follow step 1, and then upload your file to Photobucket and copy the image's code, then paste it into the box on the main page of image-maps.com. Once it finishes uploading, right click and select "make rectangle" (I think that's what it says), and make a rectangle around the font that you want to turn into a link. Then paste the link into the box where it tells you to, and continue to do the same for each of your links. Once you have finished, right click and select "get code". Go to HTML code, and copy the code, then follow the steps in this post to set it as your header.
      Hopefully that wasn't too confusing, just let me know if you need any more help! :)

      Delete
    2. Thank you Rachelle! Oh and thank you so much for following my blog!

      Delete
  10. Thank you for the step by step! I was tearing my hair out trying to figure out why the mapping was being stripped out of my title image. Now, all fixed. Cheers to you.

    ReplyDelete
    Replies
    1. It is so great to hear that this tutorial helped you! Thank you for the wonderful feedback.

      Delete
  11. Your tutorial was amazing, and I uploaded my new header in a new blog I'm working on. However a thin, black border line is showing up on the left side and top of the header. Can you help me remove these please? Thanks so much! =) http://www.ihoardfreeprintables.com

    ReplyDelete
    Replies
    1. Hello Marcy! I'm so glad that it worked for you, your header looks wonderful! Yes, I've had trouble with the border line as well. I can't remember exactly how I fixed it, but I believe I put this code into my CSS box: .header-outer {margin-left:-55px;} You can adjust the number of pixels to move your header around, and if you are able to move it slightly to the left, it might fix it. If not, please let me know and I will search for a better fix! :)
      Thank you!

      Delete
    2. Thanks so much Rachelle! I tried it and the whole header would move over, but so would the line! So I uploaded the photo and trimmed a bit of where this line would be, and now it's gone. SO WEIRD! But thanks again for taking the time to help me so fast! I'm anxious to get this site up and going but that header was driving me crazy. YOU'RE AWESOME! =)

      Delete
    3. So glad that you were able to fix it, sorry that the code didn't work! Thank you so much! Good luck with your site. :)

      Delete
  12. Any free sites for image mapping that you would recommend? The "image-maps" site now requires payment and it's 6.99 a month! No WAY! Thanks for your help!!

    ReplyDelete
    Replies
    1. Wondering the same thing over here! I am trying to find an alternative ...

      Delete
    2. Hmm I'm not sure why it's showing that for you... I still use the site for free. Maybe double check the url. Sorry!

      Delete
  13. hi,
    i found this very helpful but what size do i put the header too??

    Alessandra
    http://bold-bouverlard.blogspot.com.au/

    ReplyDelete
  14. This was very helpful thank you so much!

    ReplyDelete
  15. Hi. Has the code changed in blogger? I can't seem to find my header in the html. Also, I don't want to pay image-maps. :P Can I just replace the image source info to my image in photobucket, and leave the rest of the code as is?

    Thanks in advance.

    ReplyDelete
  16. Ok me again. I figured out my first issue (turns out I am maybe a little too sleepy to be fiddling with html). I do still have a small issue with my header not aligning and the background header color is poking out from behind it. I did figure out that the person with the issue above needs to just slightly alter the code in their CSS box to ".header-inner {margin-left:-30px;}". I had the same problem. Now, I just have a thin strip of the background peeking out at the bottom edge of the image. Is there a way to just remove this background color all together in the html? Thanks.

    ReplyDelete
  17. Hello! Thank you for this, I just have a small issue..
    I am using a dynamic view for my blog, and I don't have - 2, which is what you said needed to be changed. Where do I go from here?

    ReplyDelete
    Replies
    1. oops, it seems what i copied and pasted from above didn't paste correctly. Basically, I didn't have the code from step 5. Any idea?

      Delete
    2. Step 5 actually wasn't meant to be copied and pasted - it is meant to be searched (ctrl+f) in your HTML. Then replace it with the code in step 6. It may be good to start back at step 1 and make sure that you follow each one carefully. Thanks for asking!

      Delete
  18. Great help!! Just need some advice- when I click on the links it leaves my blog and takes me to the image-maps site!! AHHH what have I done wrong?? :D

    ReplyDelete
    Replies
    1. So sorry that you're having trouble! Did you put links to your blog? Because if I recall correctly, if you don't put in your own links, image maps will put in theirs.

      Delete
    2. OH MY GOSH IT WORKED :D Thankyou so much for all of the help, its so kind of you! I love the way you've designed your blog :) Just wondering, how did you create the circle photo and HELLO section on the side of your blog?

      Delete
    3. Yay! I'm so glad that it worked. Thank you! I made my photo circular with PicMonkey.com and highlighted the gadget titles with this code (to apply it, go to Template > Customize > Avanced > Add Css):

      h2 {
      background:#000000;
      }

      You can edit the numbers to change the color.

      Delete
    4. Yay!! Thanks :D How do i get the circular photo to show up on the side of my blog like you did? (sorry, Im new to this if you can't already tell)!

      Delete
    5. Your welcome! That's okay, I know how confusing it can be. Go to your blog layout and click "add gadget" in the sidebar. Choose "image" and upload the photo.

      Delete
  19. Yay it worked! You're the best :D One more question, my header (which is an image map) is not centred, but I added the HTML code you suggested? What can i do to move it over?

    ReplyDelete
  20. Try this code in the same css box:
    #header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

    If that doesn't work, than you may need to adjust your blog's width (Template > Customize > Adjust Widths) until it is centered.

    ReplyDelete
    Replies
    1. Thankyou so, so much! I adore checking out your blog :) Take a look at mine- it would mean heaps http://gabrielleandclaire.blogspot.com.au

      Delete
  21. Thanks Rachelle!! I'm changing my blog and it help a lot.

    Best Regards,

    Ana
    http://laardillitadelpatch.blogspot.com
    (changes will be available on Monday afternoon, in case you want to pay a visit)

    ReplyDelete
  22. Thank you very much...
    I recovered my Blogger header from your trick...

    ReplyDelete
  23. Thanks so much for this! I'm having one little issue: I'm saving my image in illustrator with a transparent background but when I've uploaded the image using the javascript/html widget, it has a white background and no amount of tinkering has allowed me to change this! Any advice?? I'm kinda at my wits end!!

    ReplyDelete
    Replies
    1. I'm so sorry to hear that you're having trouble! The only fix I can think of is making sure that you save the file as a .png rather than .jpg or any other type. Hopefully it will work for you!

      Delete
  24. Thank you so much for this wonderful tutorial. It works fine for me

    ReplyDelete
  25. This was great and works wonderfully on computer, but it doesn't show up on mobile. Any way to fix that or do I need to go back to the original header? Thanks!

    ReplyDelete
  26. thank you sooooooo much! i am soooooo glad i found you and your blog! your advices are simply wonderful! have a beautiful day! :) :) :)

    ReplyDelete
  27. Thank you so much for tips on moving the header!! I had been searching every where for this information!!!

    ReplyDelete

Your comment will appear here if it is approved. Thanks!