Image Map Tutorial

Ever wonder how you can make your own header  for your blog &

 put pages &  social media links on it, & actually have them link?

Step 1: After creating your header, upload it to PhotoBucket.

Step 2: Copy the Direct Link of that image.

(Super easy, just click on it!)

Step 3: Paste that link in the "From URL" box on Image Map & Click "Start mapping Your Image"

Step 4: Click the "Continue to Next Step" Button

Step 5: Un-Check the "Show Text  Links" box (blue)

& Click on the "Rectangle Button" (pink)

Step 6: Position the rectangle over the page name or social media Icon you want to link.

In the box by the blue arrow, enter the link you want this area to go to when clicked on. 

In the box by the Orange arrow, you can write something if you want a word to appear when they hover, I usually do that for the Social Media Icons, not the pages, since the pages are pretty self explanatory.  

Click Save. 

Continue to do step 6, until all areas are linked up. 

Step 7: Click the "Get Your Code" button.

Step 8: Click the HTML Code tab at the top. (Pink arrow)

Copy (CTRL A+ CTRL C) the code in the box (blue arrow)

Step 9: Paste the code into a HTML/JavaScript gadget under the header section of your blog. 

Pink arrow shows where gadget should be located.

Blue arrow shows where to paste the code.

And there ya have it!