Adding Images to Your Blog (Alternate Method)

The following methods of adding images to your blog should cover most of your needs. The method I described earlier using Flickr is good but sometimes you may want to add buttons that go to your supplemental blog or other web site. You may also want to use a free hosting site other than Flickr. The methods I describe here use html code. This exploits the option that Blogger.com provides in the options to add new posts that is called “Edit html”. You can also use this same html code to add images to the template of your blog. Html stands for Hypertext Markup Language which is the document format language used on the world wide web. Adding images to a web page isn’t quite like adding an image to a Word document. Word saves the image as part of the document. Web pages save text in the html file but you add links to images which are saved externally to the html file. I recommend that you copy the html code on this page (highlight the code with your mouse and then hold down the “Ctrl” key and type the letter “C”) and paste it into a Word document and then edit it as I show in the color coding. The “click here to see demo” button in Part 1 of this series provides a demonstration of how I posted this article after having written it in Word and it includes some steps about adding images. In my “Sample Image Postings” page, I display examples of each of the three methods below of adding images to your blog and repeated the html code below the image so you don’t have to refer back to this page.

I found a pretty handy web site that provides a way of experimenting with html code. The folks at W3 Schools were nice enough to provide html examples. What is cool is they provide “Try it Editors” where you can edit some html code on the left side of the page, click on a button that says “Edit the text and click me” and then see how the html code would look on a web page on the right side of the screen. I have provided some links to specific examples in the following directions.

Click to Enlarge Image

This code will add a small image to the main page of your blog and then will produce a larger picture when you click on the image.

<a href="http://photos6.flickr.com/11413167_0568790dd3.jpg" title="Sample Image Produced From Flickr"><img src="http://photos6.flickr.com/11413167_0568790dd3_m.jpg" /></a>

You need to replace the blue text with the link to a large version of your image. You need to replace the red text with the link to a small version of your image. You need to change the green text with a title which is the text that is displayed whenever you hover over an image with your mouse cursor without clicking on it. The title section can be deleted to produce the following (which will still function):

<a href="http://photos6.flickr.com/11413167_0568790dd3.jpg"><img src="http://photos6.flickr.com/11413167_0568790dd3_m.jpg" /></a>

Unfortunately, W3 Schools didn’t provide an example exactly like the one I show above. However, you can click here to open one of the pages on their site in a new window, delete everything in the left column. Then, copy the above html code and paste it in the left column. Then, click on the button that says “Edit the text and click me”. After you try this, you may want to replace the links to the images with ones of your own photos.

Inserting a Non-Clickable Image

If you simply want to post an image to your blog that is not clickable, the following html code is what you need.

<img src="http://photos6.flickr.com/11413167_0568790dd3.jpg" />

You need to replace the blue text with the link for the image.

You may need to adjust the size of the image displayed on your page. You can edit your image to make it smaller but you may find this method to be easier.

<img src="http://photos6.flickr.com/11413167_0568790dd3.jpg" width="720" height="514">

You need to replace the blue text with the link for the image. Replace the green text with the image width in pixels and the red text with image height in pixels. (Note that a pixel is one of the tiny colored dots that make up an image). Every image editing program that you choose to use will tell you the height and width of an image in pixels.

The W3 Schools provided a good example of resizing a non-clickable image. There is not usually a problem with making an image smaller. Making an image larger may introduce undesirable artifacts. In the example, try changing both the width and height of the one of the images in the example to 200. It is also important to use height and width that has the same proportions as the original image; otherwise, you will end up stretching the image. In the example, try increasing the height of the image but leave the width unchanged. After you make any changes, be sure to click on the button that says “Edit the text and click me”. To open the example in a new window, click here.

Adding a Button

If you want to create a clickable button that brings you to a web address, just use the following html code:

<a href="http://georgesfreeware.blogspot.com/2005/02/wink.html"><img src="http://img114.exs.cx/img114/2198/upclickheretoseedemo6cp.jpg"></a>

The blue text is the address of the web site and the red text is the location of the image for your button.

The W3 Schools example of a button includes the same method of resizing the button image that I demonstrated in the previous section. I didn’t include this in the html code above because I think most folks will create a button of the size they want. There is no need for the image height and width information unless you want to resize the button. To open the example in a new window, click here.

One of my readers sent a link to me for a web site, GRSites.com, which has a very good button maker along with other useful stuff.

Return to George’s Home Page

Return to Part 2, Adding Images to Your Blog