Pages

Monday, January 13, 2014

Using Image Maps for Your Blog {Saturday Tutorials}

Well this post was supposed to be published on Saturday but Blogger had a little hiccup over the weekend and I was too busy reading and watching football with the hubs to notice until today. Sooo yeah...let's just pretend it's Saturday and you're reading this! 

Lately I've had several people say that they love my blog design (thanks Stephanie, Jamie, Amberly, and Jana), which makes me very extremely happy because 1) I love it too and 2) it's taken me eight months and around twenty re-designs to finally reach a look that I want to keep for more than two weeks at a time!! 

Anyway, I will pretty much use any excuse to dabble in design, html, and such, so I thought what better way to keep my design juices flowing than writing up some tutorials on how I achieve my blog design. Of course, I'm no expert, so I plan on just covering the easy stuff. My goal though is to give gals who aren't sure about investing in a 'professional' design yet a simple guide to customizing their blogs. 
I've noticed quite a few ladies have been having trouble with image mapping so I figured that would be a great topic to start off with. Image mapping pretty much means making an image clickable--I use this all the time for navigation bars and social media buttons. The site that most bloggers have used for image mapping used to be free but now in order to access all of the benefits of the site, you have to pay $5 a month. Unless of course, you read this tutorial and get it for free!! 

Step One: Design and host your image.
I use PicMonkey to make all the graphics for the blog but you can pretty much use any kind of photoshop-like program. Make sure that the size of your image is exactly the size you need for your blog. 
Once you have an image that you love, upload it to your image hosting site. I have a private blog on blogger that I use as my design site aka my hosting site--you can also use photobucket or another image hosting site. 
Step 2: Upload your image.
Ok, so you've created your image and you're ready to make it clickable. But how? Well, there's a website that makes this step easy (well, eas-ier anyway). First off, click this link which takes you to the Image Map Tool website. 
 Copy the image url from your hosting site (if you use blogger like me, right click on the image and choose 'copy image url') and paste it into the text box. 
Click the orange 'Start Mapping' button and the website will bring you to a loading page. Once your image appears, click the link to continue. 
Step 3: Mapping your image
Voila your image appears. Right click anywhere on the image and a menu will pop up. For this image, I choose 'Create Rect' and then dragged the rectangle to highlight the area I wanted to link. 
Another box will appear and under the title 'Map URL', insert the url address you want your image to link to. For example, here my map url would be the page I created to list all of my military-related posts. You can also fill in the Title section if you want, but it's not necessary for your image mapping.  Repeat these steps until everywhere you want your image to link to is mapped. 
Step 4: Get the Code
Alright, this is where it gets a little more complicated. Once your image is mapped the way you want it, right click on the image again. This time click 'Get code'. 
Yet another box will come up with three tabs. Click the second tab labeled 'HTML Code'. The code in the second box is the one we'll be working with. It should look something like this. 
The only thing you HAVE to change is the highlighted part in the image above, which is your image source. Between the two quotation marks, insert your original image url (the same one you used to upload the image in Step 2). If you do not change this source url, your image will be removed within 24 hours and you'll end up with a broken link on your blog. (This is essentially what a paid account prevents from happening.) 
Here's a snapshot of what my code looked like after I'd made all of the changes I wanted. Only the link in the light purple is the one you absolutely HAVE to change, but I like to change all of the image titles to the actual image description (such as 'header').

Step 5: Adding the code to your blog
 Now you have a mapped image and the code for your mapped image, copy the code you just changed and go back to your blog. Under the 'Layout' tap, add a new gadget wherever you want your image to appear, pick an HTML/Java gadget and paste your code into the box that says html. Save it and check out the handy dandy clickable image you now have on your blog!!!
What do you think of my first tutorial? Feel free to comment or email me with any suggestions for future tutorials or any questions you might have!! 


No comments:

Post a Comment

