Stopping pictures on your blog from being "clickable"

/ Wednesday, November 24, 2010 /
This article is about how to stop people who read your blog from clicking on a picture and seeing a full-size copy of it.




Currently, if you put a picture into a blog post using the Picture toolbar item, and someone reading your blog clicks on that picture, then the person sees a full-size copy of the picture.   There is no universal setting that you can apply to stop this happening, or even an easy way to stop it for specific pictures.

But you can stop it for each picture in a post by editing the HTML that is behind the post and removing the href part of the picture statement.   If you're not sure what that means, read on.


Making a picture "unclickable"


1  Put the picture into your post in the usual way.

2  Find some unique text that is immediately before (or after) the picture - you will use this to locate the HTML for the picture among all the other HTML used to make up your post.
Sometimes, I put "XXX" or some other marker text (ie text that isn't used anywhere else in the post) just before it  (and take it out again afterwards too!).

3  Click HTML - it's a tab at the top corner of the Post Editor window.

Find the unique text (use your browser's Find tool, eg Edit > Find in Firefox)  

5  Then find the HTML-code for the picture which will be just before (or after) that.    It looks something like this (some settings may be different in yours):
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwx-fT7r-enYKjZfbh3VIkNZz68UNuuhrptUvVwqGmKnTMKJyYT5icM1toZcPNwvriR2tevRzp7AkZ6ykw9JzUv2JhtGPQoExAeP4iGstDZ4Lxb4EZkTVourYYM1Wa0cUXIwtyXoxQXuRC/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwx-fT7r-enYKjZfbh3VIkNZz68UNuuhrptUvVwqGmKnTMKJyYT5icM1toZcPNwvriR2tevRzp7AkZ6ykw9JzUv2JhtGPQoExAeP4iGstDZ4Lxb4EZkTVourYYM1Wa0cUXIwtyXoxQXuRC/" width="400" /></a></div>
That looks hard to read.   But if you break it down, it becomes something like:
<div class="separator" style="clear: both; text-align: center;">
<a

href="THE URL THAT THE USER IS TAKEN TO IF THEY CLICK ON THE PICTURE"

imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
>
<img
border="0"
src="THE URL WHERE THE SOURCE PICTURE IS READ FROM"
/>

</a>
</div>

NB  provided you've selected "Use <br /> tags" under Edit HTML Line Breaks, then you can add extra new-lines, to make the code easier to read.

6  To make the final picture unable to be clicked, you need to remove the part of the HTML code that says:   
href="THE URL THAT THE USER IS TAKEN TO IF THEY CLICK ON THE PICTURE"

So that the eventual code for the picture looks like:
<a

imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
>
<img
border="0"
src="THE URL WHERE THE SOURCE PICTURE IS READ FROM"
/>

</a>

Job Done!

At this point, you might Publish your post, or you might want to edit it some more - for example by adding alt-text or a title to the pictures, or by showing your pictures in a slideshow.

Either way, I recommend switching back to Compose mode now (using the Compose button at the top right of the editor), so that you don't get confused the next time you edit a post.



Related Articles:




Putting a picture into a blog post

Telling Google and visibly-impaired people about the pictures in your blog

Tools for applying copyright protection to your blog

Hosting pictures outside of Google/Picasa

Creating a button that links to your blog

0 comments:

Post a Comment

Labels

Thank you for visiting my site. I’m the author of home decor help, home garden decor, home design interiors, tina 4 home design, uhozz, visit yogurt lab, sitazine, is beauty tips and sunnijati website. Modestop Topmodest Free Beauty Tips Shitazine Sitahouseblog Izhealthy Shitadesign Sitahouse Topmodest Sitazine Irezine Home- decor-design Shitadesign Shitadesign-dot-com Inhomeland inhouseland ghiuldenika inebautystyle enterarteiuna radiodominiopublico biberealexandru fabiobernadosdi geeklore31 syahadah-alhafeezah peaceloveiman bigwideempty techandchefadventures kaosgunlugu fikirkulubleri duazinciri theinternationalrules morefortngintn monkeymanzach lifeatthegreenys photokid84 chelsea-settles chasingmommyhood sexyhotactresseswallpaper tophotnewstodays avvani urbantrendsussex voychic reisyamode sitazine reportmy homedesignideasx mystylepinterest fashionstyleco popularnewstips isexy-hot-girls sexywomengirl trendymodeku derumahdesign womenhairs hackoblogger gadiswomen homeinteriordesignideas1s homedesignideasa uniquehomedesignsw enterpreneurforbloggers earningblogtipss lilyandgiasmom onfeatureblog aboutadsen onblogsocial tecnologiku onlinekutip akuhub caramakemoney youseoneed blogukus newbieblogit adsenseguideto triond-adsense inseoservice intipseoblog otherseoblog freeseoguid seoblognets tawaguideblog seosecretip buzdesign modewomen gayawoman cantikide tipsehat bebeautyps tipsjilbabcantiks idekontenislami healthfitnessnutritionsz jilbab-tips tips-home-decor caramemakaijilbabv beritaremajaterkinie allisoncrewnews mypinspinterest mypinspinterest gogirlsgallery seyhotgirls topmodest worldotgirls seksigirlsblog yourgirlsnet sexywomensia decorativehousedesigns simplebloggertipsz aboutadsense09s marketingner freeseotipstricksz womensiana chicstylegallery oblogkudewe colhomegallery marketserve onlibusiness artodesign designinguide oninteriorhome interiormu intutorblog blogoffeed newbloggerhint enginseo dibisnistips internetmublog onroomdesign homegardenco
 
Copyright © 2010 New Blogger Tips, All rights reserved
Design by DZignine. Powered by Blogger