Add an Image as a Clickable Link (From My Inbox)
My question today, is how I can add small pictures which link to other websites ('badges', I think they call them) to my blog - there are a couple of links that I would like to have on there to show my support for some other websites and organisations and things but all I seem to be able to do is to either add another picture or else add a link list ... no way to add a badge/picture that is a link
This is a simple piece of code that makes any image, button or badge an active link.
<a href="URL OF TARGET LOCATION" >This is an example of how to put the BlogU chicklet in a sidebar or post:
<img src="URL OF IMAGE"></a>
<a href="http://www.bloggeruniversity.blogspot.com" >You'll notice that I have added sizes to the example code. That is to help the browser load your page quicker.* To find the size of an image, right click on the image and chose to View Image. This will open a new window with your image. The dimensions are on the top title bar.
<img src="http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a>
*For more information on making your page load faster, take a look at How to Optimize Web Pages for Faster Loading
EDIT 06/07/08: A nice tip from AceK - It's a good idea to put the alt tag IE alt="name of picture" in case pic is unavailable, text will show instead of just an x. You can also use the code below to prevent the blue border spoiling the picture.
border="0"
19 Comments:
Hi Annie, been your reader for a while. This one trick is super useful and i am thankful for that. Anyhow, i was wonder how to put html file like in this post without converted? I tried to post these codes to my blog and once to blogger comment forum but then it was rejected or just went blank when it posted.
Please help.
Cheers BlogU.
@Robin, I tested this code in a post. I added the above code in the post. Open the post editor box...and click on the "Edit HTML" tab at the top of the window. Then add the code with your target location and url image. It worked for me.
Can I just say "Thank you so much"?!
Your help was much appreciated. You simplified this for me and I am so grateful. I've added a link to you on my site :)
Its a good idea to put the alt tag IE alt="name of picture" in case pic is unavailable, text will show instead of just an x
You can also use the code below to prevent the blue border spoiling the picture.
border="0"
I want to add an image to my link. For example:
I sell avon. I want the customers to be able to click on the, "AVON" picture & it will go directly to my web page.
How do I do that?
@anonymous, you just follow the instructions on this post and put the code in a widget...the HTML/Javascript one.
I raally have a great time visiting your site.Thanks for the post! expect many more blogs to come:)
can I do the same procedure with GIF´s?
Thanks for help...
@ jan...yes.
Yay! Thanks for this! It's up and working on my new Photoshop blog!
To add pictures or websites just copy and paste this to you website and put your website in where this website is. Send me n email and I will tell you how to do it as it wouldn't let me put in the http thing in here
It is very good idea to put the alt tag IE alt="name of picture" in case pic is unavailable, text will show instead of just an x
Hi Annie,
Thanks for all your info on this blog!
Cheers from Martin@ Heren overhemden
very useful information....very helpful to the newbies like me
thanks
ok of course the alt tag images help you improve
your page rank
The alt tag is also good for SEO purposes. You can tell the Google crawler what the image is about and potentially increase the rankings of a page, or at the very least the image within the image results page.
I think a lot of people click images thinking they are links when they are not. This is very nice b/c people just forget this important step.
Hi my name is elena, I need so bad to put up a link with a picture to websites that I love in my blog, but I tried this that is showing here and it didn't work ...I don't know why! I used the gadget
HTML/Javascript one. Please help me anyone..I will give my info to loggin if anyone will help me.
Thank you
Elena
I copy the code as mentioned abpove, changing what I need to. I get an error stating I can not add the "<" to the codes. How can I fix this? thank you so much for any help