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!