Tuesday, April 24, 2012

Techy Tips on Tuesdays - using an image as a link

We have gotten so much positive feedback from our Techy Tips series and are so glad that you are enjoying them and learning something new (hopefully)!


If you have not already checked out our tip on hyperlinks, you may want to before continuing reading below (the tips build on one another).

When I created our social media buttons, I knew that I wanted to have a user click on the image and send them directly to our facebook, twitter, pinterest, etc pages.  If you are wondering how to do just that...read on!

photobucket Photobucket

 To start off, let's take the hyperlink code that we were working on last week and add to it:

<a href="www.yourURL.comtarget="_blank">TEXT to display to reader</a>


Instead of displaying TEXT for the reader to click on, we want to display an image.  So we are basically going to have to replace the blue code above.


In its simplest form, this is the code to link up an image:


<img src="www.yourphotoURL.com" />
{please take special note of the "/" at the end...this is important}


The PINK text is the URL, or website, where your image is located.  Personally, I use Photobucket to store my images.  It is free and (I think) simple to use - you can sign up here.  Once you have finished editing your image, you just upload it to Photobucket.




So now let's put the two pieces together.  
This is what your new code would look like:


<a href="www.yourURL.comtarget="_blank"> <img src="www.yourphotoURL.com" /> </a>



Let's move onto an example, and I will show you how to add on additional variations.


This is the code I used for my Facebook Social Media Icon (top right side of the blog).

<a href="http://www.facebook.com/CGCDesign" target="_blank"><img src="http://i1226.photobucket.com/albums/ee412/TwoSasters/Banner/facebook.jpg" height="95" width="95"  style="border: none;"/></a>

Red = Facebook URL (which is just www.facebook.com/NAMEOFPAGE)
Green = The code to open the link in a new window (see last week for more details)
Blue = Location of Image (I used Photobucket to store my photos)
Orange = You can vary the height and width of any image.  After playing around, I landed at 95 each.
Purple = This code is if you do not wish to have a border around your image.  It will override any of your default borders.

Remember, you can use this tip for any image.

If you have any questions, feel free to leave them in the comments, or send us an email.  We would be happy to help:)

Thanks for stopping by and talking a little more about HTML!!  

Share

21 comments:

  1. OMG this is soo helpful! I gotta do some major work on my blog.. it needs a facelift. This is the perfect starting place, now I just gotta find a slice of time :) Thank you so much!!!

    P.S. - I don't know why, but for some reason I was not follow you girls yet.. I am now :)

    ReplyDelete
  2. Again...I am impressed. The simple way you break down the codes make them seem way less intimidating and less foreign. Tuesday is becoming my new favorite day of the week. Can't wait to see what next week brings.

    amy @ whilewearingheels.blogspot.com

    ReplyDelete
  3. Love it! You make everything sound so simple. I wish you had done this series months ago!!!

    ReplyDelete
  4. Good tips! I have a love/hate relationship with HTML...I am your newest follower from the Networking Blog Hop! I would love if you would check out my blog and if you like what you see please follow back :)
    Modern Modest Beauty

    ReplyDelete
  5. Thanks for these tips!! You explain it very well.

    Thanks for linking up at Romance on a Dime. I'm pinning this!!

    ReplyDelete
  6. I love these techy tips posts. Thanks so much. I'm still trying to wrap my brain around the html. I guess I need a cheat sheet because i don't want to memorize it all. Oooo, that gives me an idea. :)
    Would love for you to visit me at JessieGunderson.com

    ReplyDelete
  7. These are great tips thanks for sharing. Stopping by from the Terrific Tuesday's link party.

    ReplyDelete
  8. Thanks so very much for sharing this information. I was wondering how folks were doing that...I really like it. I saw your post over at "Southern Lovely" and I am following you now.

    ReplyDelete
  9. You have been so helpful. Thanks for your tips. It really helps those of us who have been toatlly lost.

    ReplyDelete
  10. Oh my gosh, I so need to learn how to do this! Thanks for the great tips! I would love for you to come share at my link party if you have time.
    Amy@homehappyhome

    ReplyDelete
  11. Thanks so much for this! I struggle adding photos.:)

    ReplyDelete
  12. Thank you, Thank you, Thank you!!!! I have been wondering how to do this!! I am going to update mine very soon! So excited! Thanks so much for sharing at Thursday's Temptation.
    Jill

    ReplyDelete
  13. Thank you. Thanks for color coding (the visual side of me thanks you!) and for breaking it all down into easily understandable chunks.


    Jessica
    stayathomeista.com

    ReplyDelete
  14. Thanks again for linking up to Creative Thursday this week.

    Always love a good tutorial on blogging. That's how I made my own buttons and posted them.

    I can’t wait to see what you link up next week. Have a great day.

    Michelle

    ReplyDelete
  15. I love and need this techy help. Thanks so much. I am now following you on Google and LInky and would love a follow back

    ReplyDelete
  16. WOW, can we say easy-peasy?! I am SO glad that u guys post techy-stuff, it helps out more than u know! I finally made my own button 2day, that excites me! haha, def ur newest follower & thanks for taking the time out to "get technical" ;)
    -Carrie Eve @ A-Hooahs-Housewife

    ReplyDelete
  17. Thank you, thank you, thank you! Because of these tips I was able to get a few things working on my blog that previously I couldn't figure out!! :)

    Heather
    www.cupcakeloveaffair.blogspot.com

    ReplyDelete
  18. Thanks so much for sharing this on the Saturday Show and Tell. We love how you make it look so easy. Hope to see you back this week!

    -Mackenzie

    http://www.cheeriosandlattes.com

    ReplyDelete
  19. It's Saturday night and I am spending it studying your techy tips and updating my blog. What does this say about me :)

    ReplyDelete
  20. I have been trying to do this on my blog for awhile and none of the codes I have tried work. Yours worked perfectly!! YAY!! I am so excited to have the buttons all organized and right next to each other! Thank you so much for your amazing tutorial!
    Jill

    ReplyDelete

<3 We would love to hear from you - it would make our day:)

Related Posts Plugin for WordPress, Blogger...