Home » » Blogspot How to: Make Images Not Clickable (No Enlarge)

Blogspot How to: Make Images Not Clickable (No Enlarge)

Written By maura avel on Sunday, November 18, 2012 | 11:09:00 AM

By default, images in Blogger are linked to their full size which means if someone clicks on an image, the same image is opened in full size. This is confusing for blog visitors and it also takes the visitors away from your blog. If you want to make your uploaded images not click-able then I'll tell you a simple trick to do that.
Note: Before reading the tutorial, make sure you know the type of your post editor. If you don't know the type of your editor then simply go to Settings | Basic and at the end of the page, you can see the type of your post editor. Anyways, I'll explain the trick in both old and new post editors.
1- Make Images Not Clickable in Old Post Editor
Make sure you're working in Edit HTML of the old post editor. You can change the editing mode from top right of the post editor. So, upload your image as you normally do. After the image is uploaded, you'll see some code in the post editor. This code is actually the HTML of your uploaded image and it will look something like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) 
{}" href="http://1.bp.blogspot.com/_wa6zL1GRiOs/TNP_Qq8tsZI/
AAAAAAAAFUA/ADKJKtgcQmc/s1600/This+is+an+Image.jpg"><img style=
"display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; 
width: 259px; height: 194px;" 
alt="" id="BLOGGER_PHOTO_ID_5536049028840403346" border="0" /></a>
The code for my image is divided in Red and Green parts. The Red part is responsible for making the image a link and green part displays the image. So, you need to delete that part of your image which is marked red in my image and leave the Green part as it is.
2- Make Images Not Clickable in New Updated Post Editor
So, if you're using the new updated post editor then the code for uploaded image will be a little different. Just make sure you're working in the Edit HTML mode. In Edit HTML mode of the post editor, you'll see the code of the uploaded image instead of the image itself. So, upload an image and you'll see some code like this:
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/_wa6zL1GRiOs/TNQCKcinbnI/AAAAAAAAFUI/
hlSwpEE8OzY/s1600/This+is+an+Image.jpg" imageanchor="1" style="margin-left: 
1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_wa6zL1GRiOs/
TNQCKcinbnI/AAAAAAAAFUI/hlSwpEE8OzY/s1600/This+is+an+Image.jpg" /></a></div>

As you can see that the code is divided in Red, Green and Blue parts. reen part displays the image, Red makes it a link and Blue is responsible for the alignment of the image. So, just delete the red part from your image and it will not be click-able.
sumber : [http://www.betatemplates.com]


Post a Comment