Venus Trapped in Mars

17 August 2013

Saturday Sessions: How To Make A Custom Header with Clickable Links and HTML




A couple of weeks ago I did a tutorial on designing in pic monkey then using image mapping to upload your image. Last week, we talked about image mapping again, to make a new post signature. Samantha emailed me and asked for a tutorial on how to take all of that information and make a custom header in blogger.

So this week, let's talk about taking the code provided from Image Mapping to make a new custom header with clickable links for your blog!
STEP 1: Go to your blogger dashboard, then select template, followed by edit HTML. Remember to backup your template as a safety precaution before completing any other steps. 
Step 2: Click jump to widget, then select header 1. Then you will be adjusting the boxes circled below in pink. 








Note: you may need to scroll your up one or two lines to be able to see all of the items you need to make edits to. The items circled in pink are the items you are going to make adjustments to. Edit the following...

Change locked= 'true'
to locked= 'false'

Change maxwidgets= '1'
to maxwidgets= '3'

Change showaddelement= 'no'
to showaddelement= 'yes'

This is what your end product will look like...
Then click save template.

Step 3: Now go to the layout tab and select edit header.
Step 4: Click "remove"
Step 5: Click add a gadget and then choose add HTML gadget.

Step 6: Now you are going to take the HTML code provided from the image mapping site tutorial (see step 4 in that tutorial) and paste that into your html gadget box. NOTE: Be sure to add the "center" tags, shown in the picture below, before your code and at the very end of your coding. 

Click save. Then view your handiwork header! You da bomb!


TWITTER FACEBOOK Pinterest Instagram Image Map

12 comments :

  1. I literally googled this for like 3 hours yesterday. I wish I had waited another day. Your Saturday sessions are perfect! Bookmarking for future reference.

    ReplyDelete
  2. Thank you! This was so helpful!
    Britt @ One&20

    ReplyDelete
  3. Thanks! I think I am going to work on this next weej!!

    Katie

    ReplyDelete
  4. No, YOU DA BOMB! I was totally going to ask you about making one of these. Thank you so much! :)

    ReplyDelete
  5. Oh this is great! You make it seem so simple!
    Thankfully I have help with that because if not I think my blog would be a shame! But I'm always up to learn a few tricks for myself so thanks!!
    xx
    Ylenia
    Ambitieuse.net

    ReplyDelete
  6. I like this you make it all sound so easy

    ReplyDelete
  7. Ahhh thank you SO much for this! Your tutorials are the best! :)

    <3 danielle
    goodwillista.blogspot.com

    ReplyDelete
  8. Hey Sarah,
    I finally got around to making my new header but have a question. Is there any way to get the image to automatically adjust to fit? I want my header to be a little bit wider to fit in with the width of the rest of my blog.
    As always, thanks so much for these tutorials! I have been having so much fun learning from you. ;)
    Josie

    ReplyDelete
  9. Question: how do you make it so that the options (about, best, etc) open as new tabs?

    ReplyDelete
  10. bookmarking this and following you now. awesome tutorial!

    xx,
    toni www.perfumedredshoes.com

    ReplyDelete
  11. They changed the image mapping website that you used, and it now says that images will be removed if you do not subscribe to the website. Is there any other way to do image mapping?

    ReplyDelete
  12. THANK YOU!!!
    I was going crazy looking for some "blog" tutorials...this will come in handy!!
    Thanks!!!
    A loser like me

    ReplyDelete

Comments make my heart go boom boom.

I respond to all comments, if you are leaving me comments and not getting a reply, you may be a no-reply blogger. Fix it HERE!