14 January 2010

Javascript Again

Posted by Tom on Thursday, January 14, 2010
0 comments
There is a wheriz in here someplace. http://www.google.com/support/forum/p/blogger/label?lid=0271191b4249689a&hl=en

13 January 2010

Sites for Problem Javascript

Posted by Tom on Wednesday, January 13, 2010
0 comments
- Create a Site if necessary. -- Sign-in to your Google account. -- http://sites.google.com/ -- Create site. - Create the javascript file and give it a name (mediaplex-test.js). - Copy the code into the file. Do not include the <script></script> wrapper or the <noscript> code. The file should start with: mpt = new Date(); and end with: + "\" alt=\"Click Here\" border=\"0\"></a>" ); }
Read more »

11 January 2010

Spare-T6-Test: Read More Removed

Posted by Tom on Monday, January 11, 2010
0 comments
This is a link test. Spare-T6-Test: Read More Removed

" &quot;

04 December 2009

Base 64 Test 2

Posted by Tom on Friday, December 04, 2009
0 comments

Inline Base64 Image

This post has an in-line image. The hydrant is not sourced from an external host (<img src="http://SOME_HOST/image.jpg>). It was converted to base64 using Firefox's "Base64 ⇒ Encoder 1.3.2" plug-in and pasted into the post editor.

This is not an ideal situation for a couple of reasons, but can be used in a pinch. Reason #1 is the image is larger in byte-size than the original, and is full sized: that costs bandwidth and causes page-load speed issues. Another is the size slows the editor.

In this demo, I took a 1,400px high image with a file size of 195KB and scaled it to 500px high. That reduced the file size to <30KB.

Using the Firefox add-on, you select the image, the conversion is done, and the base64 file is saved with a .data extension. Opening the file with a plain text editor reveals the start of the content is: data:image/jpeg;base64,

The comma is followed by the encoded image. The base64 code ends at the end of the file.

To make that useable in a post, add a normal <img src> wrapper: <img src=" - the opener. " alt="" /> - closes the tag.

So, the whole thing will look like this: <img src="data:image/jpeg;base64,the_full_image_code_which_will_be_large" alt="" />

Styles, like width:, height:, border, etc., can be added as usual: <img style="width:200px; height:300px; border: 1px solid #ff00ff;" src="data:image/jpeg;base64...

Another use for the in-line image might a favicon if you don't have a host. Create the base64 file the same way, then add the code to a <link> tag in the page's <head> section.

<link href='data:image/x-icon;base64,the_full_image_code' rel='icon' type='image/x-icon' />

If you are using Blogger, the best placement is just before </head>.

10 October 2009

100 Pixel Thumbnails

Posted by Tom on Saturday, October 10, 2009
Labels: / 0 comments

This post support my Blogger Help Forum reply.

#1 - 778px x 583px

#2 - 163px x 200px

#3 - 1,600px x 1,200px

#4 - 200px x 150px

#5 - 310px x 320px

#6 - 500px x 297px

Let's call this Phase 2. Centered vs. top left corner.

This second group, of the same images, are centered. You can see that has a different affect depending on the image used.

20 September 2009

List Expander

Posted by Tom on Sunday, September 20, 2009
0 comments

How I implemented it.

I downloaded the files from css global.

Since I was going for an any-blog installation, I tried to install the javascript and css in my Blogger layout–template. I was unable to get the javascript that controls the list expander to work, either in the <head> or in a Html/Javascript gadget. It worked fine after uploading it to my web site, so, I created a site on Google Sites and uploaded the file there.

The css went into the template without difficulty. It can be used:

  • Added as a linked styleshheet:
    • link href='http://sites.google.com/site/sparerep/files/listexpander.css' media='screen' rel='stylesheet' type='text/css'/>
  • Or, added to the existing stylesheet.
  • Or, wrapped in <style> </style> and added to the <head> section as a separate stylesheet.
  • Or, wrapped in <style> </style> and added to the Html gadget containing the list.

The images for the + and - need to be uploaded. The address needs to be added to the styles everyplace that collapsed.gif or expanded.gif appears. The .gif images can be:

  • Uploaded to a blog post and the image address used without the size folder.
  • Uploaded to the Blog account at http://picasaweb.google.com
    • Sign-in using normal blog account info.
    • Create a new album for the upload.
  • To Photobucket or another host.
  • To the Sites site that holds the javascript file. Make sure the site is public.

The list content as it is in the sidebar, is what was provided with the javascript and css files.

14 September 2009

Fixed Spacing

Posted by Tom on Monday, September 14, 2009
0 comments
L o r e m ipsum dolor sit amet, c o n s ectetuer adipiscing elit. U t a s apien. Aliquam aliquet purus molestie dolor. You can also try a pre wrapper (<pre> </pre>), but Blogger has been removing those tags lately.
Subscribe to: Posts (Atom)