Need help To remove blogger by default created hyperlink from uploaded images to posts to prevent images from being clickable or from appearing into full size by disabling the link. Want to know How to Remove Hyperlinks from Post images on homepage? Follow the given step by step tutorial with images to manually or automatically remove links from single image, specific post, specific page, homepage or from all posts

Removing Hyperlinks From Blogger Post Images

By default Blogger creates a link to the image whenever an image is uploaded to a Blogger post. Sometimes, however, you might want to remove the link to prevent the image from being clickable. A common reason would be to safeguard your image. If you are worried about your image being copied you can prevent it from appearing full size by disabling the link. When you remove the hyperlink off an image from your post, your post image won't be clickable anymore, preventing readers from accessing the larger version of the image.

Removing Hyperlinks From Blogger Post Images
If you are using a custom Blogger template, then you probably have noticed that few of the third-party developed templates does not supports Lightbox functionality, which causes images to be opened in a new tab window whenever they are clicked by the users. Since, Blogger use Picasa web album to host your blog’s images, so whenever user clicks on an image present on your site it ultimately takes them to a different destination, which causes increase in the bounce rate and decrease in the ad sales because your users are not converting they are coming from one end and leaving from the other.

Recently, one of our users asked us that How to Remove Hyperlinks from Post Images in Blogger? The easiest way to remove hyperlinks for post images in blogger is to simply revert to the HTML Tab in the blogger post editor and remove the hyperlink <a href>. However, what if you have to edit large numbers of posts? don't worry, we have prepared set of codes with CSS and JavaScript tweak, not HTML one to automatically remove links. Today in this tutorial, we will show you How to manually or automatically Remove Hyperlinks from single Post image or from Homepage page / Specific post / Specific page / or from all posts in blogger with step by step instructions and images.


Removing Hyperlinks from Posts Images


If you just want to disable the hyperlink from a single image in Blogger try this method. I have found that it removes the link but it will not reinstate it once removed so be sure you want to remove the link before you start otherwise you will need to reinstate the link manually. I suggest you backup before you start.

Removing Hyperlinks Manually / from Single Image

