Removing Hyperlinks from Blogger Post Pictures

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. The easy way to do this is by selecting the image on your Blogger post editor, and deselect the button that says 'Link' from your post editor toolbar. You have to do this one by one for each post.

Linked

De-linked

But, what if you've posted hundreds of images across hundreds of posts, and you always want the option to restore the hyperlink in the future? That's where this cool trick comes to play. Yeap, this is a CSS tweak, not an HTML one.

I've prepared more than one code, 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.

If you're using the old layout, go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new layout, go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.post img, .post img a{
position: relative;
z-index: -100;
}

OR

.post img, .post img a{
position: relative;
z-index: -1;
}
.post-outer{
position: relative;
z-index: 1 !important;
}

OR

.entry{
position: relative;
z-index: 1;
}
.hentry img, .separator{
position: relative;
z-index: -1;
}

OR

.post{
position: relative !important;
z-index: 10 !important;
}
.hentry img, .separator{
position: relative !important;
z-index: -1 !important;
}

That will be all folks. Enjoy!