Custom Search

Saturday, April 11, 2009

How to remove anchor links when adding images/pictures in your blog

Sponsored Links

How to make images/pictures in your blog not clickable or unclickable?
How to remove link to an image/picture?

When you add an images into your blog, the images will have anchor tags by default. This means that the image contains a link. By clicking the image, you will be directed on a page that only displays the image. For example, click the images below to better understand the purpose of this tutorial.

Image that contain links (Blogger Default),

Image that do not contain a link (Tweaked Code)

Step by step tutorial on how to remove links (open in window) when adding images in your blog.

1. First read my post on "How to put images on your blog posts". Actually adding an image in your blog post is just very easy. Even a toddler can do that nowadays.hehe

2. Go to Edit HTML. The code of your uploaded image should look like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0QLu7fc-X8XdRvG-JPtIMQgQIN8o4dUUjLNal1TR3dtEPBArgwFkAiGcYk8EgGb5_GjRrY0M7WAV4bLDJur9eAnMhJY1isfwySPR6Bg5H8JP9-SStJAyLu9JBXINKF0yyDJuX4r85PAuX/s400/tux.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 144px; height: 172px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0QLu7fc-X8XdRvG-JPtIMQgQIN8o4dUUjLNal1TR3dtEPBArgwFkAiGcYk8EgGb5_GjRrY0M7WAV4bLDJur9eAnMhJY1isfwySPR6Bg5H8JP9-SStJAyLu9JBXINKF0yyDJuX4r85PAuX/s400/tux.png" alt="" border="0" /></a>

3. To remove the link from the image OR to make the image not clickable, all you have to do is remove the anchor tags <a href=""></a> which is colored in red in step 2. Your final code should look like this:

<img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 144px; height: 172px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0QLu7fc-X8XdRvG-JPtIMQgQIN8o4dUUjLNal1TR3dtEPBArgwFkAiGcYk8EgGb5_GjRrY0M7WAV4bLDJur9eAnMhJY1isfwySPR6Bg5H8JP9-SStJAyLu9JBXINKF0yyDJuX4r85PAuX/s400/tux.png" alt="" border="0" />

4. PUBLISH your post and try clicking the image. It should not be clickable anymore or it should not direct you on a page that only displays the image.

If you have any questions regarding this tutorial, please don't hesitate to drop a comment ^_^

4 comments:

Muhammed said...

Hi Pinoy, sometimes back we were agreed on blogroll exchange. I was looking for my blog link and couldn't find it anywhere. YOur blog is there in my blogroll.
http://play-cargames.blogspot.com
Please let me know if your blogroll has my blog?
Regards

EditorPinoy said...

Sorry Saleel,

I did not notice the changes because I changed my layout months ago. I have already added you into my blogroll on my other blog.

http://techmata.blogspot.com

nikky said...

i just tried just now, thank u so much ..its works.. love u ..;))

EditorPinoy said...

Hi Nikita,

Good to hear that it worked for you ^_^

Post a Comment

Please subscribe to my rssfeed 16x16 button Subscribe to my RSS Feed or email subscription 16x16 button Subscribe via Email if you want to receive updates. Thanks! ^_^