Cast for two

Friday, July 27, 2007

How to include a HTML page into blogger posts ? (continued)

In How to include a HTML page into blogger posts ? I explored using the more general object tag to include an external page of HTML into a blogger post. You would for example want to do this when discussing a published Google Document Sheet. When checking the appearence of the post in the RSS reader Google Reader, I noticed that the alternate text showed up:

This brought me to an idea for an improvement. I took a screenshot of the Google Sheet as displayed in my browser and loaded up the picture to the blog post. Next I moved the blurb of code for the picture:

<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}" href="http://4.bp.blogspot.com/_FRy3Wbrk89M/RqmeF_t1E0I/AAAAAAAAAl4/reAz0S9D5f8/s1600-h/Screenshot_5.png">
<img style="display:block; margin:0px auto 10px;
text-align:center;cursor:pointer; cursor:hand;"
src="http://4.bp.blogspot.com/_FRy3Wbrk89M/RqmeF_t1E0I/AAAAAAAAAl4/reAz0S9D5f8/s400/Screenshot_5.png"
border="0" alt=""id="BLOGGER_PHOTO_ID_5091774679559246658" /></a>

into to object tag enclosure:

<object data="URL to HTML page" type="text/html" width="520" height="350">

<a onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}" href="http://4.bp.blogspot.com/_FRy3Wbrk89M/RqmeF_t1E0I/AAAAAAAAAl4/reAz0S9D5f8/s1600-h/Screenshot_5.png">
<img style="display:block; margin:0px auto 10px;
text-align:center;cursor:pointer; cursor:hand;"
src="http://4.bp.blogspot.com/_FRy3Wbrk89M/RqmeF_t1E0I/AAAAAAAAAl4/reAz0S9D5f8/s400/Screenshot_5.png"
border="0" alt=""id="BLOGGER_PHOTO_ID_5091774679559246658" /></a>

</object>

The result is that in Google Reader a picure of the Google sheet shows up:

If you want that the browser is directed to the published HTML page of the Google Sheet when clicking on the picture of the sheet, you can change the URL of the href of the pciture:

<object data="URL to HTML page" type="text/html" width="520" height="350">

<a onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}" href="URL to HTML page">
<img style="display:block; margin:0px auto 10px;
text-align:center;cursor:pointer; cursor:hand;"
src="http://4.bp.blogspot.com/_FRy3Wbrk89M/RqmeF_t1E0I/AAAAAAAAAl4/reAz0S9D5f8/s400/Screenshot_5.png"
border="0" alt=""id="BLOGGER_PHOTO_ID_5091774679559246658" /></a>

</object>


Of cource, you can also copy and past the HTML code directly into the blog post. Then you get this:
URLEst. ValuePage RankWebsite GraderTechnorati AuthorityTechnorati Rank

http://peterdecroubele.be205945237167,118

http://www.koenfillet.be$1910477--

http://www.werner.be94944928226,753

http://koenfillet.blogspot.com/44547756103,461

http://www.braincubes.be/23421241,367,488

http://castfortwo.blogspot.com/823668779,588

http://www.patdonnez.be/log/index.php80313--

http://detender.wordpress.com/5046310638,771

http://joro.wordpress.com/4224122,505,981

http://217.19.231.156/apps/blog_david/40259--

http://mertenswouter.com/blog/11050--

http://stielo.blogspot.com/206213,900,217

http://hetruimesop.blogspot.com/0043-7,931,033

http://jeroenvanaert.blogspot.com/0043-7,931,033

http://myjumps.blogspot.com/0042-7,931,033


which is not that bad. Only something with the first row went wrong.
A bit fiddling with the HTML code allows to obtain this:

URLEst. ValuePage RankWebsite GraderTechnorati AuthorityTechnorati Rank
http://peterdecroubele.be205945237167,118
http://www.koenfillet.be$1910477--
http://www.werner.be94944928226,753
http://koenfillet.blogspot.com/44547756103,461
http://www.braincubes.be/23421241,367,488
http://castfortwo.blogspot.com/823668779,588
http://www.patdonnez.be/log/index.php80313--
http://detender.wordpress.com/5046310638,771
http://joro.wordpress.com/4224122,505,981
http://217.19.231.156/apps/blog_david/40259--
http://mertenswouter.com/blog/11050 - -
http://stielo.blogspot.com/206213,900,217
http://hetruimesop.blogspot.com/0043-7,931,033
http://jeroenvanaert.blogspot.com/0043-7,931,033
http://myjumps.blogspot.com/0042-7,931,033


Every table row contained a bogus
<td class="rAll"> </td>
that I just deleted.

No comments: