WELCOME

TO TECH CRYPTIC.

YES, THIS IS A TECH BLOG.

Saturday, 25 January 2014

03:08 0

If you use blogger, you would have been know that by default images which we put in our blogs are linked to their full size which means if any visitor clicks on that image, then it will open in full size. This might be confusing for the visitors and it would takes away the traffic.

So if you don't want that, here is a little trick for making images Non-clickable in your blogger post:

If you are using Old-Post Editor.
First upload image you want in your post. Then click on the EDIT HTML of your post editor. Here you will see a bunch of codes. Now you will have to find the HTML codes for your uploaded images, which will look something like these:
.........................................................................................................................................................................................................................
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_wa6zL1GRiOs/TNP_Qq8tsZI/AAAAAAAAAFUA/ADKJKtgcQmc/s1600/This+is+a+Image.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 259px; height: 194px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYMi6cpqryhgogJkX7bwtcaEiPGlFtu8DDtuLSFc9iSeArbjBqaOEIQKlhfkHWsMW7c7qEhXzsuzdjXwMfesVaYWRqpaXvusE4y-esfgUPxDF-q4pmrqtnWCbcWaED0-dOYNcOUrwtd5U/s400/This+is+an+Image.jpg" alt="" id="BLOGGER_PHOTO_ID_982264345529028840403346" border="0" /></a>
...................................................................................................................................................................
In the above example, the codes are divided in red and green colors. The red part of code is responsible for making the image a link while the green colored code displays the image. Now what you have to do is just delete the red colored part leaving the green part as it is. CONGRATULATIONS IT'S ALL DONE.

If you arbe using New-Post Editor.
So if you are working on the New-Post Editor than than the HTML codes will be somewhat different. First you will have to upload the image in your post editor. Then click on the EDIT HTML of your post editor. Here you will see a bunch of codes. Now you will have to find the HTML codes for your uploaded images, which will look something like these:
.........................................................................................................................................................................................................................


<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqCo5Cx5aERXmnTVQidL1ifNtjYMPKpV6r6a54zflOB9cBGtAm8jT8t-bNO2S_PrdgGKxPCaSqNraS4LH4Ap6S67ej3sOxFGc-3XXo45Qkt9bqriDMir9ZDQo9s0lB67EyhvltJqFABvEO/s1600/How to make images in blogger Non-clickable.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqCo5Cx5aERXmnTVQidL1ifNtjYMPKpV6r6a54zflOB9cBGtAm8jT8t-bNO2S_PrdgGKxPCaSqNraS4LH4Ap6S67ej3sOxFGc-3XXo45Qkt9bqriDMir9ZDQo9s0lB67EyhvltJqFABvEO/s1600/How to make images in blogger.jpg" height="424" width="640" /></a></div>
.........................................................................................................................................................................................................................
In the above example, the codes are divided into blue, red and green colors. The blue part of the code is responsible for alignment of the image, red part makes it a link and the green part displays the image. Now just Delete the red part of the code and you are all done.








0 comments