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! :)

flower power

Lately I've been obsessed with flower crowns (as you can see from my Instagram). They just make so much sense to me now, when it is summer and the nature is at  its wildest state.

Since I am a lazy crafter, who obsesses over DIY-ed stuff but rarely gets to do the projects, I decided to give myself a little cick in the bum and make the crown myself.

So, if you've ever wondered how to make your very own flower crown, listen up. The process of making is quite easy and self-explanatory: you cut off the flowers from stems and hot glue them to the headband. Nothing revolutionary here, it's what any other tutorial on the internet teaches us. But trust me, you will feel so proud of yoursel for making the effort and creating something on your own!

Finito! :)

 Obviously, I had to make an impromptu photoshoot (read "phone snapshots") in my newest creation. ;))

What is your latest creation?