Thursday, August 9, 2012

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!

















8 comments:

Anonymous said...

Oh my goodness! I was just thinking yesterday that I really wished I knew how to do this! So great! Thank you!

Courtney*Cakes said...

It's like you read my mind and knew this was on my blogging to-do list. But didn't know where to start!

THANKS!!!!!!!!

Erin said...

I was literally wondering how to do this yesterday! Wonderful tutorial! Thanks for sharing!

N|MΛRIE said...

Ahh this is such a lifesaver!! I'm so happy you posted it! I've been wondering forever how to do that. Haha! Thanks so much for linking up with us lady! Hope you're enjoying your hair pieces :) Let me know when you come up with something for your feature! :D

AudreyN said...

Oh Thank You! I really need to make a cute one! I am giving out awards today and you got one :)
http://breakitmakeitorbakeit.blogspot.com/2012/08/liebster-award.html

GiGi Cagle said...

Oh thanks for sharing! I love it! I have really wanted to figure out how to put the media buttons on my page.

Gigi

Tiffany said...

I have been wondering how to do that! Thank you so much!

Im your newest follower

http://www.mymakeupboxes.blogspot.com

XOXO Tiffany

Jazmine G. said...

Where did you find the social media icons? I've been wanting to add those to my blog :(

Related Posts Plugin for WordPress, Blogger...