The first thing is you must get the picture up on the web. This you can do by uploading to Photobucket, Get Blogger to host your picture or start a PUBLIC Google group to upload your photo. Get the URL of the photo on the web.
The basic HTML for the clickable picture (picture hyperlink) is:
<a href="URL of target site"><img src="photo URL"></a>
To the ><img> tag, you can add more attributes separated by space, especially the alt="description" tag which will give some information of the picture and will server 2 purposes. Search engines cannot read images, but they can read what is written what is typed between the "" marks in the alt="" tag. This will help the search engines knows more about your post and helps in SEO (Search Engine Optimization). When for whatever reasons the picture cannot be displayed, instead of an empty box, the visitor will see what it typed between the "" marks in the alt="" tag.
Another attribute is the width="W" where W is the width of the image in pixel you want it to display. This is especially important when the image you uploaded is a wide picture which may exceed the width of the main column (if you include it in a post) or the width of the sidebar (if you put the image in the sidebar). You will then have to know what it the width of the main column or siderbar. Refer to How to find the width of the blog Header, main column and sidebar (click BACK button to get back to this page).
A less important attribute is the title="" attribute. If you add this attribute, when a visitor hovers the mouse over the picture, a tool tip will appear displaying what you typed between the "" marks. This may give more information to the visitor on what to expect if he clicks on the hyperlink picture.
As an example, I will put a clickable button (made by a grateful reader without me asking) below:
. It is supposed to link to this blog, but since your are already in this blog, I have linked it to a site made for complete Blogger beginners. Hover the mouse and observe what happen and click on the banner to see where it takes you. For clarity, I will put the HTML used to display the clickable banner in the scroll box below:<a href="http://dummies-guide-to-google-blogger.blogspot.com/" target="new"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9-JPvoeDLhRnjEVZPOYqYy2Xpful-MR3Kusu5NfQHLx6JNFzELtBVF21sLYyVFd6L-CiDuQqX2_PPFHElJ5TyAEeK91ARK04q6toGNGK0-aA6yVXwH9KOZVcu_oiHfuHm5GcZzcqw4Uub/s1600/Peter+Chen's+Blogger+Tips+&+Tricks.jpg" alt="blogger resources, help for bloggers using Google Blogger platform" title="Get great information and help here by clicking on banner"></a>
For more information, refer to How you can help Blogger Tricks and Tips (on a completely voluntary basis, no one should feel obligated)
0 comments:
Post a Comment