Create HTML Code to Display Image on Blog.

Still about HTML, today we will discuss about Create HTML code to display image on blog, although the previous posts have discussed about How to upload images in Blogger, How to Add Picture gadget in Blogger.
For those who are familiar with the HTML codes, displaying images on sidebar using HTML manually can be more practical instead of using Picture Gadget that has been provided by blogger. For instance, by using picture gadget, you will get difficulty when you want to order the images side by side because one gadget is for one image. But when you use HTML code manually, one gadget can be for multiple images with the fitted order.

Upload Images / Pictures to the site Image Host

The first step to do in order to make the images displayed on blog or website is upload the images in the hard disk to the image hosting site. It is better that you upload the images to your self-hosting, but if you don’t have it, you can upload the images to the free image hosting site, e.g.:

1. Picasa.com
2. Photobucket.com
3. Imageshack.us
4. Flickr.com
5. Tinypic.com
6. And etc

However, blogger tutorial prefers to upload images to blogger because no need to leave from your blogger account and login to other site. In addition, the bandwidth is unlimited. The easiest way to upload images is by using the image gallery as we have discussed here at How to create Image Gallery using Blogger Post.

Recording the image address

The second step is take or record the image address that you have uploaded. Since we are here using image gallery, the steps are as below:

1. Login to blogger with your ID
2. Click Edit Posts.
3. Click Edit on the draft post of Image gallery that you have created before.
   
4. If we will upload the new images, please upload first (read the tutorial to create image gallery if you are still confused)
5. Make sure the option of the image is the original size.
6. Switch the post editor into Edit HTML.
7. You will find the order of HTML codes that you have uploaded, e.g.:

8. What we need is only the source (src) of the images. Below is the image source of the above example:

   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6iei4-CZfXWnjiBUddLbJKn92SE1Q3eqwVeFqNH9OHkuO-FIM21iC0zzBfydZcwXb_CfiJw4_WW3_CI2ZJugeNoYYVO3vTjXqRUA6B6Ahy2AAMmmELdfN6_aIR65csEv75vWj-19icHo/s1600/twitter.png
   

9. Copy the code above and then paste on your text editor such as notepad, wordpad, notepad++ , or anything else.
10. Please repeat taking the address codes for other images that you need.

So, we now have the image address as follows:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6iei4-CZfXWnjiBUddLbJKn92SE1Q3eqwVeFqNH9OHkuO-FIM21iC0zzBfydZcwXb_CfiJw4_WW3_CI2ZJugeNoYYVO3vTjXqRUA6B6Ahy2AAMmmELdfN6_aIR65csEv75vWj-19icHo/s1600/twitter.png

HTML code to display the image

The basic HTML code to display the images is:

Referring to above example, the code will be as below:

And the example of the result is:

The above image is the plain image with no attribute, cannot be clicked, and have no certain effects.
An image code can also be added with various attributes such as alt, title, style, class, border, amd more. The attribute you have to add is alt attribute (alternative). The basic code is as below:

Example:

The use of alt attribute is effective for SEO, so each time you display an image on the web or blog, don’t forget to use the alt attribute.
Another attribute that is often used in the images is title attribute. It is useful to give description to the images when a mouse over. The basic code is:

Example:

The result will be as below (please point your computer mouse over it)

The other attribute that is often used is style attribute. It is useful to insert the commands of the CSS code. The basic code is:

As an example, to place two images adjacently with certain distance, we will give the code of CSS margin in order to own the empty space for better view.
Example:

The example of the result:

Create hyperlink (link) with an image

The above examples are to display the images and cannot be clicked. In order to make the images allowing clicks, of course, we should add a link on the images. To create click able images, you can use any image in any form such as banner, photo, button, icon, and more.
The HTML code to create link with an image is:

What you need to create a link with an image is the link address (URL) and the source of the image. For instance, Blogger Tutorial wants to create a twitter follower button with an icon.
The twitter page address to be made as link:
http://twitter.com/howtoinblogger
The image address (URL) to be displayed:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6iei4-CZfXWnjiBUddLbJKn92SE1Q3eqwVeFqNH9OHkuO-FIM21iC0zzBfydZcwXb_CfiJw4_WW3_CI2ZJugeNoYYVO3vTjXqRUA6B6Ahy2AAMmmELdfN6_aIR65csEv75vWj-19icHo/s1600/twitter.png
The link code with an image would be as below:

The example of the result:

Place the images on the blogger sidebar

The following is how to place various images on the blogger sidebar, but manually, not with picture gadget. The manual way is more useful to insert multiple images at only one gadget.
Note: to practice the following tutorial, you are suggested to use a trial blog. Read about trial blog here at Create Multiple Blog In One Blogger Account.
The following is how to insert images in blogger sidebar:

1. Login to Blogger with your ID
2. Click Design.
   
3. Click Page Elements, if you are not in this page.
   
4. Click one of Add a gadget links.
   
5. A new window will pop us showing your various Blogger gadgets.
6. Click the sign plus (+) on the gadget named HTML/Javascript.
   
7. Paste the image you have prepared into the field provided. As an example, just copy and paste below code.
   
8. Click SAVE button.
9. The placement of HTML/JavaScript element would be on the top, but you can move it to another position by drag and drop.
10. Click the SAVE button that is on the top-right.
11. Done.

Please see the result.
Hopefully you can improve your knowledge with above information.