Adding a Linking Picture

Creating a picture that links to another destination... like another website or to another area within your site... is pretty easy and straight forward.

<a href="http://www.youdonkey.com"><img src="http://www.youdonkey.com/picture.gif" height="123" width="123></a>

The beginning part that begins with "a" is the destination site and the second part that starts with "img" is the address to your picture. You need to make sure the picture is uploaded to your host or you'll see the DREADED RED X.

One of the questions I get emailed regularly is how do you link a picture using Blogger. It is simple and you don't have to worry about much. Here's how:

Simply upload the picture using Bloggers "Add Image" button and then click the tab that says "Edit Html" which is next to the "Add Image" button.

You'll see something like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://blogger.com/_123FrDewSKq/RJJ90P7IRNQfI/ABCDEFGHIQM/nD47CVWNFRz/x6x00-x/picture.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://blogger.com/_123FrDewSKq/RJJ90P7IRNQfI/ABCDEFGHIQQM/nD47CVWNFRz/xx00/picture.jpg" alt="" id="BLOGGER_PHOTO_ID_5028233715907379698" border="0" /></a>

Now the editing begins... don't worry. It's easy!:
Since "a" is the address on the site you want to link to you need to remove it and add your own -
http://blogger.com/_123FrDewSKq/RJJ90P7IRNQfI/ABCDEFGHIQM/nD47CVWNFRz/x6x00-x/picture.jpg
to your new site -
http://www.google.com

Now you have to clean the code so you can EASILY find it later. Remove the following from the 'a" tag"
onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"

Your newly edited code should look like this:
< href="http://www.google.com"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://blogger.com/_123FrDewSKq/RJJ90P7IRNQfI/ABCDEFGHIQQM/nD47CVWNFRz/xx00/picture.jpg" alt="" id="BLOGGER_PHOTO_ID_5028233715907379698" border="0" /></a>

Want to open in to a new window. Add the following after "a" and before "href" with proper spacings:
target="_blank"

Now the code will look like this:
<a target="_blank" href="http://www.google.com"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://blogger.com/_123FrDewSKq/RJJ90P7IRNQfI/ABCDEFGHIQQM/nD47CVWNFRz/xx00/picture.jpg" alt="" id="BLOGGER_PHOTO_ID_5028233715907379698" border="0" /></a>

No comments:

Post a Comment