How to Make a Photo Clickable to Enlarge in a Blogger

Give your Blogger visitors the power to zoom in on blog photos.

Google Blogger provides multiple ways to add content to blogs. You can type text into the text editor, edit the HTML on individual posts and even update the code that manages your entire Blogger template. A quick way to take advantage of Blogger's HTML editing capabilities is to add a clickable photo to a Blogger post. When site visitors click a small version of an image in your post, their browsers resize the photo and give them a larger view.

Instructions

1. Launch your browser and go to your Blogger page. Click the "New Post" button that appears next to one of your blogs. The site opens the New Page Title page. Type a title for your post in the "Title" text box that appears on the page.

2. Click the "Edit HTML" button and paste the following code into the editor that appears below the "Title" text box:

   <img id="image1" src="ADD IMAGE URL HERE" style="height:20%; width:20%;"

   This code creates an HTML "img" tag. The tag's "id" value is "image1." The height and width attributes have values of 20 percent. These values set the image's initial height. This is the image size site visitors see when they view your Blogger post. Change "20%" to a different value if you like. such as "50%." Replace "ADD IMAGE URL HERE" with the URL of a photo on the Web that you would like to use.

3. Paste the code shown below after the code listed in the previous step:

   onclick="javascript: document.getElementById('image1').style.height='100%'; document.getElementById('image1').style.width='100%';" />

   This HTML code causes the image to enlarge when someone clicks the image. Click "Publish Post," then click "View Post." Your photo appears in the post; click it to enlarge it.

Tips & Warnings

• Note that the value for the img's id attribute is "image1" in this example. You can use any name you like for the id. If you change the name, remember to change it everywhere in the code. It appears two more times in the two "document.getElementById" statement.

• You don't have to make the enlarged image's value "100%." If you would prefer to display a smaller zoomed image, replace "100%" with another value, such as "80%."

• Add as many clickable images as you like to a Blogger post. Give each image a unique id.

References

• Quackit: CSS Height and Width
• Google Blogger Help: All About Blogger's Post Editor

Resources

• YouTube Blogger: Blogger's Help Channel