Just Info Linking a picture in your post to a website
Saturday, 19 January 2019
Article,
Blogger,
HTML,
Pictures,
Post Editor,
ZZ - needs 2017 theme review
Edit
This article shows how to change a picture in your blog, so that when it is clicked, it opens another blog post, or even a totally different website.
Peviously I've described how to put a picture into a blog post.
By default, when a picture in your post is clicked, the file that is used to load the picture is opened, in a new window and at its original size. This can encourage readers to steal photos that don't belong to them, so I've also described how to stop pictures in your blog from being "clickable".
But sometimes you may want to set a picture up so that clicking it opens up a different post, or even a whole different website.
Note where in the post your picture is - you may want to put some temporary marker-text just before or after it, so make it easier to find.
Look at the HTML behind your post, by clicking the HTML button in the top-left of the editor window
Find the code for your picture. It will look something like this:
Notice the part in bold, ie the href="CONTENTS"
Replace this with the URL that you would like your readers to go to when they click on the picture. For example, if you want them to be taken to Google to do a search, the code would look like:
By default, clicking the picture will take your visitor to the link you give in the same window. But if you would like it to open in a new window, add target="_blank" to the code too, like this:
Go back to Compose mode (so you don't get confused next time you edit a post)
Remove the marker text, if you used any.
Unless it says "click me", some of them won't - and if they're used to Blogger, they may just expect to see a larger version of your photo. So it might be a good idea to add a caption, or even some instructions in your blog to tell them to click the picture.
Also while you're editing the code, you might also like to add some alt-text to your picture link too, to make your blog more friendly for readers who use screen-reading tools, and for search engines / SEO.
Today, as I'm writing this post, I can only see one row of options in hyperlinked pictures - so I need to edit the HTML again if I want to change or remove the link.
But it's quite possible that this is a mistake and that you can see the two rows of options in the old-interface editor, and that it will be added back to the new one too. Fingers crossed.
When you readers look at a picture that you have linked to somewhere, it will seem just the same as any other picture.
For example, the picture to the right of this paragraph looks just like the one one at the top of the article. But when someone clicks on it ...
Go on, click this one yourself, to see what happens!
(Acknowledgement: public domain image from Wikimedia Commons)
Making your blog friendly for search engines and screen-reader software
Stopping pictures from being able to be clicked
Aligning text and pictures in blog-posts
Integrating Picasa and Blogger Sumber http://blogger-hints-and-tips.blogspot.com
Peviously I've described how to put a picture into a blog post.
By default, when a picture in your post is clicked, the file that is used to load the picture is opened, in a new window and at its original size. This can encourage readers to steal photos that don't belong to them, so I've also described how to stop pictures in your blog from being "clickable".
But sometimes you may want to set a picture up so that clicking it opens up a different post, or even a whole different website.
How to change where a picture is linked to
Add the picture into your post in the usual way.Note where in the post your picture is - you may want to put some temporary marker-text just before or after it, so make it easier to find.
Look at the HTML behind your post, by clicking the HTML button in the top-left of the editor window
Find the code for your picture. It will look something like this:
<a href="http://4.bp.blogspot.com/tkoGx2454hA/s1600-h/Inserting+a+picture.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjCgL1_fzZjbZFDdda7p8vgeJlVWON9Qx2GY4q5-hdsalzahKcDNvhnB3ySA4YsCFgrfjVTo9EI2W18RdcgxV0BQgAJVmesoanes0p_kIb7C0dNCP1JGETl-oeATIwD0eadi6RmlT0gaGL/s400/Your-picture-file-name.gif" /> </a>
Notice the part in bold, ie the href="CONTENTS"
Replace this with the URL that you would like your readers to go to when they click on the picture. For example, if you want them to be taken to Google to do a search, the code would look like:
<a href="www.google.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjCgL1_fzZjbZFDdda7p8vgeJlVWON9Qx2GY4q5-hdsalzahKcDNvhnB3ySA4YsCFgrfjVTo9EI2W18RdcgxV0BQgAJVmesoanes0p_kIb7C0dNCP1JGETl-oeATIwD0eadi6RmlT0gaGL/s400/Your-picture-file-name.gif" /> </a>
By default, clicking the picture will take your visitor to the link you give in the same window. But if you would like it to open in a new window, add target="_blank" to the code too, like this:
<a href="THE URL TO GO TO" target="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjCgL1_fzZjbZFDdda7p8vgeJlVWON9Qx2GY4q5-hdsalzahKcDNvhnB3ySA4YsCFgrfjVTo9EI2W18RdcgxV0BQgAJVmesoanes0p_kIb7C0dNCP1JGETl-oeATIwD0eadi6RmlT0gaGL/s400/Your-picture-file-name.gif" /> </a>
Go back to Compose mode (so you don't get confused next time you edit a post)
Remove the marker text, if you used any.
Some more things to think about
Will your readers realise that they should click the picture?
Unless it says "click me", some of them won't - and if they're used to Blogger, they may just expect to see a larger version of your photo. So it might be a good idea to add a caption, or even some instructions in your blog to tell them to click the picture.
Also while you're editing the code, you might also like to add some alt-text to your picture link too, to make your blog more friendly for readers who use screen-reading tools, and for search engines / SEO.
What you will see
At some times in the past, when you added a link a picture and then hovered over the picture in the post editor, your would see a double-row of in-post editing options:- one row had the usual options for editing pictures (which lets you set the picture size, alignment and caption)
- one row had the usual options for editing links (with options to go-to, change and remove the link.
Today, as I'm writing this post, I can only see one row of options in hyperlinked pictures - so I need to edit the HTML again if I want to change or remove the link.
But it's quite possible that this is a mistake and that you can see the two rows of options in the old-interface editor, and that it will be added back to the new one too. Fingers crossed.
What your readers will see
For example, the picture to the right of this paragraph looks just like the one one at the top of the article. But when someone clicks on it ...
Go on, click this one yourself, to see what happens!
(Acknowledgement: public domain image from Wikimedia Commons)
Related Articles
Adding a picture to your blogMaking your blog friendly for search engines and screen-reader software
Stopping pictures from being able to be clicked
Aligning text and pictures in blog-posts
Integrating Picasa and Blogger Sumber http://blogger-hints-and-tips.blogspot.com
0 Response to "Just Info Linking a picture in your post to a website"
Post a Comment