RealcomBiz
Pin It

How To Add Link/Url To Image In Blogger Blog

by Durodola Ridwan | Thursday, June 21, 2012 | 7 Comments

Have you been looking for a way to add link to your image, so that when visitors click on your image, they will be redirect to another page/website? If that's the case, then this tutorial should solve your problem.
It is good for every bloggers to know how to add link to image, because there would be some cases whereby you will like to show a demo of your content to your readers, which you may need to provide a demo image button instead of using a text, or you may need to link to another site with a image. So for you to add link to your image, simply follow the few steps below.





I will be using the image above to sight an example, and by default if you click on the image above, you can only view the image.

How To Add Url To Image

Whenever you want to insert a link to image, always switch to Edit HTML mode in your post editor, after you have upload your image, as shown in the image below


When you are in compose mode, you will see the image, but immediately you switch to Edit HTML mode, you will only see the image html code.
This is the html code for the first image above

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-cViMSNMPYZo/T-NEOOKkVXI/AAAAAAAAAbg/bRhecfWqGEU/s1600/Add+link+to+image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://1.bp.blogspot.com/-cViMSNMPYZo/T-NEOOKkVXI/AAAAAAAAAbg/bRhecfWqGEU/s320/Add+link+to+image.jpg" width="320" /></a></div>

In your image html code, there will be two link in the image code, and the different between the two url is href=" and src=", but we are only concern with the one starting with href=" format as shown in the image above.

This is the code we are concerned about

href="http://1.bp.blogspot.com/-cViMSNMPYZo/T-NEOOKkVXI/AAAAAAAAAbg/bRhecfWqGEU/s1600/Add+link+to+image.jpg"

Now let me use this blog url to give an example, if i want to insert this blog url to the image above the result we look as follow.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.realcombiz.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://1.bp.blogspot.com/-cViMSNMPYZo/T-NEOOKkVXI/AAAAAAAAAbg/bRhecfWqGEU/s320/Add+link+to+image.jpg" width="320" /></a></div>

If you click on the image below, you will be redirected to this blog homepage.



How To Open Your Link In New Tab

If you want your link to open in a new tab, probably you are linking to another site and you don't want your readers to leave your site, this is what you need to do, just add target="_blank" after your link address.

The final result should look as follow

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.realcombiz.com/" target="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://1.bp.blogspot.com/-cViMSNMPYZo/T-NEOOKkVXI/AAAAAAAAAbg/bRhecfWqGEU/s320/Add+link+to+image.jpg" width="320" /></a></div>

If you click on the image below, this blog homepage will open in a new tab


That's all on how to add link/url to image. you may also be interested in how to tag image for better search ranking.
Hope you find this article useful? Use the comment box if have anything to say or ask, and don't forget to subscribe to this blog, for you to get our latest articles directly into your email, and check your email to confirm your request. BLESS



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

7 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Nice tutorial. I'll definitely be needing this for my blog.

    ReplyDelete
  2. which you may need to Diablo III itemsprovide a demo image button instead of using a text, or you may need to link to another site with a image. So for you to add link to Buy RS Goldyour image, simply follow the few steps below.

    ReplyDelete
    Replies
    1. Please stop flooding this site with your spam comments. This may be the last warning.

      Delete
  3. Thank You so much!!! I have been trying to figure this out forever!!!

    ReplyDelete
  4. "Hi Durodola!

    Thank you for this tutorial. I actually need this for my blog. You got indeed a very helpful post. I will also be sharing this post of yours to people who also wish to add URL to an image. Looking forward for more of your posts!

    "

    ReplyDelete
  5. Facebook page can be used to cheap Facebook fans market the particular product or service through your Facebook account.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger