Summary: Upload photo via photo upload icon, publish. Open post. Click on photo, press ctrl+U to display source code, copy photo URL from source code.
Nearly all bloggers would be familiar with uploading photo via Blogger photo upload icon
. However, you can only display the photo in 3 limited sizes - small, medium and large. (Update: this is referring to uploading photo in the old post editor, not the new updated post editor, but what follows still remain true). Clicking on such images generally result in a larger image displayed.You cannot directly use such uploaded images, say, to put in the sidebar, for your Blogger profile photo or to use the image as a link to another webpage or to display images side by side. For such purposes, the photo need to be uploaded to a webhost which allows inline linking or hotlinking (also called leeching, piggy-backing, direct linking, offsite image grabs and bandwidth theft).
One of such webhost is the free Photobucket image host. This post will be about using Blogger itself as a host for the images for inline linking.
I prefer to use Blogger for image hosting as I prefer my blog stuff to be stored all in the same host. If you plan to do the same, may I suggest you create a new blog for this purpose, as I have at My Photo Store and upload your photos for profile photo, backround image, etc., there.
When you upload a photo to Blogger using their photo uploading icon
and you are in the EDIT HTML mode, you will see in place of the photo the following HTML code:<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKweLM1D7N1YjuxYXXga7krYfP-4nAqhUZx0nuVdO7hSWd6xONFKl8jMgop7y_tDHXUn8_p3lq7RSDYT-OOGUTRnUkGKPegoSIItzp3AcmGvhnrvdRl8wfIu59l-g77rT5EDYIthqtU8jm/s1600-h/music+resized.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 296px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKweLM1D7N1YjuxYXXga7krYfP-4nAqhUZx0nuVdO7hSWd6xONFKl8jMgop7y_tDHXUn8_p3lq7RSDYT-OOGUTRnUkGKPegoSIItzp3AcmGvhnrvdRl8wfIu59l-g77rT5EDYIthqtU8jm/s400/music+resized.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5369413094705735826" /></a>
Such uploaded photos can be used for inline linking for profile photo, etc.You will see 2 URLs in the code. You can use the second one for inline linking (in red). However, it is better to do the following:
Publish, click on the photo which will take you to a webpage where only the photo will be displayed. Press ctrl+U to open page source and get your photo URL there. I will upload a photo below and use that as an example. You may click on the photo and verify for yourself what I am going to write:
Click on the above photo, you will be taken to a webpage where only the photo of my grandson is displayed. Press ctrl+U and the source code is revealed
<html>
<head>
<title>lewis+apple+5.JPG (image)</title>
<script type="text/javascript">
<!--
if (top.location != self.location) top.location = self.location;
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipjO04dFMLYzjVMsSbn_HnO6eHWm4HN-oIhxQCvzmY9YrPmtHvLOmXvilXPV-PWFiCrKiHBpV_UwBCdTRuEFpcjYP5e84eNm4Ri14qDul-gZPYaS-V97m3emNeCHp7mFNgU-Wg_SO53F8/s1600/lewis+apple+5.JPG" alt="[lewis+apple+5.JPG]" border=0>
</body>
</html>
and within the code is the photo URL (in red above) which you can use for inline linking.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipjO04dFMLYzjVMsSbn_HnO6eHWm4HN-oIhxQCvzmY9YrPmtHvLOmXvilXPV-PWFiCrKiHBpV_UwBCdTRuEFpcjYP5e84eNm4Ri14qDul-gZPYaS-V97m3emNeCHp7mFNgU-Wg_SO53F8/s1600/lewis+apple+5.JPG
0 comments:
Post a Comment