Venus Trapped in Mars

03 August 2013

Saturday Sessions: Creating Your Own Social Media Gadget Links + A Giveaway




Whoa. This is my 14th Saturday Sessions post. WOW! Fun stuff. Let's talk about something that will save your life, and by life I mean time. IMAGE MAPPING! So this week I added a new little social media gadget with all my links to the left. Looks complicated right? Not even a little bit. I used photoshop for mine, but for this tutorial I'm going to use pic monkey. 
Step 1: Select an ombre block of color to use. I have made several options for you, just click the color your want to use, download it and save it to your desktop. If you want a color that is not shown, just leave me a note in the comments box, I'll hook you up! 
 photo ombreblack.png photo ombrepink.png photo ombreyellow.png photo ombrered.png photo ombreblue.png photo ombregreen.png



Step 2: Open your ombre image in Picmonkey

Step 3: Resize your image to the correct width. My sidebar width I use on the left side is 300. So that is what I'm going to size mine at. 
Step 4: Go to the overlays tab, and begin adding simple rectangular divider lines. Add one to separate each social media outlet you want to use. I'm going to be using Facebook, Twitter, Bloglovin, Pinterest and Instagram. So I'll need 4 white divider lines. Tip: Right click to quickly duplicate each overlay. 
Step 5: Add your text! Easy enough, right? Maybe even get wild and crazy and include hearts or something. I'm not wild and crazy, so I'll just add the text. Then save your image as a PNG. 
Step 6: Upload to your photobucket account and copy the direct link provided.
Step 7: Time to map your image. Visit this website here. Paste the URL you just copied from photobucket and click start mapping your image. 
Step 8: Click rectangle
Pull and drag your rectangle to fill the area you want clickable for that social media icon. Then replace http://www.image-maps.com/ with your link. I obviously replaced mine with my twitter URL. Repeat this step for all 5 (or however many you have) different links. 



Step 9: Be sure to replace the Base URL with your blog's URL. Then uncheck show text links. Finally hit get your code.

Step 10: Click on the tab labeled HTML CODE then copy that code provided.
Step 11: Almost done, whew! I'm tired.  Go to your blogger layout dashboard and select Add New Gadget----> Add HTML. Paste that code you just copied. Hit save. DONE! 


You can use image mapping for anything! Navigation bars, social media icons, headers, collages. Anything at all. It is a life saver and so easy to use! Enjoy! 


------
I also have a HUUUUUGGGGEEEE giveaway to present to everyone! This month I have teamed up with Marquis from Simply Clarke and 16 other bloggers to giveaway a load of awesome prizes: Ad space on 18 blogs, $100 Target Gift Card, $100 Nordstrom Gift Card and a $50 Starbucks Gift Card. 

Before you enter below, make sure to stop by the other co-hosts blogs and tell them thank you!


Venus Trapped

