Test size of animated gif images

To make bigger by adding the attribute width="350"



To make bigger by adding the attribute width="50"

Test uploading photos direct via Windows Live Writer

Here is a photo
Photo of Anita Sarawak Dinner at Shangrila Hotel uploaded direct from computer


Here is an album uploaded direct from computer

View Full Album

This test post is the precursor of Publish text and picture direct from computer with Windows Live Editor

This is a test edit of this post after it has been published and also to address the concern of a reader that editing will result in a new post. Here goes.

Test download image first uploaded via Blogger

Photo below obtained by first clicking on original displayed (Blogger blog) image to open the enlarged photo, right-click and save, then going to post editor, upload and see - you only get a tiny image. Now let me try some trick. See also method 2 and method 3

Method 2

Method 3

Edit HTML to display photo enlarged

Test inserting photos with Windows Live Writer

Let us see what happens when I try to insert a photo below with Windows Live Writer:

I end up with this code to display the picture with is a QR code for my main blog Blogger Tips and Tricks (if you have an iPhone, iPad or Android phone or mobile device try taking a photo of the above QR code and see if it takes you to my main blog):

<p><a href="$qr delivr dot com[2].png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="qr delivr dot com" border="0" alt="qr delivr dot com" src="$qr delivr dot com_thumb.png" width="234" height="234" /></a></p> Now let's see what happens when I publish this post via Windows Live Writer

Update: Now I am editing this post direct in Blogger post editor. I see the above code for the picture replaced by these codes:

<p><a href="http://lh4.ggpht.com/_1354hN3vRng/TSUL1Sado0I/AAAAAAAAATo/2sW-D6wKZh8/s1600-h/qr%20delivr%20dot%20com%5B2%5D.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="qr delivr dot com" border="0" alt="qr delivr dot com" src="http://lh4.ggpht.com/_1354hN3vRng/TSUL2OBuwgI/AAAAAAAAATs/KWveg39zjns/qr%20delivr%20dot%20com_thumb.png?imgmax=800" width="234" height="234" /></a></p>

Note that the photo is no longer hosted by Blogger, but I can't tell what service is hosting the photo. Perhaps Microsoft?

Now this will be the ideal solution for those bloggers who are reaching their 1Gigabytes limit for uploading photos to Blogger. Upload your pictures through Windows Live Writer instead.

Now regarding the reliability of the webhost for the above photo ggpht.com (we need to know that the photo will be online for a long long time). Unfortunately Whois.net only revealed that the registra is Markmonitor Inc., not the owner of the domain:

Domain Name: GGPHT.COM
Registrar: MARKMONITOR INC.
Whois Server: whois.markmonitor.com
Referral URL: http://www.markmonitor.com
Name Server: NS1.GOOGLE.COM
Name Server: NS2.GOOGLE.COM
Name Server: NS3.GOOGLE.COM
Name Server: NS4.GOOGLE.COM
Status: clientDeleteProhibited
Status: clientTransferProhibited
Status: clientUpdateProhibited
Status: serverDeleteProhibited
Status: serverTransferProhibited
Status: serverUpdateProhibited
Updated Date: 15-dec-2010
Creation Date: 16-jan-2008
Expiration Date: 16-jan-2012

However, what is interesting is, Blogger.com has the same registra markmonitor.com

Domain Name: BLOGGER.COM
Registrar: MARKMONITOR INC.
Whois Server: whois.markmonitor.com
Referral URL: http://www.markmonitor.com
Name Server: NS1.GOOGLE.COM
Name Server: NS2.GOOGLE.COM
Name Server: NS3.GOOGLE.COM
Name Server: NS4.GOOGLE.COM
Status: clientDeleteProhibited
Status: clientTransferProhibited
Status: clientUpdateProhibited
Status: serverDeleteProhibited
Status: serverTransferProhibited
Status: serverUpdateProhibited
Updated Date: 15-sep-2010
Creation Date: 22-jun-1999
Expiration Date: 22-jun-2011

Test making images uploaded via Blogger unclickable

The images below are for verifying that the method to make images uploaded via Blogger not clickable and you may try clicking the displayed images that the top 2 when clicked will lead to an enlarged image while the last 2 are not clickable thus verifying the method described works:

===============================

Test profile photo for post title

Test remove border image old post editor

Testing removing border for a blogger for image uploaded via the old Blogger post editor using instructions from Remove image border for images uploaded via Blogger updated post editor:



HTML to display image above:

Update: As a result of testing, I have found out that the inline CSS style="border:none;" must be placed before src="photo URL" and not after, preferably immediately after img. The HTML code below will result in image with a border. The image from the photo above is not displaying a border because style="border:none;" was moved. For more details, refer to remove border from photos uploaded via Blogger photo upload icon.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPf1NWuRricYl-AtZx13G5DDr6Pk0Yn8c4s7bPdoK-78u5oQu9SBDcPvPfgtPYK1vW3toUh28vfmDrjXFwqv7XVUFf-Wbl87hYl2ihoVN_dcr52ySsgld5iRE2U-EMcP1Kr3gWKQaeI9-P/s1600/_DSC5044.jpg" style="border:none;"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 233px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPf1NWuRricYl-AtZx13G5DDr6Pk0Yn8c4s7bPdoK-78u5oQu9SBDcPvPfgtPYK1vW3toUh28vfmDrjXFwqv7XVUFf-Wbl87hYl2ihoVN_dcr52ySsgld5iRE2U-EMcP1Kr3gWKQaeI9-P/s400/_DSC5044.jpg" alt="" id="BLOGGER_PHOTO_ID_5481529183870059394" style="border:none;" border="0" /></a>

---

HTML to display the photo below is take from How to remove border from images uploaded via the new updated Blogger post editor:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXaOydhZoN32Y3R0hA3c96eGGfR94_vKoalP0LS1rBTq2Y5vOQerKpRnA14AODuwCAPgnnzvbDyM71tTL28n-hUAdYlxItDrPElFbWsGm4YLs0tHBAFrr6pxEJc4opYU7bbR4F3QgU-tg/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXaOydhZoN32Y3R0hA3c96eGGfR94_vKoalP0LS1rBTq2Y5vOQerKpRnA14AODuwCAPgnnzvbDyM71tTL28n-hUAdYlxItDrPElFbWsGm4YLs0tHBAFrr6pxEJc4opYU7bbR4F3QgU-tg/s320/kimchi.jpg" /></a>
</div>

---

The HTML to display the image below is taken from How to remove border of images uploaded via old Blogger post editor (with HTML below the photo:



HTML in the scroll box below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger/1313/787/1600/396073/Sibu%20Island%20-%20Johore%20800x400px.jpg"><img style="border:none;" "display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger/1313/787/400/161663/Sibu%20Island%20-%20Johore%20800x400px.jpg" border="0" alt="Sibu Island, Johore 800x400px" /></a>

Testing images in a table

Testing images in a table <table>:

Test Blogger graphic upload open new window

Testing updated post editor image upload

Note that the above picture has no border which was effected by adding style="border:none;" to the <img> tag as per How to remove border for images uploaded via Blogger post editor

Testing "Copy image location"

Blog*star
Blog*Star

Copy image location
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtpX5o6twXdj-PiE9zylTL4EqPYW8VOiv8YutRczzcm1jDYCH6Py9-XnfLcUaEe0o5ln6NSDzlCVDuF8BmOASh2wpk7G_wTpNtjhQK_DB0mGCn9DY4NQtL3WTuNYbbAMOicDdmnxXJc0/s400/BlogStar.jpg



View image
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtpX5o6twXdj-PiE9zylTL4EqPYW8VOiv8YutRczzcm1jDYCH6Py9-XnfLcUaEe0o5ln6NSDzlCVDuF8BmOASh2wpk7G_wTpNtjhQK_DB0mGCn9DY4NQtL3WTuNYbbAMOicDdmnxXJc0/s400/BlogStar.jpg


(cannot view source)
================
Click on image
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtpX5o6twXdj-PiE9zylTL4EqPYW8VOiv8YutRczzcm1jDYCH6Py9-XnfLcUaEe0o5ln6NSDzlCVDuF8BmOASh2wpk7G_wTpNtjhQK_DB0mGCn9DY4NQtL3WTuNYbbAMOicDdmnxXJc0/s1600-h/BlogStar.jpg



View source
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtpX5o6twXdj-PiE9zylTL4EqPYW8VOiv8YutRczzcm1jDYCH6Py9-XnfLcUaEe0o5ln6NSDzlCVDuF8BmOASh2wpk7G_wTpNtjhQK_DB0mGCn9DY4NQtL3WTuNYbbAMOicDdmnxXJc0/s1600/BlogStar.jpg

Testing Shockwave Flash option for Photobucket

Testing Flash option for free Photobucket image host image hosting. Let us see what we get below:



This is how the above Flash was embedded into this post. First create a free Photobucket image host account, upload and this may be what you see:



Click the option SHARE and you will be presented with a pop-up as follows:



All you need to do is to click the GET LINK CODE tab whereupon you will get 7 options of which the last is FLASH FOR WEBSITES AND BLOGS. Click inside the box for the FLASH option to copy the codes into clipboard, go to Blogger post editor and paste the Flash codes into the post editor window and publish.

Testing uploading animated gif image via Blogger image upload icon

Using <img src="URL of image" />





Related post:
Animated gif images, Blogger and Photoshop