Stopping pictures on your blog from being "clickable"

This article is about how to stop people who read your blog from clicking on a picture and seeing a full-size copy of it.

Currently, if you put a picture into a blog post using the Picture toolbar item, and someone reading your blog clicks on that picture, then the person sees a full-size copy of the picture. There is no universal setting that you can apply to stop this happening, or even an easy way to stop it for specific pictures.

But you can stop it for each picture in a post by editing the HTML that is behind the post and removing the href part of the picture statement. If you're not sure what that means, read on.

Making a picture "unclickable"

1 Put the picture into your post in the usual way.

2 Add some marker text immediately before the picture - you will use this to locate the HTML for the picture among all the other HTML used to make up your post.

3 Click HTML - it's a tab at the top corner of the Post Editor window.

4 Find the marker text (use your browser's Find tool, eg Edit > Find in Firefox)

5 Then find the HTML-code for the picture which will be just before (or after) that.

The code will look something like this (some settings may be different in yours):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LtquAu0N7qic1zUpCK96s4pl6BX53FUcpp3jU_CjVgnHgW9eMjaRL-T7skWYOQMfWRXy1_6ODFpO6kdWMt-mo_EcVql4CPf-diYx24uxYWaML3JPQ19vZQq8IyIye1QngsnyYYClygnq/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LtquAu0N7qic1zUpCK96s4pl6BX53FUcpp3jU_CjVgnHgW9eMjaRL-T7skWYOQMfWRXy1_6ODFpO6kdWMt-mo_EcVql4CPf-diYx24uxYWaML3JPQ19vZQq8IyIye1QngsnyYYClygnq/"
height="235" width="400" /></a></div>

That looks hard to read. But if you break it down, it becomes something like:

<div class="separator" style="clear: both; text-align: center;">

<a

href="THE URL THAT THE USER IS TAKEN TO IF THEY CLICK ON THE PICTURE"

imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
>

<img
border="0"
src="THE URL WHERE THE SOURCE PICTURE IS READ FROM"

height="235" width="400"
/>

</a></div>

Note: provided you've selected "Use <br /> tags" under Options > Line Breaks, then you can add extra new-lines, to make the code easier to read.

6 To make the final picture unable to be clicked, you need to remove the part of the HTML code that says:

href="THE URL THAT THE USER IS TAKEN TO IF THEY CLICK ON THE PICTURE"

So that the eventual code for the picture looks like:

<a

imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
>

<img
border="0"
src="THE URL WHERE THE SOURCE PICTURE IS READ FROM"

height="235" width="400"
/>

</a>

Job Done!

At this point, you might Publish your post, or you might want to edit it some more - for example by adding alt-text or a title to the pictures, or by showing your pictures in a slideshow.

Either way, I recommend switching back to Compose mode now (using the Compose button at the top right of the editor), so that you don't get confused the next time you edit a post.