79 comments :

  1. Yes, yes, and yes. Fantastic Saturday Session, as usual! However, I was messing around with the image mapping site a while ago and have a big fat question for you: Is there a way to map a link to an "email me" button? Am I just missing something? I know how to do it with HTML, but that doesn't help me here. Thanks!

    ReplyDelete
    Replies
    1. Wow! Very useful information.

      http://www.elegantweddinginvites.com

      Delete
  2. TARGET!


    And I had no idea about image mapping - amazing!

    ReplyDelete
  3. I do have fun burning through gift cards :) ... but the ad space is fantastic!

    ReplyDelete
  4. This is wonderful! I can't wait to try this!

    ReplyDelete
  5. The ad space would come in handy for helping to bring my blog more hits, and the gift cards would make for some fun shopping! ;) Thanks!

    ReplyDelete
  6. I've been trying to do this for a while, thank you!!

    ReplyDelete
  7. I'll take the target or nordstrom gift card please! And this post was very informative :)

    ReplyDelete
  8. I would love to win the Target gift card. Targets is only an hour and a half away. Small town living {{{{sigh}}}}

    ReplyDelete
  9. Nordstrom! Awesome giveaway ;)

    ReplyDelete
  10. This is an AWESOME post, Sarah! Could you make the ombre block for me in turquoise?

    -LesLeigh J.

    ReplyDelete
  11. Also, I think I'd be the most excited about winning the Nordstrom gift card!

    ReplyDelete
  12. I am OBSESSED with Nordstrom - but so many good choices! Lovely giveaway :)

    ReplyDelete
  13. Ekkkkkk the fabulous Nordstrom gift card! I could do some major damage!!! But, heck the Target gift card wouldn't be bad either! :)

    ReplyDelete
  14. Amazing! I just trashed the buttons that came with my theme and made new social media icons from your tutorial... and in wordpress! So easy, much appreciated.

    ReplyDelete
  15. aaaawesome giveaway - i' m most excited about the target one. woohoo! and an amazing tutorial too smarty pants!
    -- jackie @ jade and oak

    ReplyDelete
  16. I would love to win the Nordstrom gift card.

    ReplyDelete
  17. The ombre is such a good idea! I would totally love to win the ad space!

    ReplyDelete
  18. Awesome tutorial; thank you so much! I have to admit, Target's really got a hold on me - I think I'd be most thrilled to win the gift card there!
    xo
    Kym
    bitty.and.bunny

    ReplyDelete
  19. Ok I have never even heard of image mapping

    ReplyDelete
  20. Perhaps I shouldn't be trying to figure this out 3 strong margaritas deep. Or maybe this can end up a-mazing. We shall see.

    Awesome giveaway!

    ReplyDelete
  21. AD Space! I'm a newbie blogger, and I would love to get some attention! My blog is an attention whore. I tell her to calm down, she will be seen eventually by people in the blog world, but she wants some love now.

    The Grand Adventures of Me

    ReplyDelete
  22. That's a really nice tutorial!

    For me, either the ad space or the Target giftcard. They have nice, allergy-free items. c:

    ReplyDelete
  23. Nordstrom GC because I can't afford anything there! :)

    ReplyDelete
  24. This is so going on my sidebar come Monday!! Do you mind sending me a navy blue ombre block? Love learning new code as well!! Annnnd awesome giveaway! I'm coveting a new watch at Nordies!!

    ReplyDelete
  25. Ad space would be HUGE since I'm a new blogger and trying to learn everything about leading a successful blog, haha! :)

    ReplyDelete
  26. Thank you so much for this tutorial! It worked great in Wordpress too! Your instructions were so easy to follow :)

    ReplyDelete
  27. I would love to win the Target gift card!

    ReplyDelete
  28. I'm excited to win..uhh...all of it? Is that an appropriate answer? :p

    ReplyDelete
  29. Are you kidding? This giveaway is AMAZING. The ad space, the gift cards, can't choose a fav! Maybe the Nordstrom? But they're all amazing!

    http://asequinloveaffair.com

    ReplyDelete
  30. I would love to win the Nordstrom giftcard!

    And very cool that you gave these tips! I wish there was a purple ombre.

    -AJ
    FitTravelerAJ.com

    ReplyDelete
  31. Love the tutorial, gotta find some good dreamweaver tutorials now too
    :)Your tutorials are always awesome and have really good step by step details.

    Great giveaway!!!

    ReplyDelete
  32. Lady I am excited to win all of it! Ad space for the responsible past of me and everything else for the impulsive side of me!

    ReplyDelete
  33. I am most excited about the nordstrom card! I'm due for a handbag. It's been two years and they have some nice ones! :)

    ReplyDelete
  34. I've heard of image mapping but have always been scared to try it. I will definitely have to check this one! Thanks!

    Jamie
    greyskysaturday.wordpress.com

    ReplyDelete
  35. Ad space for sure! Awesome giveaway!!

    A
    www.denimanddaydreamsblog.com

    ReplyDelete
  36. Great tutorial. I would totally love to win the Nordstrom gift card!!!

    ReplyDelete
  37. YES YES YES!!!! EXCELLENT TUTORIAL! and ps this giveaway is pretty awesome :)

    ReplyDelete
  38. oh p.s. could you email me and let me know how you did the ombre? if not - was wondering if you could do it with color D9FFE5

    ReplyDelete
  39. Thank you so much for this! I've been wondering how to do this. I'll have to try to make one this week. Thanks so so much :)

    Big Apple, Little Bites

    ReplyDelete
  40. What is the link I'm supposed to put my email in there? I tried just linking it directly to my email address, and that did not work. Thanks!!

    ReplyDelete
  41. hello nordys cash. i need you in my life.

    ReplyDelete
  42. The ad space!!:)

    Tifani Sipes
    http://breakfastattifanis.blogspot.com/

    ReplyDelete
  43. Genius! Thanks for posting this how to. I think I might actually be able to figure it out :)
    And for me what I'm most excited about is a toss up between the ad space and Nordstroms!

    ReplyDelete
  44. I am going to do the tutorial and giveaway. Thank you!

    ReplyDelete
  45. I am most excited about the Target giveaway!

    ReplyDelete
  46. Nordstrom because we don't have one nearby!

    ReplyDelete
  47. Hi Venus, could you make the ombre image in either mint or light pink?

    Thanks,
    The Fashionista Says
    thefashionistasays.blogspot.com

    ReplyDelete
  48. I'm really excited about the $100 Target Gift Card! I could spend about 10 of them in one trip if I wanted there. haha. Thanks for the giveaway!

    ReplyDelete
  49. Wow this is very helpful. Will definitely try it out soon. Thanks!

    ReplyDelete
  50. Great post. I will prbly try this. And I hope I win!

    ReplyDelete
  51. The opportunity to have my ad spread out over 18 blogs is unbelievable! Oh, and I need new clothes (Hello, Fall!) so the Nordstrom would be most appreciated!

    ReplyDelete
  52. I finally got around to making a gadget links and your instructions were great. Thanks so much for this tutorial! :) You're awesome!

    ReplyDelete
  53. This comment has been removed by the author.

    ReplyDelete
  54. Sarah, you are a lifesaver!!! Just used this tutorial to create a custom footer to organize my blog labels better and it worked perfect! Thank you thank you thank you!!!

    ReplyDelete
  55. This was super helpful, thanks so much!

    ReplyDelete
  56. Seriously, crazy amazing tutorials. Thank you!

    ReplyDelete
  57. Thank you! These tutorials are so easy to use and much appreciated. Just made my own social media gadget...can't wait to try the others!

    ReplyDelete
  58. Thank you so much for posting this tutorial!! You just make my life 1000 times easier!!!! :)

    XO, Briana

    http://sequingownsandmermaidcrowns.blogspot.com

    ReplyDelete
  59. OMG!! You have made my life with these posts!! Thank you so much for sharing! Your blog is amazing and I'm currently addicted. :)

    ReplyDelete
  60. Apparently image-map.com changed its website. Might I suggest an updated post (if you get time). I muddled my way through it, hopefully it worked!

    -AJ

    ReplyDelete
  61. Just added Social icons to my blog and loving it! I am brand new to this so I found it VERY helpful!! I appreciate any other advice, tips, tricks on getting started! :)

    ReplyDelete
  62. Thank you for all of your helpful Saturday Sessions Tutorials!

    www.thepreppyballerina.blogspot.com

    ReplyDelete
  63. I'm a little late to the party, but thanks for the post - I will use this so much (and already did!)

    farmgirlbigcityblog.com

    ReplyDelete
  64. Hey! So I'm making a new "about me" so I was mapping a new image - but when I paste the html into my widget area, the links don't work! It just looks like an image with no links :( Do you know what could be going wrong here?
    Thanks so much for these tutorials btw!

    ReplyDelete
  65. When I go to the image mapping website, there is no image map tool box. I have to right click and select create rectangle and when I do that, I can't drag and drop to re-size the rectangle.

    ReplyDelete
    Replies
    1. I found another one that worked. -> http://www.isdntek.com/tagbot/imap.htm

      Delete
    2. Thank you! It seems to work fine on the site but when I put it in the text widget it still doesn't work when it's actually on the blog. I'm so confused :/

      Delete
  66. I've been wondering how to do this actually. I thought that you had to make individual buttons and post them onto the blog with all separate links. This is so much easier! Thanks so much!!

    http://nessabogs.blogspot.com

    ReplyDelete
  67. Hey Sarah, I'm in the process of changing the colors of my blog theme. I used your red block before but I need a purple one now. Could you make one using the color with the hex value #de44cb if it's not too much trouble? Or maybe you could quickly tell me how you do it. Did you use the premium ombre effect on picmonkey?

    ReplyDelete

Comments make my heart go boom boom.

I respond to all comments, if you are leaving me comments and not getting a reply, you may be a no-reply blogger. Fix it HERE!