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...

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.

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!!xxYleniaAmbitieuse.net

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