Remove Auto Image Hyperlink In Blogger Post Editor!

Adding a new image with your post in blogger also fastens a new hyperlink which is a default attribute of post editor. Every blogger user should be irritated with this auto image hyperlink since it tends readers to click on image and a popups with opacity comes into sight with randomized images as like a slideshow. This impacts readers badly to give proper attention in reading post also they might be likely to stop reading and close that page immediately. But this is a default feature of blogger and it requires to manually remove all the links from images when you upload using default image uploader.

Remove Auto Image Hyperlink In Blogger Post Editor!

But now it's possible to remove this auto image hyperlink and it requires only adding a simple css code. This code is developed by me and it works with every webkit browsers and browsers of iOS including mobile devices. Let's see how to hack?

How To Remove Image Hyperlink in Blogger?

1. Go to Blogger → Template
2. Backup Your Template
3. Now search for </b:skin>  or </b:skin
4. Now copy the following code and paste right before closing </b:skin tag
.separator a {
   pointer-events: none;
   cursor: default;
}
.separator a img {
outline : none;
border : 0;
}
.separator a:active, .separator a:focus {
 outline: none;
-moz-outline-style: none;
 ie-dummy: expression(this.hideFocus=true);
}
.separator a img:active, .separator a img:focus {
outline: none;
-moz-outline-style: none;
}
5. Finally save your template and you're almost done!
6. Now visit your blog and you should not see any image acted like an anchor

How This Snippet Impacts on Blogger Post Images?

As you've added this snippet on your template so it controls all the images under a <div tag which is binded to class="separator" [that you can monitor once you add an image from your post editor]. Somehow blogger uses a default scheme to add images with anchor on post once you upload it, you can manually delete the link simply clicking on link after selecting the image on your post editor also can give properties [image title, image alt] to each image. But now it's possible to automatically remove hyperlink from images in blogger using the snippet above mentioned. This code will help your images not to create outline [either on right click or left from mouse] also it will not work on all images [adsense banner ad or any other banner] but only the images that you attach using blogger default upload option. So you have the full control over images that remain under class="separator"

Need Help?

I hope this pretty tutorial will help you to remove hyperlinks from blogger images since the snippet is very small in size but works better to make your chore comes true. Just about a day ago i published another tutorial which says adding auto target="blank" to external links in blogger even including blogger default images, so using this trick will help you not to open any image with new window from your blog post. So i think if you adopt my that tutorial then you must follow this one otherwise all of your images within post-body will start opening with new window. 

If you find tutorial helpful then kindly express your love, share it with your desired social media, also let me know how i can help you much....Your response is appreciated :)

2 comments

  1. It worked perfectly. Thanks a lot

    ReplyDelete
  2. Hi, This works well except for images with a caption. How can it be automatically applied to those? As a work around, I just went to the html and changed the class from "tr-caption-container" to "separator".

    ReplyDelete

About

The Wild Blogger is a technology blog which covers all popular and trending news of the web, tech tutorials, blog, blogging tips and tutorials, seo tips, social media marketing, content marketing and tools. Read More...

Browse by Topics

SEO Social Media Make Money

Blogger Tricks Tutorials

Blogging Tips Photoshop