1. By Using Blogger Compose Editor Toolbar ( Easy

Step 1. Login to your blogger account, then navigate to edit post ( From which you want to remove image hyperlink ).

Step 2. Make sure Compose is selected, then select the picture and then click on Link in Toolbar.


Removing image hyperlink using blogger editor


Step 3. Click on Publish / Update.

2. By Using Blogger Post HTML Editor

Step 1. Login to your blogger account, then navigate to edit post ( From which you want to remove image hyperlink ).

Step 2. Make sure HTML is selected, then Find the image hyperlink code.

Note : Their may be more than one Image hyperlink depends upon the number of images in post. Code may vary little because every image have different URL.

Code look like this :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5XIh64pxUwGZTmX1rAZrWtppbQEKjRHmsPaOwrsL8S3LjFy-KPK6ySUBA7QfNwVoouWovwKrfU6lGK2yKxv-j2wvfyZ29EwBXKAPKJqSVfjUcodE0Hrh2oFYDpPSo-bS4gBmXkvPQgY/s1600/Vintage-Camera.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5XIh64pxUwGZTmX1rAZrWtppbQEKjRHmsPaOwrsL8S3LjFy-KPK6ySUBA7QfNwVoouWovwKrfU6lGK2yKxv-j2wvfyZ29EwBXKAPKJqSVfjUcodE0Hrh2oFYDpPSo-bS4gBmXkvPQgY/s320/Vintage-Camera.jpg" width="320" /></a>

Step 3. Now remove the hyperlink around the img tag ( Blue color code ).

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5XIh64pxUwGZTmX1rAZrWtppbQEKjRHmsPaOwrsL8S3LjFy-KPK6ySUBA7QfNwVoouWovwKrfU6lGK2yKxv-j2wvfyZ29EwBXKAPKJqSVfjUcodE0Hrh2oFYDpPSo-bS4gBmXkvPQgY/s1600/Vintage-Camera.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5XIh64pxUwGZTmX1rAZrWtppbQEKjRHmsPaOwrsL8S3LjFy-KPK6ySUBA7QfNwVoouWovwKrfU6lGK2yKxv-j2wvfyZ29EwBXKAPKJqSVfjUcodE0Hrh2oFYDpPSo-bS4gBmXkvPQgY/s320/Vintage-Camera.jpg" width="320" /></a>

Step 4. Click on Publish / Update.



Removing Hyperlinks Automatically From Post Images


Step 1. Login to your blogger account, then navigate to Template > Edit HTML.


edit blogger template

Step 2. Click anywhere inside the code and search for following code ( CTRL+F ) :

</head>


Step 3. Copy and paste the following code just above it to disable Hyperlinks from :

<b:if cond='data:blog.pageType == "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "URL-HERE"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>


Step 4. Configuration for Specific post and page only :

Replace URL-HERE with the page / post URL. For example :

If your post URL is : http://www.howbloggerz.blogspot.com/2016/04/removing-hyperlinks-from-blogger-post-images.html
Then add only : 2016/04/removing-hyperlinks-from-blogger-post-images.html

OR

If your page URL is : http://www.howbloggerz.blogspot.com/p/write-for-us.html
Then add only : p/write-for-us.html


Step 5. Click Save Template.

Enjoy!

Now view your blog post images and try a click over it :), as it is impossible to have one global code that works for all templates. If it doesn't work on your template, leave a comment and I'll prepare one that will work for you. Stay Updated, Browse Howbloggerz! :)
Love it? Don't forget to Subscribe
  • Ferdy, S.E.
    Ferdy, S.E.
    9 September 2018 at 23:59
    Hi there... Can you help me to disable Hyperlinks from all post from my blog? here is my url for my blog ferdyslog.com

    I think I have used the above code, but it still can't work with my template.

    Really appreciate your work and your help...
    Saurabh Jarial
    Saurabh Jarial
    30 September 2018 at 09:31
    Looks like you got the solution.
  • Guru Renang
    Guru Renang
    2 October 2018 at 00:49
    thanks you sir,

    script working to my blog
    Saurabh Jarial
    Saurabh Jarial
    23 October 2018 at 00:38
    Have a nice day!
  • Bolo
    Bolo
    26 August 2019 at 15:13
    Hi Sir, may i know how to remove link on title post for blogspot? thank you
    Saurabh Jarial
    Saurabh Jarial
    3 October 2019 at 17:45
    Hi, For that you need to edit your template. The steps vary with theme used. If you need any help contact me via contact form.
  • Unknown
    Unknown
    26 August 2019 at 15:23
    Great!
    Saurabh Jarial
    Saurabh Jarial
    3 October 2019 at 17:46
    Thanks!
  • 익명
    익명
    6 September 2019 at 17:31
    Thank you!
  • 익명
    익명
    6 September 2019 at 17:31
    Thank you
  • indie music licensing
    indie music licensing
    19 October 2019 at 17:37
    This works fine except on search pages, "older posts" pages and label results pages e.g. "myblog.blogspot.com/search/labels/tips" still has clickable images, "myblog.blogspot.com/search?updated-max=2019-10-09T14:09:00%2B01:00&max-results=33" still has images, and "myblog.blogspot.com/search?q=tips" also still has clickable images.
    Saurabh Jarial
    Saurabh Jarial
    24 November 2019 at 11:27
    Thanks for letting us know. We will update this post soon.
  • People Help
    People Help
    2 April 2020 at 22:48
    super
  • Admin
    Admin
    5 October 2020 at 01:26
    Script working 100% 2020 thanks.
  • Shandri15
    Shandri15
    5 November 2020 at 17:49
    wow... thank you ^^