Pages

Thursday, July 10, 2014

how to create a picture with multiple links


Lately I've been so interested in web and graphic design, trying to create simple changes in my blog on my own. It challenges me, and I like it. :)

About 2 months ago I've changed the banner, and yesterday (God knows why these ideas come to my head around midnight) I created the "About Me" page. It still needs work, but I am happy I started the change. 


Instantly I had this idea to finally update my profile picture. I didn't like the generic blogger tiny picture with text added on the bottom. So, I went on the internet for inspiration and noticed that I enjoyed the look and functionality of the profile pictures with built-in social media icons and links to those profiles.

Now, how the heck do I do that?! I've never studied html or CSS. I even learned the "image mapping" word combination last night (apparently, that's how making a picture with multiple different links is called. You're welcome!).

Apparently, there is a way around all the programming! There is a website called www.image-maps.com which does all the dirty programming work for you. Here's how I did it:

1.  I created a 300x300 px white square in Photoshop and threw in all the pictures I wanted to show up on my final image, including pretty watercolored social media icons (which you can download for free here). If you want the picture to look seamless, choose the color of the background (white in my case) according to the color scheme of your website.


2. Go to any image hosting website and load your image there to receive a direct link to your image. Image Maprs website deletes the images that were loaded from your computer within 24 hours without premium membership. We don't want our work go to waste, right?

3. Go to www.image-maps.com and paste the link to your image.


4. Click "Continue."

5. You will land on the mapping page, which is basically an empty page with your image on it and a yellow banner with instructions. Follow them. Basically, for every link you want to include on your image you will make a little rectangle. After you are done, your image will look something like this.
6. For each rectangle you make, you want to change the Map URL to the link you want this exact part of the image to lead. For example, for the rectangle with my portrait I added the URL of my "About Me" page and changed the title to "About Me."

7. After you are done with all the rectangles and links, right click on the screen and choose "Get Code" option. Copy the HTML code of your image map. Go to your Blogger menu, choose Design - Add New Widget - HTML and paste your code into the new widget window. Save changes. Move the widget into the desired place of your blog layout. You're done! That was easy, right? :)


Please, share links to your blogs if you decide to make image maps with this tutorial, I'd love to see your hard work! :)
Image and video hosting by TinyPic

14 comments:

  1. I would love to read this post before, I had hard time in finding how to create multiple links but at the end it worked and they look similar to yours!
    Thank you so much for visiting my blog :)

    See you xx

    ReplyDelete
  2. it looks great! & Sasha, you look fab in that picture!
    I love how little details come together and make a totally different experience! they really make all of the difference :)
    xx Corinne
    cateyesandthighhighs.com

    ReplyDelete
  3. The pictures are really awesome,keep sharing more.
    If while using your system any virus problem occurs like hacking then easily contact McAfee activate to install a perfect antivirus into the system visit our website mcafee.com/activate to know everything in detail.

    ReplyDelete
  4. Instantly I had this idea to finally update my profile picture. I didn't like the generic blogger tiny picture with text added on the bottom. So, I went on the internet for inspiration and noticed that I enjoyed the look and functionality of the profile pictures with built-in social media icons and links to those profiles.
    bed cover , luxury bedspreads , bed cover , gul ahmed bridal bed sheets with prices , bedspread , bedding sets , jaipuri razai , couch covers , cushion

    ReplyDelete
  5. "We enjoyed the read and we are also adding to the collection.

    We are from Tropika Club Magazine
    To learn about Tropika Club's Search Directory for Beauty and Wellness Services, please visit Tropika Club now.

    Some of the articles at Tropika Club Magazine would be:

    1. Best Korean BBQ Buffet in Singapore [2020 Edition]

    2. Your Top 10 Places for Brows and Lashes in Downtown Singapore [2020 Edition]

    3. How To Stop And Reduce Hair Loss [Part 1]

    4. How to Care for Your Hair Between Salon Visits

    5. What's Most Effective for Wrinkles Under the Eyes? "

    ReplyDelete
  6. "
    We hope to add to the comment feed roll and we are from the Tropika Club Magazine.

    Tropika Club Magazine is your leading online magazine for the discerning male and female Singaporean. We cover various topics of interest, ranging from beauty and vogue for her, and grooming and style for him, as well as city and destinations and top picks. To learn about Tropika Club's Search Directory for Beauty and Wellness Services, please click on this link

    Check out some of our articles below as our contribution to your blog roll:

    1.Top 10 Best Curry Puff in Singapore

    2.Top 10 Best Nasi Padang in Singapore

    3.Top 10 Best Fishball Noodles In Singapore

    4.Top 10 Best Laksa in Singapore

    5.Top 10 Best Soy Bean Curd In Singapore"

    ReplyDelete
  7. Very Nice and Informative Article. Share something on Hard Tissue Microtome.

    ReplyDelete
  8. It also extends the life of the hard drive and improves the performance of the hard drive. Fuld body rack-træning: den ultimative trin-for-trin bodybuilding-rutine at træne i gymnastiksalen super tadapox mænds fitness tøj gym, løb og træning tøj bodybuilding. With this very useful program, you can also easily record game videos. Supports capturing games and recording game moments with easy-to-use keyboard shortcuts. To start recording the game, you can configure your own keyboard shortcuts or simply press Ctrl, Alt, and V while playing to record the best moments of the game you want at any time.
    Smart Game Booster License Key
    Acronis True Image Torrent Download
    Mailbird Pro Crack with Patch
    Apowersoft ApowerManager Activation Code

    ReplyDelete
  9. A car detailing franchise is a type of business that provides car cleaning, polishing, waxing, and other related services to vehicle owners.
    Best Car Detailing Franchise in India

    ReplyDelete
  10. Here you can get 3D and 2D architectural visualizations. You can get rendered plans in 2D and 3D designs for residential or commercial staging from professionals. It is my goal to create spaces that are visually stunning, functional, and exceed expectations. Come collaborate with us and let's turn your ideas into reality.

    ReplyDelete
  11. Here you can get 3D and 2D architectural visualizations. You can get rendered plans in 2D and 3D designs for residential or commercial staging from professionals. It is my goal to create spaces that are visually stunning, functional, and exceed expectations. Come collaborate with us and let's turn your ideas into reality

    ReplyDelete
  12. Nice blog! Also, check out IGL Coatings one of the best ceramic coating manufacturers in India.

    ReplyDelete
  13. Hi there! I just wanted to say thank you for sharing this excellent knowledge. As soon as we can, we will return to your website. airport transfers to regional Victoria

    ReplyDelete

Thank you for visiting Cranberry Mix! Feel free to share your thoughts on the topic, suggestions for the future posts or ask a question.
I'll visit your blog back as soon as possible! :)