One Man's Mission To Publish An Optimized Blog

Dear Readers,

This log is updated as a guide for all those brave enough to attempt a web presence.

Best Practice:

Always backup your template. Design > Edit HTML > Download Full Template (They are so easy to break!)
Most of us are not expert coders, so start with a simple layout that can be customized in stages.

Webpage Load Times:

Tested on wireless broadband connection.

Uncached pages:  10 seconds       Browser: Firefox 10.0
Cached pages: 5 seconds or less   Browser: Firefox 10.0

August, 2011:

Spanning Template adopted. Faster loading time. Neater CSS (Cascading Style Sheets). 

Less lurid colour for framing main picture. CSS hex color code set to #C1CDCD  (azure3).

24 August, 2011:

Use of HTML Tables to organize "Thanks To" icons. (XHTML tags included because that's valid code for blogger).

Right-hand pictures now display on main blog page. Fix: set class='output" (rather than 'active') for each picture in the template code.

Discovered blogspot and piscaweb do not support animated gif images.(Gifs become static after upload).
Possible fix: Photobucket Account (untested).

"$ not defined" error fixed. Used "try-catch block" java code to handle the error.

30 October 2011:

Firefox 6.0 browser reports no (fatal) errors.

Firefox 6.0 Error Console Warnings: 65

Parsing error warning - Vertical-align: baselinebaseline;
Fixed! Correct code vertical-align: baseline;

50 error messages generated by blogger file: 1690079772_widget_css_bundle.css (Not part of my HTML Template).

Warning: Error in parsing value for 'cursor'.  Declaration dropped.
Source File: http://glittering-prose.blogspot.com/
Line: 2

Strange error - cursor value removed from template - firefox still generates error on retest.

9th Jan, 2012

The Cursor Value Mystery (Solved) :

Using W3C CSS Validator, parsing error for cursor traced to backlink-toggle-zippy. This appears to be a "span class" function. It exists once in my template (widgets expanded). The backlink-toggle-zippy function is using deprecated code:

pointer: hand; (Microsoft Internet Explorer only)

correct code is

pointer: cursor;  (Cross-browser compliant)

Since my template appears to be "calling" backlink-toggle-zippy from another source it appears
beyond my control to fix at this stage.

10 Feb, 2012

All "Thanks To" icons minimized to 57px × 19px (Neater presentation, small bandwidth saving)
HTML table code used to deploy "best seller list" : four column table, four headings
Live comments tested (on webpage) - Working OK.

11 Feb, 2012

Minor colour scheme changes, font changes (Purpose: streamline presentation, harmonize page views, easier reading, faster loading).

Minor optimizations: "text-transform" removed from template (less code)
Photos: png files removed - jpeg files appear to load faster (Only tested in Firefox 10.0)

Problems: No success with "custom fonts" "Skolar"
1. Google fonts are not loading on their website
2. To implement "Skolar" appears to require paid subscription
3. Various code errors when custom fonts loaded below </head> in the Spanning Template

Solution:
Arial, Helvetica, sans-serif (font family) adopted for all text - Easy to read, harmonizes presentation, fast-loading.

12 Feb, 2012

Finally had chance to test animated GIFs on blogger pages. The "Photobucket Solution" works. Tested -OK
Test page: Dancing Girl

Code blogger likes for GIFs:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://i1076.photobucket.com/albums/w455/nbwriter/girl.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="http://i1076.photobucket.com/albums/w455/nbwriter/girl.gif" width="129" /></a></div>

Note: Once GIF uploaded to free Photobucket account, select direck link  beneath the image.