Your comments warm my heart!! Leave one for me and I PROMISE to email you back (unless you're a no-reply blogger in which case please fix that)!!

Monday, January 13, 2014

Using Image Maps for Your Blog {Saturday Tutorials}

Well this post was supposed to be published on Saturday but Blogger had a little hiccup over the weekend and I was too busy reading and watching football with the hubs to notice until today. Sooo yeah...let's just pretend it's Saturday and you're reading this! 

Lately I've had several people say that they love my blog design (thanks Stephanie, Jamie, Amberly, and Jana), which makes me very extremely happy because 1) I love it too and 2) it's taken me eight months and around twenty re-designs to finally reach a look that I want to keep for more than two weeks at a time!! 

Anyway, I will pretty much use any excuse to dabble in design, html, and such, so I thought what better way to keep my design juices flowing than writing up some tutorials on how I achieve my blog design. Of course, I'm no expert, so I plan on just covering the easy stuff. My goal though is to give gals who aren't sure about investing in a 'professional' design yet a simple guide to customizing their blogs. 
I've noticed quite a few ladies have been having trouble with image mapping so I figured that would be a great topic to start off with. Image mapping pretty much means making an image clickable--I use this all the time for navigation bars and social media buttons. The site that most bloggers have used for image mapping used to be free but now in order to access all of the benefits of the site, you have to pay $5 a month. Unless of course, you read this tutorial and get it for free!! 

Step One: Design and host your image.
I use PicMonkey to make all the graphics for the blog but you can pretty much use any kind of photoshop-like program. Make sure that the size of your image is exactly the size you need for your blog. 
Once you have an image that you love, upload it to your image hosting site. I have a private blog on blogger that I use as my design site aka my hosting site--you can also use photobucket or another image hosting site. 
Step 2: Upload your image.
Ok, so you've created your image and you're ready to make it clickable. But how? Well, there's a website that makes this step easy (well, eas-ier anyway). First off, click this link which takes you to the Image Map Tool website. 
 Copy the image url from your hosting site (if you use blogger like me, right click on the image and choose 'copy image url') and paste it into the text box. 
Click the orange 'Start Mapping' button and the website will bring you to a loading page. Once your image appears, click the link to continue. 
Step 3: Mapping your image
Voila your image appears. Right click anywhere on the image and a menu will pop up. For this image, I choose 'Create Rect' and then dragged the rectangle to highlight the area I wanted to link. 
Another box will appear and under the title 'Map URL', insert the url address you want your image to link to. For example, here my map url would be the page I created to list all of my military-related posts. You can also fill in the Title section if you want, but it's not necessary for your image mapping.  Repeat these steps until everywhere you want your image to link to is mapped. 
Step 4: Get the Code
Alright, this is where it gets a little more complicated. Once your image is mapped the way you want it, right click on the image again. This time click 'Get code'. 
Yet another box will come up with three tabs. Click the second tab labeled 'HTML Code'. The code in the second box is the one we'll be working with. It should look something like this. 
The only thing you HAVE to change is the highlighted part in the image above, which is your image source. Between the two quotation marks, insert your original image url (the same one you used to upload the image in Step 2). If you do not change this source url, your image will be removed within 24 hours and you'll end up with a broken link on your blog. (This is essentially what a paid account prevents from happening.) 
Here's a snapshot of what my code looked like after I'd made all of the changes I wanted. Only the link in the light purple is the one you absolutely HAVE to change, but I like to change all of the image titles to the actual image description (such as 'header').

Step 5: Adding the code to your blog
 Now you have a mapped image and the code for your mapped image, copy the code you just changed and go back to your blog. Under the 'Layout' tap, add a new gadget wherever you want your image to appear, pick an HTML/Java gadget and paste your code into the box that says html. Save it and check out the handy dandy clickable image you now have on your blog!!!
What do you think of my first tutorial? Feel free to comment or email me with any suggestions for future tutorials or any questions you might have!! 


No comments:

Post a Comment

Your comments warm my heart!! Leave one for me and I PROMISE to email you back (unless you're a no-reply blogger in which case please fix that)!!