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.

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.

How To Remove Image Hyperlink in Blogger?

Go to Blogger → Template

Backup Your Template

Now search for </b:skin>  or </b:skin

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;
}

Finally save your template and you’re almost done!

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.

Ahmed Shawan
Author

Ahmed Shawan is a passionate blogger, WordPress enthusiast, digital marketer. He is the top author and founder of TheWildBlogger.com

Comments are closed.