Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, July 23, 2011

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!

71 comments:

  1. thanks for this trick. very usefull

    ReplyDelete
  2. ya nice one man
    can you apost an article for how to add meta keywords and description for each post in blogger
    smahkin.blogspot.com

    ReplyDelete
  3. can you tell me how to add adsense code in centre of each post plz
    smahkin.blogspot.com

    ReplyDelete
  4. Hello 'YogaBoy'
    I'm Melvin
    Over From TheEmoLab
    Maybe you can find a solution for my template.
    Thanks in Advanced
    - TheEmoLab Team
    - http://www.theemolab.com/

    - Nice Site!!

    ReplyDelete
  5. @Retnet: You're welcome. And enjoy your stay here.

    @Shree: There are plenty of tutorials about adding keywords and description in Google. I try not to re-create something that is readily available. If you need help finding them, contact me, and I'll point you to the right direction. As for the AdSense, do you wanna center your ads? If yes, check out this post.

    @Melvin: Here's the code for your template :)

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

    Cheers.

    ReplyDelete
  6. hi
    its not working on my blog with both of them.
    when i add it in the css section, all the images disappear, it will be great if u will take a look
    its on
    www.iBake.co.il

    thanks

    shimon

    ReplyDelete
  7. @Shimon:

    The second code works in your blog. Try again. I just did.

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

    ReplyDelete
  8. Hi YoboY,

    in Blogger Travel-Layout this code works fine:

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

    But _only_ in OSX - in W7 with IE9 it work's not, look at here:

    http://goo.gl/voOJR

    Any idee how to fix it?

    Thanks for Help! Greetings

    ReplyDelete
  9. @oliver: Nice find. The problem is because IE's 'advanced' renderers could not render the CSS above correctly. Right now I can't think of a workaround, but I'll update this page should I find any. Cheers.

    ReplyDelete
  10. Okay, I've bookmarked your Blog, great Blog! God bless you, Oliver

    ReplyDelete
  11. @Oliver: Nice to know. Enjoy your stay here. Cheers and God bless.

    ReplyDelete
  12. Hi Oliver,

    I'm having the same problem as shimon

    When I add the codes above in the css section, either all the images disappear or the links remain.

    Be grateful if you could take a look.

    Cheers
    Sola Ratione

    ReplyDelete
  13. @Sola: Use this for your blog:

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

    Cheers.

    ReplyDelete
  14. Many thanks YoboY. Really appreciate your help.

    Just one issue, though. It has worked for many of the pictures, but not for all of them. e.g. on the post 'The Mind-Body Problem', they are still clickable. And even in the same post, some pics will have the links removed, but others don't? Is there a solution to this?

    Thanks again,
    Best wishes,
    Sola

    ReplyDelete
  15. @Sola: I can see the problem. There are many div tags in your posts, dividing your posts into many sub-sections. Let me explain how the tweak in this tutorial works: I send the images to a layer behind the main text. So, the image is still visible, but it can't be clicked because it is hidden behind your text layer.

    In your posts, you've justified your text line by line. As a result, instead of having one huge front layer, your post has many divided layers. These divided layers have gap between them. I know it is hard to imagine. See the screenshot below.

    Divided

    I can provide one specific code to fix this particular post, but it will be pointless as in another post, the front layer will be divided in a different way. Hence, I think the best solution we have in hand now is to format your post in such a way that the front layer don't get divided that much.

    When you edit this post, when you switch over to Edit HTML mode, you'll see many div tags. We need to avoid that. You might be wondering - how did the post get divided by the div tags that much. It is caused by your text align. You seem to have left-aligned, right-aligned and justified your text line by line. If you really can't avoid aligning your text line by line, then I think the best way to remove the hyperlink from your images is to manually remove the links from your images one by one.

    ReplyDelete
  16. Thanks YoboY. That makes sense. The line-by-line text alignment must be caused by the fact that I align the images alternately left and then right. This is a feature I'd prefer to keep, so I guess I will have to manually remove the links as you suggest. Many thanks for your time and assistance. Much appreciated.

    Best wishes,
    Sola

    ReplyDelete
  17. @Sola: You're welcome. Thanks for stopping by. Cheers and God bless.

    ReplyDelete
  18. Hi YoboY

    I am big fan, I am not able to remove the link, I am using dynamic views, do you think that's why?

    thanks

    ReplyDelete
  19. @Omar: It won't work in Dynamic Views.

    @UYA: Let's have a look shall we? What's your blog's address?

    ReplyDelete
  20. Hi,

    I am interested in having you help me disable the left click on my blog for photos. My blog is private...would you mind giving me your email so I can add you to help me figure out how?

    ReplyDelete
    Replies
    1. Hi Ted/Breauna,

      Send me a dummy email using the contact form. I shall reply you.

      Cheers.

      Delete
  21. Ok, I think I did it right...im not sure? I am not very computer savvy so you will have to let me know. Thanks.

    ReplyDelete
    Replies
    1. Ted, I'm afraid I didn't receive any email from you. Here's my email: yoboy7@gmail.com

      Delete
  22. Nice tip actually i was searching for this but here a new problem after doing this we loose title tags from the images. Any Solution.

    ReplyDelete
    Replies
    1. Hi Navneet,

      By 'title tag', were you referring to the alt text that pops up when you hover over your images? If yes, I'm afraid your alt text will be hidden when this tweak is in place. But the bright side is, your images will not get stolen. Some websites uses Javascript to disable rightclick to prevent images from being stolen. But one can easily disable javascript. But by z-indexing your image, one would require developer's tools and some CSS knowledge to steal images.

      Delete
  23. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi Arabedia,

      Sorry for the late reply. If the code above isn't work for you, then you have to delink your images manually. You can do this by editting your posts that have these images (one post at a time), select the image (by clicking once in your Blogger post editor), then click on the 'Link' icon..

      BTW, what is W.E.?

      Delete
  24. Hi! I tried all the codes (including the ones you posted on the comments), but my images either go blank or the links remain. I also tried removing the images link directly before, and it doesnt work!! I also tried removing the from the post html, and it also failed :(

    Any suggestions?

    ReplyDelete
    Replies
    1. Ho Sofia,

      It appears like the posts are two segmented for the tweak above to work. Have you tried removing the hyperlink manually, by editing the post - switch to Compose mode (as opposed to the HTML mode) - click on the icon that says 'Link' (make sure it is disabled)?

      Delete
  25. Hi Yoga!

    I use Magazine view and the last set of code worked fine on the post page. Main page still shows all links though. Not an issue for me - quite happy that it works on the post page. Just checking if that's the best I can do for now? Thank you!

    ReplyDelete
    Replies
    1. Hi MomWith aDot,

      The tweak above wasn't meant for Dynamic View templates. I can't quite find a fitting solution for the DV templates - but then again, you can't entirely protect your contents these days. There are always (easy) ways to go beyond these little protections that we put in place to make these contents accessible.

      Delete
  26. This is what I've been looking for but it also disables links that are in the post as well. Is there a way for just the pictures?

    ReplyDelete
    Replies
    1. It shouldn't be disabling your text link. Can I have a look at one of your posts in which this is happening?

      Delete
  27. Hello. Thank you for this. :)

    ReplyDelete
  28. Hey, how do I remove this code? I've had it on my blog for a few weeks and it seems to be disabling all links on my blog. My blog is elegant-chaos.blogspot.com if you want to take a look.

    Lindsey

    ReplyDelete
    Replies
    1. Hi Lindsey,

      Your links are working fine for me. Anyways, to remove the code, go to your Add CSS, and remove these lines:
      .post{
      position: relative !important;
      z-index: 10 !important;
      }
      .hentry img, .separator{
      position: relative !important;
      z-index: -1 !important;
      }


      And it seems like you've added multiple copies of the same code. Get rid of all of them.

      Delete
  29. Ok I got it to work before without disabling my links. I had to redo my blog and tried to re add it and now none of the code ahead work. www.tanishalynne.com

    ReplyDelete
    Replies
    1. Hi Tanisha,

      The tweak works best with Blogger's default templates. I've tried to see if there is a workaround for your current template, but I'm having a tough time finding one.

      Delete
  30. Great, thanks! Very simple and does the job perfectly! :)

    ReplyDelete
  31. Hello Admin,

    Your third code works best for me but i just want little modification in your code that is i just want to remove the hyperlinks from my post images but i also want when some one click on my image it should have a option of "Copy Image URL/Option" so that if someone wants to copy the URL of my Image it can be easily for them. Can you give me that code? Thanks

    ReplyDelete
    Replies
    1. Hi Zohaib,

      That cannot be easily done. The only way you can go forward with this is by editing your post's HTML, look for the HTML that makes up your image, and remove the href="http....." part. You need to do this one by one for all your images, unless if you can find someone to make a Javascript equivalent code for this (which I'm sure can be done)..

      Delete
    2. Hello Yoga,

      Thanks for your prompt response. Let me give you a example from my test weblog, from my below test weblog you will find a image which has no hyperlinks placed on it and we can still save that image and move that image towards addressbar for opening in a new tab/window, while implementing of your above code disables all other options like Saving Image, Copying Image URL or Moving Image to Addressbar but i just want to disable the left click hyperlinks on image. So tell me if its possible for you to create a CSS Code or Script for that purpose?? Thanks

      My Test Blog URL: http://insure-phobua.blogspot.com/2012/01/fgfgfgfgfgfgfgfg.html

      Delete
    3. That's what I'm trying to tell you. This cannot be done with CSS. You need to either manually edit your image's HTML, or someone has to come up with a tricky script for it. I'm afraid it cannot be easily done.

      Delete
  32. Why are some images in this post still clickable?

    http://clay-talk.blogspot.com/2013/11/ohnoyoudidnt.html

    ReplyDelete
    Replies
    1. I can't seem to load your blog. Everything okay?

      Delete
  33. Thanks yoboy for your tips,but if you want visitor to right click, you have to add some code to body tag.

    ReplyDelete
  34. the last code worked on my blog,
    now i got a problem,
    there one download image buttom in my blog
    the download buttom hyperlink was not horking any soulution for that download buttom.

    ReplyDelete
  35. All these dont work for me...

    inakiluengo.blogspot.com

    id appreciate if you could help,thanks!

    ReplyDelete
    Replies
    1. Hello Inaki,

      I'm afraid the tweak above is not meant for Dynamic templates.

      Delete
  36. Hello!
    The code is only working for one image of the post. I dont understand why. Can you help me?
    Link post: http://poliminimalista.blogspot.pt/2014/12/kiko-universal-fit-foundation-review.html
    Thanks

    ReplyDelete
    Replies
    1. Hello Joana,

      This tweak is meant for the default template - and it's a big hit-and-miss. This is no longer a good way to remove hyperlinks.

      Delete
  37. Changing the css in the template is an excellent idea! The fourth piece of code worked for me. Thank you, Yoga!

    ReplyDelete
  38. Thank you very much! It is still working

    ReplyDelete
  39. Hello Yoga,

    could you have an eye on my blog http://www.hotnewsblog.net ... none of the possibilites works. thanks a lot. and do you also write partial programs for templates?

    thx for your answers!

    ReplyDelete
    Replies
    1. Hello Wolfgang,

      See if this works:

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

      Delete
  40. haloo sir nice post i have a question in my blogger there is outgoing link which i dont know where is come from please help me sir i am facing big problem
    http://no1worldlifestyle.blogspot.com/

    ReplyDelete
    Replies
    1. Hello could you describe where exactly you're seeing this link?

      Delete
  41. Hello admin

    How To enable this code just in posts ??

    Thanks for answer .

    ReplyDelete
    Replies
    1. Hello Gab,

      The codes above are for images from the post - although it really is more of a hit-and-miss depending on the template you're using.

      Delete
  42. Hi there. The code works great. However, my images that are hyperlinked to a url or site also got disabled making them unclickable anymore. :o

    ReplyDelete
    Replies
    1. Sorry for the late reply. All your images within your posts will be unclickable when you put this code on.

      Delete
  43. Hi Yoga
    I used all your Codes here to remove link from image. but Number 1+2 are not work with my layout and N.3+4 are hide all my image.
    myblog is: stunningcambodia.blogspot.com.
    please let me know by email: nochannara@gmail.com.
    Thanks.

    ReplyDelete
    Replies
    1. Hello Nora,

      Unfortunately the method used above is really not the reliable way to prevent clicks on images, and it really does create a hit-and-miss situation (like in your case) :(

      Delete
  44. Hello,
    I was looking for a tutorial like this, and it works. But there's a problem: in the home page of my blog the posts become inacessible ('cause it's through the image that it links to the post page).
    Hope you can fix this for me. Thank you!

    ReplyDelete
    Replies
    1. In that case, you may want to use conditional HTML code to tell the CSS to only go active when it is not in your homepage. Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

      Find for </b:skin> - Paste the following directly below </b:skin> (don't forget to insert one of the CSS that worked for you in the code below. I kept it empty as I didn't know which code worked for you).

      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      <style>
      YOUR_CSS_HERE
      </style>
      </b:if>

      Delete
  45. This is awesome tutorial, I did for my blog here. thanks for you sharing us. Blog Supporter.

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.