Greene Teapot

New Color Kindle Fire

2011-09-29T06:57:00.000-04:00

Amazon has just announced a wagon-load of new Kindles, including the Kindle Fire, Full Color 7" Multi-touch Display, Wi-Fi. The Fire has no gray e-ink screen. No keyboard. The photos and specs are impressive! The price is competitive at $199, and shipments are scheduled to start November 15th, in time for Christmas!

I want one! It's a device that will display books and their illustrations to advantage, but it also functions as a convenient color tablet, connecting to the Internet via Amazon's cloud servers.

Click the photo for details and a video tour. The Fire arrives registered to your Amazon account right out of the box, so it's ready to use without the hassle of registering the device.

Yummy!

Paste Amazon code in Blogger

2011-09-27T13:03:00.001-04:00

So, where do you paste that Amazon code you just copied? Many newbie Amazon associates have trouble pasting Amazon product links, banners, and widgets into Blogger or regular web pages. The number one mistake is pasting code directly into the Blogger Compose editor. If you're seeing raw HTML code after attempting to create a link or insert a widget into a post, that's the cause.

Paste code in the HTML editor

When pasting code you copied from Amazon link builders, position the cursor where you want to display the Amazon link or widget. Then switch to the HTML tab and paste! That's almost all there is to it. A few other code pasting glitches are described below.

Get rid of the strange square box in lnks

If a simple text link is throwing off your layout because of a strange-looking square graphic, the 1-pixel tracking image plus your CSS style for in-post images is the usual culprit. If you use padding and a border around post images, it will make the 1-pixel tracking image stand out like a (square?) beacon!

The fastest fix is to delete the 1-pixel image. There are no adverse consequences of doing so. The tracking pixel image is for counting impressions. With Amazon, impressions are not a useful statistic because you don't get paid for them and you probably already have a better way to count visits to your site using Google Analytics or another service. See my older post on creating basic text links for more information about text links.

Alternatively, create a style for images that should not have padding and/or a border and add it at the bottom of your style sheet in the blogger template:
img .nopb {padding: 0; border: 0px none;}
Add the class to any image tag when you want to lose the padding and border:
<img class="nopb" src="myimage.jpg" alt="whatever" />

Make validation errors go away

Another irritating problem is that Amazon link or widget code may cause validation errors. The most common cause of such errors, the unescaped ampersand, is easy to fix!

In links and widgets, change & to & to make the error disappear. For example, in a carousel widget, you might have an iframe something like this:

<iframe src="http://rcm.amazon.com/e/cm?t=yourTag-20&o=1&p=48&l=ur1&category=kindlerotating&f=ifr" width="728" height="90" scrolling="no" border="0" style="border:none;" frameborder="0"></iframe>

To make it validate, change the amperands in the query string (the stuff after the question mark) to &:

<iframe src="http://rcm.amazon.com/e/cm?t=yourTag-20&o=1&p=48&l=ur1&category=kindlerotating&f=ifr" width="728" height="90" scrolling="no" border="0" style="border:none;" frameborder="0"<>/iframe>

By "script block" I mean lines of code between <script> </script> tags, not a script tag that calls an external script using src="/path/to/script". Also, if you do have a JavaScript block, say for an Amazon Widget Source widget, use CDATA tags to indicate that code should not be parsed. For example:

<script> //<!CDATA[[ the widget code would be here //]]> </script>

Close any open tags

HTML5, which Blogger now uses, does not require that you close meta tags, break tags, image, or param tags. That is not the case with XHTML, which requires that all tags be properly closed. If you have a regular website that uses XHTML, make sure that such "void" tags are closed by a forward slash preceding the last right angle bracket.

The Ultimate Solution

Use the HTML editor all the time.

Link to category pages in your Amazon aStore iframe

2011-09-22T15:17:00.001-04:00

To link to a specific aStore category from a separate web page or site, it’s necessary to change the src (source) of the iframe “on-the-fly” by using a script. The target attribute of the iframe cannot be used when the link and the iframe are on different web pages.

This post contains instructions and a script to accomplish deep-linking into an aStore category. It builds on information in the post, Link to product pages in your Amazon aStore iframe on Blogger, and in a similar post for WordPress users.

Here are the steps to enable category links

1. First, please experiment on a draft copy of your aStore page in case something goes wrong! On the draft page, paste your aStore iframe tag. Edit the tag to add id and name attributes, as shown below. Doing this creates a hook that can be referenced in a script. The name attribute is needed by older versions of IE. Do replace yourTag-20 with your own associateID:

2. If you’re not already using jQuery, add a <script> tag that calls the jQuery library in the <head> tag of your blogger or web page template. Add it after your meta tags and stylesheet links, and above any jQuery plugins (without a line break before the closing script tag):

<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script> </head>

3. Copy getURLparam.js from http://www.mathias-bank.de/jQuery/jquery.getUrlParam.js and paste the code into a text editor, such as Notepad. Save it as a backup copy named getUrlParam-original.js

4. Go to http://www.refresh-sf.com/yui/ and paste the same code into the big empty code box. Select File Type JS; check the box for "Minify only, no symbol obfuscation," and check the box for "Redirect output." Click the Compress button. Copy the output and paste it into a text file named getUrlParam.js

5. Upload getUrlParam.js to your server and add a script tag with it as the src below the script tag for the jQuery library. If you put the script in a folder named “scripts,” the tag would be: <script type="text/javascript" src="/scripts/getUrlParam.js"></script>

If that's too much work, paste the output into a <script> tag in the <head> tag below the script that loads the jQuery library.

6. Paste the following script below the other two on your aStore page, still in the <head> tag:

<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ var newSrc = $(document).getUrlParam('azdp'); if (newSrc !== null) { var n = newSrc.length; if (n > 4) { $('#astore').attr('src','http://astore.amazon.com/yourTag-20/detail/'+newSrc);} else { var qs = '\?_encoding=UTF8\&node='+newSrc; $('#astore').attr('src','http://astore.amazon.com/yourTag-20'+qs);} } }) //]]> </script>

7. Test in your browser by creating a link that goes to your aStore test page, using a parameter for a category. Test a product ASIN as well to make sure the script works for both products and categories.

For example: http://www.greeneteapot.com/p/real-tea.html?azdp=24 (a category) or http://www.greeneteapot.com/p/real-tea.html?azdp=B0050QORMQ (a product)

WordPress users can use a PHP script to emit the appropriate iframe tag in a WP Page template. I’ve added that information in response to a comment on another site.

I wouldn’t go hog wild with external links into an aStore, but a few well-chosen links into important store categories will provide an extra level of functionality to your store promotions without creating a pile of html pages.

If all this is too daunting, the simple solution of having separate pages for some of your aStore categories works quite well. Each category has a special link with its unique node number in the query string (the stuff after the question mark). On each page, embed an aStore iframe with the appropriate category node as the aStore src attribute. To get the category node links, mouse over your category navigation widget and copy each URL OR edit your aStore, open each category and copy the Permalink.

Enjoy!

New Dashboard for Blogger

2011-08-11T18:25:00.002-04:00

Blogger in Draft users have a redesigned dashboard. It's attractive and quite nice for composing new posts, but be careful if you habitually use the HTML editor and open an old, handcrafted post in the new interface.

I've been really busy for several months, so I was introduced to the new editor today. Oops! The Blogger in Draft editor made mincemeat of my HTML after I opened an old post for editing. Alas, there is no option that I could find for using the HTML editor exclusively. After selecting the HTML tab, I noticed that paragraph tags had disappeared and my code example formatting had been replaced by entities.

Switching back and forth between the HTML and Compose tabs caused multiple recoding of the entities for angle brackets. That is, I got "&amp;amp<" instead of "<". Luckily, it was a short post and easy to fix. Scary, though.

If you're experimenting with the new interface, I would recommend a three-pronged approach:

Before opening an old post for editing, copy the HTML content from the source code. Not a bad idea to paste it to Notepad or another text editor as an emergency backup.
If things keep getting scrambled, clear the checkbox that selects Blogger in Draft as the default dashboard. The regular editor has its faults, but you may want to use it for editing old posts until you know what to expect with the new interface, or until Google issues an update with the option to use HTML as the default editor.
Use Windows Live Writer instead of the built-in Blogger editor. I like Live Writer quite a lot, but am willing to give new things a try. What I don't want to do is destroy the HTML formatting in older posts whilst trying to update them. That's too much like punishing a good deed.

The new editor is definitely worth a look. The interface is cleanly laid out, with some handy features, such as commonly used options in the right sidebar. Seems like a good direction, especially if Google will restore a few formatting options. The main change I would like to see with auto-formatting is a single break tag for a new line in the editor, and a paragraph tag for two new lines, not two break tags, and not div tags.

Blogger Display Problems in IE9

2011-04-25T04:35:00.013-04:00

Please note that the problem described in this post no longer occurs with IE9. There's a brief flash of black background under the main content, but it doesn't persist, as it did earlier. Thanks, Blogger!

If you are viewing this blog in IE9, the main content area may have a black background. Off the top, it's obvious that two bits of code automatically added to Blogger pages when rendered have something to do with the problem.

Unlike earlier versions of Internet Explorer, IE9 has support for common CSS3 styles and HTML5 elements. It should not be forced to run in IE7 compatibility mode or to process Blogger's ieretrofit.js script.

Unfortunately, you can't change the code, since it's not in the blog templates, but dynamically added by Blogger. The problem lines are:

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

There are a couple of recent messages about this issue on the Blogger support forum, so here's hoping that Blogger's template developers will change the conditional "[if IE]" to "[if lt IE9]".

Some Blogger users have also reported that iframes no longer display correctly in IE9, but I'm not seeing that particular problem here.

Just my opinion, but I think it would have been better if the ieretrofit.js script had been omitted altogether. It created a new set of problems for blogs that use transparency, round corners, and box shadows, and added more overhead to the rewritten pages. IMO, if IE7/IE8 users cared deeply about rounded corners they would have used a different browser.

Sidebar Widget Above Narrow aStore

2011-04-11T14:07:00.008-04:00

It is possible to put an aStore Search-browse widget above a narrow Amazon aStore to solve the problem of limited horizontal space, but it's tricky and may take some trial and error to get the vertical positioning just right. Forcing the default store layout into a linear, rather than floated, display, requires additional user-added CSS, and it won't look great if the Category Navigation widget is very tall or expands to a great height.

The total width of side-by-side widgets above the store should not exceed the width of the main products table. Some widgets are just too tall to work without looking strange. Skip the Related products and Accessories widget, and stick to just the Category Navigation, and maybe the Listmania widget. To "turn off" all widgets but Category Navigation, which includes the search box for stores with at least one canned Amazon category, clear the checkboxes for all sidebar widgets in the aStore editor.

If you end up with a hole in the layout, considers using absolute positioning to put a banner or some other graphic in the blank area. With hand-picked categories, it may be more aesthetically pleasing to create your own menu as a styled unordered list, and position it above the store.

Here's a screenshot of a narrow aStore comprised of an Amazon category, with the Category Navigation widget on top, and all other sidebar widgets unselected:

Basically, we have removed the floats from the divs #mainwrap and #sidebar, and positioned the sidebar above #mainwrap. Padding is added to #mainwrap to accomodate the #sidebar widget's height.

If you want to try this yourself, here is the code, which will work with any color scheme. To try it out, edit your aStore and in Step 2 - Color & Design, click Edit CSS. Then paste the following code in the big empty box on the left side of the screen:

/* NARROW CENTERED STORE - WIDGET ON TOP */
body {
  margin: 0;
  min-width: 564px;
  text-align: center;
}
#wrap {
  width: 564px;
  text-align: left;
  margin: 0 auto;
  position: relative;
}
#main {
  width: 530px;
}
div#header {
  padding: 6px 8px 4px
}
div#mainsubheader {
  padding: 10px 8px;
} 
div#contentsubheader {
  width: 510px;
}
#divsubheaderlinks {
  margin-left: 8px;
}
#mainwrap {
  float: none;
  position: relative;
  padding-top: 240px;
}
#sidebar {
  float: none; 
  position: absolute; top: 0; 
  width: 530px;
}
table.sidebarproducts {
  width: 180px;
}
li.widget {
  margin-right: 10px;
}
select.searchwidget {
  width: 158px;
}
input#searchwidgetkeywords {
  width: 126px;
}
div#footer {
  width: 530px;
  padding-left: 8px;
}
div#leftfoot {
  width: 422px;
}
div#rightfoot {
  width: 80px
}

Note that the width of the store has been changed from 680px, which is a narrow store with a normal sidebar, to 564px. If you change the width of the store to suit your layout, check all store pages for layout issues, and adjust the user-added CSS accordingly. I'll keep the sample store up for a while if you prefer to view source and grab the code that way.

Change colors in Amazon text plus image iframes

2011-03-17T07:51:00.009-04:00

Amazon's text+image links are iframes. They can look very busy and "in your face" on a blog or web page. You can fix this problem quite easily because the text plus image ads have several parameters that control their look.

Here are some typical text+image iframes with the default styling:

The soft green background color is alright, but the black borders are distracting. If you view the HTML code for any default text+image iframe ad, the color parameters that you can change are clearly visible. This is the code for a standard text+image iframe, with the color params shown in red:

<iframe src="http://rcm.amazon.com/e/cm?t=tag-20&o=1&p=8&l=bpl&asins=B0026L7H20&fc1=000000&IS2=1&lt1=_blank &m=amazon&lc1=0000FF&bc1=000000&bg1=F3F6F3&f=ifr" style="align: left; padding-top:5px;width:131px;height:245px;padding-right:10px;"align="left" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>

To change these default colors, edit your post and switch to the HTML tab, then change the HEX color value to whatever you want. The HEX color code has 6 characters that control the hue's amount of red, green, and blue and its darkness or lightness.

To change this:	Edit this:
Black Text	fc1=000000
Blue Links	lc1=0000FF
Black Border	bc1=000000
Background	bg1=F3F6F3

The Dr. Peter Jones Color Calculator is a very handy tool to play with colors and copy their HEX values. Another extremely useful app is the tiny but mighty ColorPix, free from ColorSchemer. ColorPix lets you sample any color on your screen, not just in the current window, and gives you the HEX, RGB, HSB, and CMYK values.

The text+image iframes below have been modified to have a different colors for the border, font, and links. To make the border disappear, make it the same color as your page background:

Alas, there is no option to change the price color, a deep red specified by Amazon's style sheet. You cannot affect the appearance of content in a remotely-served iframe directly by using local styles. If the iframe were on the same server as this blog, it would be allowed. Cross-domain scripting is a security hole and is blocked by the browser and the remote server. To prove that local CSS has no effect, I've included specific styles for span.price in the code at the top of this post. Alternatively, you can create your iframe links on the Amazon associates' site, and select the option to hide prices altogether.

In spite of some limitations, you can make even a page full of iframes look nice! Enjoy!

Free Streaming Videos for Amazon Prime Members

2011-02-22T10:13:00.004-05:00

Amazon has just announced that Prime members now have free unlimited streaming access to about 5,000 free movies and TV shows. The movies include many very popular titles, such as the Stieg Larsson trilogy (The Girl with the Dragon Tattoo, The Girl who Played with Fire, and The Girl who Kicked the Hornet's Nest), Seasons 1-4 of Dr. Who, Red Cliff, Let the Right One In, Torchwood, and many more.

With Amazon Prime, you could be watching the video at left free, right now.

Here is a link to the Instant Videos page. I've already found a couple of series I would like to watch from the beginning.

I've been an Amazon Prime Member for many years, and buy enough stuff to justify the annual $79 fee, which gives me free two-day shipping on almost everything. In the last week, I rented the Stieg Larsson movies and then bought the trilogy on Blu-Ray. Free streaming is an awesome perk from Amazon, and quite unexpected. Actually, I prefer to download rentals and watch them at my leisure over the rental period, using better playback software (Cyberlink's Power DVD). However, watching something free that I might not otherwise purchase is a big incentive to go to Amazon.

Note that if you are an Amazon associate, there has been no commission for Amazon Prime memberships for quite some time. Of course, you could still link to any page, including Amazon Prime informational pages, and perhaps indirectly generate a few sales. Overall, it's hard to say how it may affect associates. More people may opt into Prime and buy more stuff from Amazon, but maybe they will be inclined to go there directly to see what they can view instead of going through associate sites. Unless you are already earning a lot of commissions off of Video On Demand, the new policy may not have much impact on associate earnings. It may cut into sales from sites that review videos, since some people will rent a movie and like it so much that they decide immediately to purchase a high definition copy. Seems like a clever decision by Amazon to give away popular bestsellers instead of titles that people might not care to watch.

Google Web Fonts with Blogger

2010-12-14T13:49:00.004-05:00

Web Fonts are now available for Blogger. Distinctive typography can make your blog look more interesting. If you use Blogger Template Designer, select the Advanced Tab to see a list of 40 new Latin and non-Latin fonts for your Blog Title, Post Title, Page Text, Tabs, and Gadgets.

I still like the legibility of Verdana for small body text, but it’s great to have a choice of fonts for Post Titles. I chose Yanone Kaffeesatz because it looks good and is narrower than the usual headline font. Many of my long post titles will now fit without wrapping to two lines. That’s really nice!

Template Designer Screenshot

There are some pretty body fonts, too, such as Molengo and Cantarell. One of the most popular fonts is Droid Sans. Google has a complete list of Web Fonts and a great previewer where you can see what any text will look like, but you can also get a good idea of how your blog will look with different fonts right in the Template Designer.

Don’t get carried away with Web Fonts, though. Each one adds more overhead to your blog, and could make your blog slower to load. Make sure your choices don’t clash with header art or with each other. Fonts that are a little bit alike can be jarring. One or two font families are enough on a site. A third might be used for special elements. Any more than that, and things get cheesy very fast.

Fonts that are very different can look great together. That is, if you use a serif font for body text, a sans-serif font could look good for headlines. If you use a sans-serif font for the body, a decorative font might contrast nicely for headers.

Windows Live Writer with Blogger

2010-11-04T14:36:00.003-04:00

This is the first time I’ve used Windows Live with Blogger. My usual editing mode is the HTML tab in Blogger, and I’m so used to it, I don’t even notice its quirks anymore. But, I have to say that my first impression of WLW 2011 is “Wow! Sooo easy!”

It was incredibly simple to set up after downloading Windows Live Essentials 2011. I fired up Windows Live Writer for the first time, selected “Other” as my blog type, and entered my Google/Blogger credentials. After a few seconds, I was prompted to import a copy of my Blogger template so that previews would work better. That seemed like a no brainer, so I allowed it. The next screen was a very nice WYSIWYG editor. The rest is history.

I have to say that I have NOT had huge difficulties with either the old or new Blogger editors. They work just fine, but some procedures are unnecessarily time consuming. Image links, in particular, are still amazingly awkward if you’re meticulous about preserving the exact size of an upload or fussy about clarity.

Only one minor downside is immediately apparent, and that’s having images in yet another place. Images on Blogger are either in a folder on one of my websites or in Picasa Web Albums. Using WLW creates one more location to keep up with. Anyhow, I’m going to try it on for size and see if it fits.

How to place an ad banner between Blogger header and content

2010-08-21T10:39:00.007-04:00

This post will show you how to add a wide Amazon banner or other element between your Blogger header and content, as shown in the screenshot below. A leaderboard banner is 728 pixels wide and 90 pixels high. Templates with a narrow content column should be able to accommodate a standard "full-width banner" at 428 by 60 pixels. See IAB Ad Unit Guidelines for a list of standard ad sizes.

You may have used Blogger's Add a Gadget feature in the Design/Page Elements tab to include HTML or JavaScript in your sidebar(s) or footer. However, if you want to add gadgets to other sections of your layout, you must edit your template to show the Add a Gadget option, and, in some cases, increase the "maxgadgets" allowed number.

First, backup your template. Then open the Design tab and click Edit HTML. Find the following line and change ShowAddElement from 'no' to 'yes' and the maxgadgets number from '1' to '3'. The number "3" is arbitrary. It simply needs to be high enough to allow you to add another gadget. To allow an unlimited number of gadgets, delete maxwidgets='1'.

<b:section class='tabs' id='crosscol' showaddelement='yes'>

Save template and return to Design/Page Elements. There should be a new Add a Gadget option in the "crosscol" section between the Header and Main Content. You can follow the same procedure to enable gadgets in the header and main sections of your template:

<b:section class='header' id='header' showaddelement='yes'>


<b:section class='main' id='main' showaddelement='yes'>

The rest is easy! Click Add a Gadget and select an HTML/Javascript gadget from the list of basic Blogger gadgets. Then paste the Amazon widget code in the Blogger gadget. There's no need to add a title to the gadget. A banner would look rather odd with a title, anyway! Click Save to keep the gadget or Cancel if you change your mind.

The gadget will appear as a rectangular box on the Page Elements screen. A gadget without a title will have a generic label that matches its gadget type. In the screenshot above, the new Amazon banner widget is in the HTML/Javascript gadget above Pages. If you need to change the gadget code, click the Edit link in its lower right corner. A screenshot of the gadget editor is shown below. Remember to Save again after editing.

If you need to reposition the gadget, drag it with your mouse to a new spot in the same template section. You can even move it to a different template section, but there must be enough horizontal space available in that section to display the gadget properly. Don't expect the banner or other Amazon widget to automatically resize itself to fit!

Click Preview to see how it looks. If all is well, click Save. Done!

Text+image iframes all in a row

2010-06-16T06:53:00.006-04:00

First, be aware that the text+image iframe links generated by the standard Amazon "Build Links wizard" are a little smaller than those created by the Amazon Blogger tool, which adds padding to the iframe.

Standard text+image iframes

For the Amazon text+image iframes shown below, I used a CSS class, iframe.inrow, to display the iframes "inline". By default, iframes are block elements. Like paragraphs and divs, there is a automatic line-break between them. When displayed inline, they are more like words in a paragraph, and will wrap if there are too many to fit on one line.

To display iframes side-by-side, add this class to your stylesheet:

iframe.inrow {display:inline;}

To add more space between iframes add a right margin to the style:
iframe.inrow (display:inline; margin-right:10px;}

To add space between rows of iframes, add padding:
iframe.inrow (display:inline; margin-right:10px; padding-top:5px;}

To apply the class add it to the <iframe> tag:
<iframe class="inrow" src="... "></iframe>

In the next example row, iframes are floated left. You could add this style to your stylesheet:

iframe.fleft {float:left;}
To add more space between rows of iframes, add padding to the style:
iframe.fleft (float:left; margin-right:10px; padding-top:5px;}

If you prefer, you can simply paste the style into each iframe's existing style attribute:
<iframe ... style="display:inline; margin-right:10px; padding-top:5px; width:120px; height:240px;" ...></iframe>

Blogger Tool generated text+image iframes

The text+image iframes generated by the Blogger tool include a style of padding-right:10px, and an HTML attribute of align="left" so a right margin is not necessary to separate the iframes. They will align in rows by themselves. However, if you want to make the code standards-compliant, you could use the CSS style "display:inline" or "float:left" and delete the bogus CSS "align:left" style and the HTML attribute: align="left". The obsolete iframe attributes marginwidth and marginheight can also be safely removed. When displayed inline, the iframes will wrap, just like words in a paragraph, if there are too many to fit on one line.

The most common problem with iframes created by the Blogger Tool is simply that the white background may not match your background color. To fix that problem, edit each iframe tag in the HTML editor. Find "&bg1=FFFFFF" and change FFFFFF, which is the hex color code for white, to the code for your background color.

The following rows of iframes were added using the Amazon Blogger tool. Notice that their height is 245px with top padding of 5px, instead of the usual 240px.

The first group has a class of inrow2. In the examples below, the iframe width has been changed from 131px to 120px, and padding-right is 10px:
iframe.inrow2 {display:inline;}

To apply the class add it to the <iframe> tag:<iframe class="inrow2" src="... "></iframe>

You could also use the CSS style "float:left" to achieve the same effect. The iframes below are floated left.

iframe.fleft {float:left;}

If the iframes are not enclosed in a block element, such as a paragraph or div, you will need to clear the float at the end of the iframes.

Again, you can add either style directly to the <iframe> tag. The invalid style "align:left;" is ignored, but should be removed if you want your code to validate. The HTML attribute align="left" should also be omitted. The style becomes:

style="display:inline; padding-top:5px; width:120px; height:245px; padding-right:10px;" OR style="float:left; padding-top:5px; width:120px; height:245px; padding-right:10px;"

I hope this explanation clears up some of the confusion surrounding text+image iframes.

Blogger disappearing header redux

2010-06-05T10:20:00.026-04:00

A few days ago, my header image disappeared again in IE8. I found a way to make the image reappear by setting it as a background to the home page anchor (<a> tag) in the header, but it still had square corners. Finally, I discovered the cause of the problem and a better solution.

When the page loads, Blogger runs a script to "retrofit" IE with some CSS3 features, such as rounded corners. The script should work fine, UNLESS your Blogger template specifies rounded corners on nested divs in the header, particularly if more than one background image is involved. Box-shadows applied to an outer div AND a full-sized inner div with a background image may also cause problems. In these situations, you may see a black background where your image should appear, or no image at all, depending on your header code.

Template Edits

Backup your template in case something goes wrong. Then Edit HTML. Find the CSS for your Header section in the template-skin. If you use a gradient in the outer-header, try replacing it with a solid color, no image. If that doesn't work, specify rounded corner styles (that is, border-radius and all its proprietary variations) for .outer-header OR .Header img, .Header #inner-header, but not both.

Rounded corners for .Header img, .Header #header-inner worked for me when #header-inner had a background image, and there were no <img> tags in the header. If you use an image that replaces the title and description, make sure you apply box-shadow to ONLY .Header #header-inner. Test to determine what works with your blog.

On this blog, I applied border radius to a new div inside #header-inner, which gets the background image. I'm doing this to position that div, #gtclickable, over another div that displays the blog title and description when images and/or CSS are turned off. Therefore, I removed border-radius styles for .header-outer and .Header img, leaving them on .Header #header-inner. I also applied border-radius to #gtclickable, so the background image would not "poke out" with square corners. The box-shadow styles are applied ONLY to .Header #header-inner.

There is another, partial solution that will restore the missing banner image, but results in square corners on the inner header. I mention my first band-aid attempt here because a few people may find it useful. The partial fix is to insert an "if IE" conditional comment that contains an internal CSS style sheet. (It's more convenient to use a Google HTML/Javascript gadget in the header for this instead of editing the template.) In the style sheet, add the background image and border-radius to an element ignored by IERetrofit.js. It works with a span tag or the banner anchor (<a>) tag as long as they are displayed as block elements instead of inline. If overflow:hidden is used, the background image disappears again.

Other browsers, such as Firefox, Chrome, Safari, and Opera support border-radius or a proprietary version of it. My template edits did not break the header display in these browsers, and of course, they are unaffected by the IEretrofit.js script.

Blogger post URLs really are permanent

2010-05-31T11:42:00.006-04:00

Blogger does not change the post URL, otherwise known as the permalink or slug if you change the post title after first publishing. With "old Blogger" you could change a post title and the URL would also update. Not so with the "new Blogger"! This behavior can be a giant pain, as I just discovered.

If the post URL is way off-base, it can confuse readers. The only thing you can do is copy its contents to a new post and delete the old one.

If you are very motivated, you could take advantage of this behavior to create user-friendly URLs. Publish the post with a short title that uses your key words. Then change the post title and republish. Notice that the title of this post and its URL are slightly different.

I also use WordPress, which allows you to edit the permalink/slug as needed. This is a great feature, but I don't expect it to be added to Blogger, which likes to keep things simple.

Add a logo to your aStore header

2010-05-31T11:29:00.001-04:00

If you are an Amazon associate with an aStore, adding a logo or other small image to the store header can make it look more polished and memorable. A logo should leave enough room in the header to display the store name without wrapping.

Create the image

Use your existing logo or create an image that's about 75 pixels high and not so wide that it crowds your store title. For my Real Tea store, I assembled an image with a tea cup and flower shapes in Photoshop on top of a background layer matching the color of my aStore header. The image is shown below.

Transfer the image to a server

You cannot upload the image directly into your aStore, so transfer it to your website's image folder, or to an image sharing service such as Photobucket, flickr, Picasa Web Albums, or a similar service. Display the image in your browser and copy the URL or copy the link from your image-sharing service.

Add the image to your aStore

Log in to your Amazon associate's account and click the aStore tab. Click the Edit button for your Store. In Step 2 - Color & Design, paste or type the URL of your image in the text box near the bottom of the screen. For example:

Preview the store to make sure the header text looks good. If necessary, select a different font and font-size using the tools in the edit aStore wizard. If you're happy with the look, click the Continue button to save changes.

The header, as displayed, looks like this:

That's all there is to it! Enjoy your spiffy new store header!

Testing non-JPG image fate in Picasa Web Albums

2010-04-10T17:54:00.019-04:00

Non-JPG file types may be converted to JPG when transferred to Picasa Web Albums. For example, GIFs are uploaded and then someone goes back to Picasa, and all the images are JPGs. PNG files are also common victims. I did not previously have any GIFs or PNGs on Picasa Web Albums, so this post is to report on a mini-test to determine circumstances under which conversion happens, and to try the patience of Picasa house elves who seem to be working overtime behind the scenes to make sure that all images are JPEGs.

I added the GIF at left within Blogger, and it appeared in my Picasa Web album. Then I deleted it from this post and added it again from the new Blogger in Draft image menu, directly from Picasa Web Albums. It's still a GIF. It has not gone to the dark side and become a JPG.

Uploading a PNG file directly from Picasa(Win) from my PC to Picasa Web Albums resulted in a warning that "some files" would be converted to JPG, and the PNG was, indeed, transformed to a JPG. I have Picasa options set to support all listed file types, including PNG, but that has no effect on the upload behavior. Therefore, I would not recommend uploading file types other than JPG from a PC to Picasa Web Albums.

Next, I uploaded the image at right within Blogger to Picasa Web Albums and it remained a PNG. Maybe Blogger is "smart enough" to know that web images are different file types depending on their intended purpose, or, more likely, Picasa Web Albums works as it should when not handcuffed to Picasa(Win).

As a final test, I went directly to Picasa Web Albums and uploaded a single image, and then several GIF and PNG images from my computer to a test album. They were NOT converted to JPG. This is a simple alternative to uploading from Picasa(Win) or Blogger, and one that I would recommend.

Upgrade to Picasa 3.6 if you have not yet done so. It does not solve the file-conversion problem, but has many great features.

Disappearing banner image in IE8

2010-04-09T19:01:00.008-04:00

The top banner has been displaying correctly for weeks. Yesterday, it suddenly disappeared in IE8. Something has changed in IE or in the underlying template code, because the image would appear and then rounded corners would kick in for IE8, something that has never happened in the past. After that happened, the banner background disappeared. There were also some errors with "DNS, JavaScript, and Amazon" in them that went by too fast to read.

I spent many hours trying to fix this, and finally succeeded, but I lost a day I needed to spend on something else.

First, I removed all Amazon and Google scripted widgets. That sped up refreshing the page, but did not help. I tried every trick in the book for giving an element "hasLayout" in IE, with only partial success. I finally resorted to a slightly more complex solution because of the background image bug that arrived with rounded corners in IE8.

I don't have time to share much detail about the fix right now, but will do so in the near future. Those not dealing with rounded corners may not have the same problem if using my instructions for adding the blog title and description along with a header image.

Blogger in Draft recently announced that it has implemented a bug fix for new templates with the IE8 rounded corners and disappearing background problem. Unless you have made extensive customizations to your template, the quickest fix is a fresh download of the newest version. I have added enough stuff to my template to make that inadvisable, but I'm going to check it out.

My pre-bugfix solution was to move the banner image to a new div of the same width and height as the image, but as a background. This div encloses the home page anchor, which becomes an empty link instead of an image link, but remains a centered block element of the same height as the enclosing div. The width of the anchor tag is 40px less than the div because it "pushes out" the rounded corners in some browsers if left at 100%. Finally, IE8 has a tendency to close up empty anchor tags even if they are block elements with a known width and height, so I added a discrete period/dot as the display text to prevent that. Double urgh!

Hide the sidebar in the new Blogger templates

2010-04-03T08:16:00.026-04:00

This blog uses the new "Blogger in Draft" template, Picture Window. I've also played with the Awesome Inc and Watermark templates. Unlike Minima, and other older templates, the new templates use positioning to create a two-column or three-column layout. Conditionally hiding the sidebar on a Blogger Page requires a different approach.

If it worked, the simplest method would be to conditionally modify <b:variable> declarations at the beginning of the <b:template-skin> section. I tried several variations of doing this, without much success. However, it is possible to hide the sidebar on a specific Page by using a Blogger conditional that overrides existing CSS for column widths.

The overriding CSS can be placed after the closing </b:template-skin> tag and above the closing </head> tag. Alternatively, add it as an internal style sheet in a particular Blogger Page, before other content. I have tested both methods in the Picture Window and Awesome Inc templates.

If your template is slightly different, or uses a different number of columns, you'll need to adjust the CSS posted below to work with your layout. The concept remains the same: Hide one or more sidebars and make the content column wider, so that it fills the freed space.

Two-column Awesome Inc or Watermark template

Just after the closing </b:template-skin> tag, add the following CSS, which will override existing styles and suppress the right sidebar when the URL matches the Blogger conditional. To make it easier, copy and paste the styles to be changed from the existing CSS code in <b:template-skin>. Replace the url in the sample code with the url of your own page:

<b:if cond='data:blog.url == "http://blog.blogspot.com/p/page.html"'>
<style type='text/css'>
      .main-inner .columns {
        padding-right: 0;
      }
      .main-inner .fauxcolumn-center-outer {
        right: 0;
        _width: expression(this.parentNode.offsetWidth -
            parseInt("$(main.column.left.width)") + 'px');
      }
      .main-inner .fauxcolumn-right-outer {
        width: 0px;
      }
      .main-inner .column-right-outer {
        width: 0px;
        margin-right: 0;
        display: none;
      }
</style>
</b:if>

In the style for _width, above, I omitted:
- ParseInt("$(main.column.right.width"))
because we are making the right sidebar 0px wide, and there's no need to subtract 0 from the width of the main column. If you don't have a left column, left.width is also 0px wide, and you can leave out the "_width" expression (an IE6 hack) altogether, or shorten it to:
_width: expression(this.parentNode.offsetWidth + 'px');

This code is in use on my sandbox test blog, with the Watermark template. I also used it there with Awesome Inc. I think it would also work with the other templates, using a simple two-column layout.

If you don't want to mess with the template, add the following internal style sheet to the Blogger Page in which the sidebar should not display. I recommend removing line breaks in the style sheet so that it's all on one line, particularly if your settings allow Blogger to add break tags in the post editor:

<style type="text/css"> 
 .main-inner .columns {padding-right: 0;}
 .main-inner .fauxcolumn-center-outer {right: 0; 
 _width: expression(this.parentNode.offsetWidth - 
 parseInt("$(main.column.left.width)") + 'px');}
 .main-inner .fauxcolumn-right-outer {width: 0px;} 
 .main-inner .column-right-outer {width: 0px; margin-right: 0;
 display: none;}
</style>

Picture Window template

I am using the following overriding CSS on this blog, which combines sidebars on the right. The "double" sidebar uses 390px of layout width. By hiding the outermost sidebar, #sidebar-right-2-2, it requires only 220px on my Real Tea page. To make modification easier, copy and paste the styles to be changed from the existing CSS code in <b:template-skin> to the new <style> tag. Remember to change the url to match your blog and special page:

<b:if cond='data:blog.url == "http://blog.blogspot.com/p/page.html"'>
<style type='text/css'> 
.main-inner .columns {padding-right: 220px;}
.main-inner .fauxcolumn-center-outer {right: 220px;}
.main-inner .fauxcolumn-right-outer {width: 220px;}
.main-inner .column-right-outer {margin-right: -220px; width: 220px;}
.main-inner .column-right-inner table.section-columns td 
  {display: none;}
.main-inner .column-right-inner table.section-columns td.first 
  {display: inline; width: 100%;}
#sidebar-right-2-2 {display: none;}
</style>
</b:if>

Again, if you don't want to edit the template, add an internal style sheet to the Page in which the sidebar should not display. I recommend removing line breaks in the style sheet so that it's all on one line:

<style type="text/css">
.main-inner .columns {padding-right: 220px;}
.main-inner .fauxcolumn-center-outer {right: 220px;}
.main-inner .fauxcolumn-right-outer {width: 220px;}
.main-inner .column-right-outer {margin-right: -220px; width: 220px;}
.main-inner .column-right-inner table.section-columns td 
  {display: none;}
.main-inner .column-right-inner table.section-columns td.first 
  {display: inline; width: 100%;}
#sidebar-right-2-2 {display: none;}
</style>

Test, test, test

Backup your template before making changes to it. Here, we are simply adding a short code block to the template. To "roll back" delete the added code. It's easiest to test an internal style sheet in the Page you need to change first. If all is well, then you can move the CSS to the template itself. To avoid errors, paste the styles to be modified in your new style sheet, and then adjust the relevant pixel values.

Caution: Adding an internal style sheet to a post may not be such a great idea because it really doesn't belong in your RSS or Atom feed.

I hope this gives you some ideas on how to hide a sidebar in your beautiful new Blogger template for a special page or two!

Blogger title and description with header image

2010-03-20T11:44:00.015-04:00

I prefer to set my Blogger header image to "Replace title and description" rather than as a background because it's clickable. However, when images are turned off, the visitor sees only the blog title as the header image's "alt text" and no description. When CSS and images are both off, screenreader users hear no emphasized h1 header, and the missing description provides no additional information.

Wouldn't it be more accessible if the h1 and description were visible when images and/or CSS are turned off?

My first approach to preserving the h1 header and description was to use the "off-left" technique. "Off-left" uses CSS to push a header or other element off the screen with a negative margin. For example:

h1{position: absolute; margin-left: -9999px;}

Off-left works great when CSS is off, but with images off and CSS on, the visitor sees NOTHING. Not good!

After some experimenting, I found a solution that worked with my old Minima blogger template and with my new "Blogger in Draft" template. The result looks like this:

The basic steps are to give the header-inner "position", style the title and description, and then position the text behind the header image:

Make sure the header-inner div is relatively positioned because we are going to position a new "titlewrapper" div inside of it. The positioning of header-inner creates a reference point for the titlewrapper's absolute position:

<div id='header-inner' style='position: relative;'>
Style the title and description inside the header-inner div, so that it looks good when images are off. The styles below are fine for my page, but style the header to suit yourself. My styles are appended just above the end of the blogger skin (]]></b:skin>) for easier maintenance:

.Header h1 { margin: 0; padding: 0 0 .3em; letter-spacing: .2em; } .Header .description { margin: 0; padding: 0; max-width: 700px; letter-spacing: .2em; }
Add code to the template to include both title and description when a header image is used. I simply copied the titlewrapper div from the 'Show image as background to text' section and pasted it into the 'Show just the image, no text section', and then hid it UNDER the image using absolute positioning. Make sure the header image has a higher z-index than the titlewrapper:

<b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "REPLACE"'>  <div id='header-inner' style='position: relative;'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block; position: relative; z-index: 2;'/> </a> <div class='titlewrapper' style='background: transparent; position: absolute; top: 70px; left: 230px; z-index: 1;'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> <b:include name='description'/> </div> </div> <b:else/>  <div expr:style='...' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> </b:if>

Gotchas

This method works perfectly as long as the image is opaque, since the h1 and description are still there, but hidden underneath it. I didn't use PNG-24 for transparent corners because the filesize is too big. Perfectly-blended Photoshop corners also look fine, except in IE, which does not honor border-radius, so everything else has square corners and the banner looks wrong.

Another problem is that Firefox 3.6 rounded the image's container, but not the image, so everything but the banner was rounded. I solved this problem by using the image as a background for the home page anchor <a> tag, which is a block element the size of the header. Background images do not display alt text, but the entire banner area is a clickable link, so I don't see that as a problem. I left in the header widget, but commented it out for the time being.

The new Blogger templates are a lot more complex than the old ones, and if you add any code it doesn't like, it will be deleted. So, be patient when editing and remember where you can safely edit the code and where you cannot.

Enjoy the new accessibility!

New template!

2010-03-19T09:11:00.001-04:00

I just switched from a 3-column Minima template to "Picture Window", one of the spiffy new templates available from Blogger in Draft. I'm still tweaking it, and working on integrating my banner, so if something looks weird for a while, I'm just trying this and that.

If you want to play with the new templates yourself, you can do so with live, non-destructive, previews. For information on the templates and how to use them go to Blogger in Draft. Then go to http://draft.blogger.com/ and log in as usual. The Template Designer will show up in your Layout tab.

Thanks to the Google Blogger Team for making these new templates available!

Amazon carousel in a blogger post

2010-03-09T07:28:00.004-05:00

To add a carousel widget to a blogger post, make sure your content column is wide enough for the carousel, and paste the code in the Edit HTML tab. My Post Options are set to: Use "<br /> tags" and "Show HTML literally". Note that you cannot change the white background to another color. However, you can choose to hide the widget's black border and enclose it in a div with a border matching your layout, as shown below:

Amazon.com Widgets

Link to product pages in your Amazon aStore iframe

2010-03-02T21:14:00.013-05:00

Quite a few Amazon associates have "aStores" on Blogger. Recently, there have been several questions on the Associates Discussion Board about creating product links in posts that go to product detail pages in the aStore instead of (the same pages on) amazon.com. You can't use the target attribute in these links to load detail pages in the iframe because they are not on the same page as the aStore. The src attribute of the iframe has to be changed, and the only way to do that is with a script. Depending on your site's requirements, the script can be written using jQuery, traditional JavaScript, PHP, or ASP.Net.

Earlier today, I posted an article on my Greene Tea blog about how to accomplish product deep links in a WordPress blog with PHP, and on a non-blog website with jQuery. The jQuery solution also works with Blogger, so I'm posting abbreviated instructions here.

Get jQuery and the getUrlParam jQuery plugin

The jQuery library greatly simplifies using JavaScript with web pages. Google hosts the jQuery library and allows developers to link to it. It's easier to link to the jQuery library instead of hosting it on your own website because It's likely to be in your visitor's browser cache and maintenance is almost non-existent. On this blog I've included the jQuery library by adding a script tag for the Google-hosted file in the template's <head> tag:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

I also added a script tag for the getUrlParam.js jQuery plugin file on my web server. The plugin script is short, and could simply be placed on the aStore page, since that is where it will be used. The important thing is that the plugin loads after the jQuery library.

Add a script that modifies the aStore iframe

A short jQuery script on the web page containing the aStore iframe checks each HTTP request for a URL parameter in the query string appended to the basic link. The script runs immediately after the page loads.

In a URL with a query string (always written as one word in code), a question mark designates the end of the link's destination and the beginning of one or more parameters (pieces of information) passed to a script. If there are several parameters, an ampersand (&) is placed between each one as a separator. A query string is often used in searches to facilitate bookmarking, but should never be used to pass sensitive information because it is visible in the link.

What we want the script to do is change the source of the iframe from the aStore's default home page to the detail page for a product that you previously added to the store. The source link follows this simple pattern:

http://astore.amazon.com/yourAffiliateID-20/detail/ASIN

You would replace "yourAffiliateID-20" with your own Amazon affiliate ID or a different tracking ID for the store, and ASIN with the 10-digit product number (usually the ISBN-10 for books).

The script will change the src of the iframe (which must have an id) ONLY IF a query string with a parameter named "azdp" exists in the URL. The parameter name can be anything you want, as long as it is unique, to prevent conflict with any other Blogger parameters. The value of the "azdp" param is Amazon’s product ID number, or ASIN.

<script type="text/javascript"> $(document).ready(function(){ var newSrc = $(document).getUrlParam("azdp") if (newSrc !== null) { $('#astore').attr('src','http://astore.amazon.com/affiliateID-20/detail/'+newSrc); } }) </script>

Create links that work with the script

Links that go to your web page with the aStore follow this pattern:

<a href='http://yourblog.blogspot.com/p/amazon-store-page.html?azdp=ASIN>Good Book</a>

Replace "affiliateID-20" with your own affiliateID and ASIN with the 10-digit product ID. Here's an example link that goes to the Real Tea aStore on this blog:
<a href="http://www.greeneteapot.com/p/real-tea.html?azdp=B0032A8P2K">Japanese Izu Matcha<\a> Japanese IzuMatcha

I hope this information is helpful to some of you!

Conditionally Hide Blogger Sidebar(s)

2010-02-21T15:33:00.015-05:00

I was just trying out the new Blogger Pages feature and one of the first things I wanted to do was hide one or both sidebars. In my previous post, I showed how to use conditional code blocks in the template to add unique meta tags to Blogger Pages, which lack labels and categories.

It occurred to me that a simple conditional code block could hide one or both sidebars for a particular Blogger Page, too. It works! I did have to adjust my template to make the center column liquid instead of a fixed width. Doing so allows content to flow outward into space previously occupied by the sidebar. Otherwise, the page would have a blank sidebar with an unchanged center column. I've described changes I made to my Minima template below, in case you want to try it on your blog.

Take a moment to back up your template before making changes to it!
Remember that the changes I describe apply to a 2-column or 3-column Minima template. If you are using a different template, this method may not work without adjustments, or at all. The new "Blogger in Draft" templates use positioning instead of floats for the layout. If you are using a "Blogger in Draft" template, please see these instructions.

Hide the sidebar

Enclose the #sidebar-wrapper div in a blogger conditional tag and make the condition NOT equal to the Page URL. We don't want to hide the sidebar on any page except our "special" one. The pattern is:

<b:if cond='data:blog.url != "http://blogname.blogspot.com/p/page-title.html"'> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/> [...other sidebar widgets...] </b:section> </div> </b:if>

Remember to replace "page-title.html" in the code with your Page's actual title. Note that blogger changes double quotation marks around the page URL to the entity " when you save the template. The code still works, so don't worry about it.

When you test the new blogger conditional with your Page, the sidebar should be missing. The main column's content will not flow into the empty space until we make a few simple changes to the template layout.

Edit the Minima template

I moved the #main-wrapper div below both of my sidebars, which float left and right:

<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'> [sidebar content] </b:section> </div> <b:if cond='data:blog.url != "http://blogname.blogspot.com/p/page-title.html"'> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> [sidebar content] </b:section> </div></b:if> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div>

Next I removed the float and width from the #main-wrapper div, so that it would flow between them, and changed margins to padding, which works better with floats.

That is, I replaced this:

#main-wrapper { width: 505px; margin-left: 30px; margin-right: 30px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

With this [I actually commented out the original lines, but for clarity, they are omitted here]:

#main-wrapper { padding-left: 30px; padding-right: 30px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Since first publishing this post, I changed my template from Minima to Picture Window, a much more complex template that uses positioning instead of floats for the layout. The simple CSS used to modify the Minima template does not work with Picture Window. In this template, I was able to hide the sidebar by conditionally appending CSS styles that modify the template section widths and hide the right outer sidebar. View the result on the Real Tea page, where I added an Amazon aStore, because making one fit in Blogger is a question that is raised daily. This aStore fits with only one sidebar hidden because I used (one of my own) narrower aStore "shared templates".

I highly recommend editing the aStore <iframe> tag to modify width="100%" to the actual width of the aStore + 17px (for the vertical scrollbar). My aStore <iframe> has a specified width of 697px (680px + 17px). Doing this prevents the aStore from sliding under the sidebar.

If you want to use a narrower template in order to preserve one of your sidebars on the aStore page, here's how. First, edit your aStore on Amazon and in Step 2 - Color & Design, jot down your color theme name and/or your custom colors or Print Screen and view in Paint. Then click Shared Templates and select one of the templates with "Narrow" or "Skinny" in the title. Some time ago, I added three templates to the Shared Template list: Narrow Red Centered, Narrow Earth, and Narrow Blue Centered, which are all 680px wide, not including a 17px vertical scrollbar that will appear on long pages. After you apply a shared template, change the colors back to your original color theme. Doing so will not affect CSS styles in the shared template that make it narrower.

Meta tags for Blogger pages

2010-02-21T09:37:00.014-05:00

Someone just asked this question on a discussion board that I visit often, and it inspired me to give it a go. The procedure is the same as the one commonly used for adding custom meta tags to important posts, except that the URL is for your static Blogger Page instead of a post. You will need to edit your template to insert a Blogger conditional code block that detects the URL of the page currently displayed, and inserts the meta tags if there's a match. Details are shown below.

As always, backup your template before making changes to it. The easiest way to do this is to go to your Blogger Layout tab, select Edit HTML, then Select all template content (CTRL-A), copy it (CTRL-C), and paste it (CTRL-V) into your favorite text editor until you know everything is still working.

Then, insert a blogger conditional code block in the template's <head> tag, right after your blog title, as shown below (in red):

<b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:if cond='data:blog.url == "http://yourblog.blogspot.com/p/pagename.html"'> <meta content='Your description of static blogger page' name='description'/> <meta content='word1, word2' name='keywords'/> </b:if> <b:skin><![CDATA[/*

Of course, you need to replace the page URL, description content and keyword content with our own. Insert one of these conditional blocks for each of your Blogger Pages. Yes, it's a bit of a pain, but at least you won't have as many pages as posts. Blogger will change the double quotes around your URL to the entity " but that's alright. I tried it with my new "About" page, and it works fine. Blogger users have waited a long time for a static page feature, and I'm very happy they implemented it. So much nicer to have this option without hacking posts to make them seem like static pages!

Get a handle on Blogger images

2010-01-10T15:28:00.019-05:00

The new Blogger post editor lets you select an image size, or drag its corner or side handles to the exact size you want. You're not limited to the predetermined sizes, which are Small, Medium, Large, and XLarge. When you resize an uploaded image, Blogger resamples it for better clarity, too. Not bad at all!

As always, if you want precise control over certain images, it is better to edit them before uploading and use the original size. Alternatively, you could store some of your special images on another website that you own or an image storage service, such as flickr or Photobucket, and simply link to them. There are many ways to achieve the same thing.

Upload an image to Blogger

Click the image icon and select an image file from your computer or enter the URL of your image on the web (uh, don't hotlink to someone else's image — that's stealing bandwidth, and don't use a copyrighted image).

A thumbnail of your image will appear in the Add an image dialog box. You can upload several images before closing the Add an image box. The thumbnails will remain available as you write your article.

After you click OK, the new Blogger editor places your image at the insertion point, not at the top of your post. To move it, left-click and drag it to a new position.

Blogger's new editor has a compact "bubble" menu for selecting the size and position of uploaded images, as shown above, where I'm selecting a Medium-sized image. The original image is quite large, so Blogger will scale it down and save a resampled copy of the image.

The same bubble menu includes positioning options for Left, Center, or Right. I selected Left to make the image float to the left and wrap text around the right side.

This image of the first page of the Beowulf manuscript is available from Wikipedia and About.com. A slightly larger image, from which these two were derived is on Kip Wheeler's website. Professor Wheeler notes: "The original image of the Beowulf manuscript comes from the anonymous Anglo-Saxon scribe who wrote the "Nowell Codex," Cotton Vitellius A.x.v. 129 r. It appears here as reproduced in Julius Zupitza's Beowulf: Autotypes of the Unique Cotton MS Vitellius A.xv. in the British Museum with a Transliteration and Notes. E.E.T.S. O.S. 77. London: Trubner & Co., 1882. This image is public domain."

The medium-sized image is shown floated left of this text. It looks pretty good, about the same as if you had down-scaled it in a standalone image editor.

A resampled image always looks better than one that has been resized using CSS or width and height attributes of the <img> tag. An image that is merely styled to be a certain size is still downloaded at full size. That is, if your original image is 500x500 pixels, and you display it as 100x100 pixels, web visitors must download the 500px image. If you use a lot of images, page load times on your site can slow dramatically.

Note that browser-resizing does not resample the image or make a new file. It simply smushes it to the specified dimensions. You can spot these images easily because they're blurry, pixelated, and sometimes distorted. Stretched text and faces look very disturbing!

Upload and resize an image using its handles

Double-click or right-click an uploaded image to display handles. Unfortunately, handles do not appear in Chrome or Safari (WebKit browers) by double-clicking, right-clicking, or pleading on your knees.

If you right-click, you may need to then left-click to remove the browser's own right-click menu. Best to double-click.

To scale the image and preserve its aspect ratio, drag a corner handle. To resize the image without keeping it's relative proportions, drag a side handle. Resist the urge to distort text or images of people. Premium fonts are painstakingly drawn to look just right. When distorted, they look terrible 99.9% of the time. It's a risky business to show photos of friends with wide faces or blimpy bodies

Here is our nicely scaled book cover image. I chose this one because I have read several other works by Dan Cederholm and he is both a CSS expert and fine writer. Handcrafted CSS is a new title. I recently bought a copy and have been encouraged to try some new things. I would recommend it to web designers and developers who have some practical experience with X(HTML) and CSS, and who want to move forward with CSS3 in practical ways. The code is available for download, and there's a DVD edition in which the author talks about his philosophy and trends in web design.

About those duplicate blogger profile photos

2010-01-05T21:35:00.014-05:00

Blogger stores four copies of your blogger profile photo. I know that now, after deleting the "extra" ones. They are all the same size when clicked, and they look the same...but they aren't.

I try to be neat and tidy with my websites and clean up duplicate files. I suspected that the files were used at different sizes within Blogger, but it was hard to tell for sure, so I deleted the "dups" with a view towards seeing what broke. It would be simple to upload another pic to fix any problems with missing copies of the photo, right? It almost worked.

Unintended consequences

After uploading a replacement image, I checked my Picasa page, where the photos are stored. Four new copies of the image had been created. The problem is that avatar image links, attached to previous posts, did not automatically update. They were all broken, pointing to the old image link, with no way to fix them. New posts displayed the current blogger profile photo.

The response to my question on the blogger support forum confirmed that nothing could be done. The links would always sit there stupidly displaying a broken image icon. I had to remove the links or cringe every time I looked at them. I deleted them, replacing a few with new comments.

Avoid unintended consequences

Don't delete your old profile photos. It seems logical that if you figured out which of the old profile photos is used as an avatar with old comments and kept it, in Picasa Web Albums, all would be well. Nevertheless, I don't want to test that shaky assumption after what happened.

For some insight, I copied the Blogger avatar image link and compared it with the image links in Picasa Web Albums. There is a partial match, not an exact one, with the matching photo in Picasa. The (more or less) matching links (with added line breaks) are shown below. Note that the size of the blogger image is 45px, and the Picasa image, 128px.

Blogger:
3.bp.blogspot.com/_N5Sn0iBWDNU/SztSqfFEItI/AAAAAAAAAJ8/
WickItEcQwQ/S45/file.jpg

Picasa:
lh5.ggpht.com/_N5Sn0iBWDNU/SztSqfFEItI/AAAAAAAAAJ8/
fN6s2QzrtXA/s128/file.jpg

The missing piece of information is knowing exactly how blogger manages profile images in conjunction with its Picasa service. The avatar link goes to blogspot.com, but copies are stored on Picasa. If you delete the images in Picasa web albums, the Blogger images seem to disappear. There's some fogginess about whether Blogger actually keeps replaced profile images on its servers, even if copies of the old ones are available at Picasa. Without making a sandbox blog and spending time testing results, I can't say it's one way or the other. So far, I haven't been able to find anything written up that would clarify the process.

Blogger support for Gravatar would also prevent the problem of broken avatar links. Given the popularity of Gravatar, and suggestions for including it in a future Blogger upgrade, the problem may be self-limiting for Gravatar users. That would be a good thing.

Amazon tool for adding links to Blogger

2009-12-17T07:08:00.057-05:00

Amazon has just announced a new tool for Amazon Associates that helps you add product links to Blogger. There is a special page at Amazon with more information and a wizard that walks you through the steps of adding it to your blog. I recommend logging in to Blogger (in another browser tab) before you click the Get Started link.

If you don't have an Associate's account, you can add one within blogger from the same Amazon information page. Before you leap on that, do stop and consider how adding Amazon ads will complement or undermine your blog's purpose. Posts about your special areas of expertise, hobbies, or intellectual adventures may be enhanced by reviews of books you have read or products that you can honestly recommend. Blogs that do nothing but repackage Amazon categories or include little but ads from many sources don't have a high success rate. At best, they're thin gruel. Meh!

In less than a minute, your Amazon associate settings and helpful links will be added to your Dashboard's Monetize tab. You can even integrate an Amazon Product Finder search box into the Blogger post editor, like the one above.

To use the product search, highlight a word or phrase in your blog post, or type your search in the box and click "Go". Then select one of the standard link types: LINK (text), IMAGE (product image only), or LINK+IMAGE (an iframe). For this example, I've selected LINK+IMAGE and tweaked the colors in the HTML tab for border(bc1), links(lc1), and background(bg1) to match this page a little better.

Some of the most frequently asked questions on the Associates Discussion Board are about adding links to Blogger, so this is very, very cool!

Other Amazon gadgets

The new Amazon Blogger tool makes simple links to individual products that you might review or recommend. However, I discovered that there are several other Amazon widgets available through Blogger's Add a Gadget, Get More Gadgets option, as shown in the screenshot at left: Amazon Deals, Amazon MP3Clips, Amazon Contextual Product Ads, and Amazon Searchbox.

Interestingly, if you go to the Amazon's Associate Central site and select "Contextual" from available widget types, there are two choices, neither of which is called "Contextual Widget". The listed widgets are "Recommended Products" and "Omakase". The Recommended Products widget seems to be the equivalent of the Contextual widget in blogger. If you add that one to a site, Amazon will scan your pages to determine which products to list. Omakase is more geared towards the visitor's shopping history at Amazon.com than the context of your site. Omakase is unpredictable and a little creepy because of the way it works.

To explore all the easy ways to build links, widgets, and "aStores", go directly to the widget page at Amazon Associates Central. There are "wizards" to generate code you can copy and paste, along with instructions for everything.

Google Dynamic Feed Control

2009-10-23T14:50:00.035-04:00

This post is a test of the Google AJAX Feed API It's pretty much the sample code for a vertical stacked RSS feed display with two Amazon feeds. The only change I made to the style sheet was to assign background colors to elements where the blog's green canvas showed though. It could be made narrower to fit in a sidebar. See how to make your own slick feed control below this example:

Instructions and code

To use the API, you must have a Google account and get your own API key, which is tied to your account and to your web site. Information, instructions and examples are available at Google AJAX API - Google Code. I chose a Vertical Stacked feed control with direct feed URLs, clicked Code Playground to get the foundation code, and edited it to include two Amazon RSS feeds.

The feed control includes three script tags. In the code shown below, I used a placeholder for my API key and Amazon affiliateID, and an underscore for a continuation symbol where there SHOULD NOT BE line breaks:

<script _
src="http://www.google.com/jsapi/?key=[yourAPIKey]" _
type="text/javascript"></script>
<script _
src="http://www.google.com/uds/solutions/ _
dynamicfeed/gfdynamicfeedcontrol.js" _
type="text/javascript"></script>
<script type="text/javascript">
google.load('feeds', '1');function OnLoad() _
{var feeds = [{title: 'Bestsellers - Books',url: _
'http://www.amazon.com/rss/bestsellers/books? _ 
tag=yourTagID'},{title: _
'Bestsellers - Movies and TV',url: _
'http://www.amazon.com/rss/bestsellers/dvd? _ 
tag=yourTagID'}];var options = {stacked : true, horizontal : _ 
false,numResults : 10,title : "Amazon Popular Sci-fi _
Fantasy, Bestsellers"};new GFdynamicFeedControl(feeds, _ 
'GFeedDiv', options);}google.setOnLoadCallback(OnLoad);
</script>

To add the code to a blogger template, go to Layout, Page Elements, click Add a Gadget in the header and select HTML/JavaScript from the list of options. (If you have not enabled gadgets in your header, search for "blogger header add gadget" to find instructions.) You can leave the gadget at the top of the header, just below the navbar. You will add a div elsewhere in your template to display the feed control.

Add a link to Google's provided style sheet in the blog template. I put it in the <head> tag, below the <title>. Here is the code, with my overriding CSS:

<style type='text/css'>@import url("http://www.google.com/ _
uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
.gfg-root {width: 98%;}
.gfg-root,.gfg-entry,.gfg-list, _
.gfg-horizontal-root .gfg-title {background: #FFFFFF;}
.gfg-title,.gfg-subtitle,.gfg-subtitle a:link, _
.gfg-subtitle a:visited {background:#7C9F2B; color:#FFFFFF;}
</style>

The feed control displays where you place a div with the id "GFeedDiv". The div is empty except for a span containing the text "Loading..."

<div id="GFeedDiv"> <span style="color:#676767;font-size:11px; margin:10px; padding:4px;">Loading...</span></div>

To add the code to a post, you can simply paste it in HTML view. To add it to your template, go into Layout, Page Elements, and click Add a Gadget in the section where it should appear.

Simple Amazon RSS feed links

2009-10-14T07:50:00.019-04:00

Amazon associates have easy, but limited, options for adding RSS feeds to their web sites:

Several Amazon categories
Feed URLs from customer tags newly assigned to product ASINs

Those who use the Product Advertising API have more ways to access data and create custom RSS feeds. There are tons of websites that offer Amazon feed generators based on the API, but I suspect that they add their own AssociateID to the feed URLs or get some revenue from acting as the aggregator. Caution is advised.

Note that the popular Gold Box feed of Daily Deals no longer works with an appended Associate ID. Consider using the Daily Deals widget, which provides the same functionality. If you must have the Gold Box feed, it works with the API or a Yahoo Pipe.

Adding feed links to your site is no different than adding other links. You could add a feed URL to your web page as a text link and as an image link, using the standard RSS feed icon or search Google to find alternative icons. Both types of links may be used together, as here:

Amazon Bestsellers

To add RSS feed LINKS to your blogger template, open the Layout tab and select Page Elements. Click "Add a gadget" in your sidebar and select HTML/Javascript from the list of gadget options. Paste the link, and change any ampersands (&) to & and save it. You will need to drag the gadget where you want it to appear in the sidebar, preview, and save the layout change.

Adding RSS feed CONTENT to your blogger template is the same as adding links except that you should choose RSS from the gadget options.

RSS (or Atom) feeds usually consist of news items or other frequently updated information written as XML text files in a standard format. These days, most people would say that "RSS" stands for "Really Simple Syndication", referring to its purpose of syndicating or sharing news.

The XML files are often generated from database queries and reside on the server that offers the RSS feeds. An individual can also type a simple XML feed file in notepad and store it on a web server.

The RSS XML files use standard markup that can be formatted for readability by programs called "feed readers." A raw XML feed is just code and not very pleasant to read. It would be like trying to read a web page by viewing the source.

RSS feeds are proactive, in that a person chooses to subscribe to feeds of interest, and must have a way to read current news feeds using a feed reader. Before browsers had built-in feed readers, or Google Reader existed, a subscriber had to have a desktop feed reader program, access to a web-based service, such as Newsgator or Bloglines, or a hybrid, like Pluck.

These services (or even desktop programs) are called aggregators because they gather RSS news items from servers by visiting feed URLs to check for new items, usually at regular intervals throughout the day. Individuals can check for feed updates in their feedreader programs or by opening the web address of the feed in their browser.

Feeds can also be received as e-mail messages using a service like Feedburner.

Disclosure Policy

2009-10-11T07:09:00.008-04:00

Greene Teapot maintains an affiliate relationship with Amazon and displays contextual links by Google Adsense. I select Amazon links, but Google ads are determined solely by Google.

If a web visitor purchases an item from Amazon after going to the Amazon web site via an affiliate link on this site, I would receive a small commission. Some items, such as Godiva chocolates, are excluded from Amazon's affiliate program, and purchase does not result in payment.

Google pays a small amount for total page impressions and click-throughs.

No marketing e-mail is ever sent to visitors of this website.

No free review copies of books, media, or products are received through these relationships. Text or image links to selected books or other products available at Amazon may appear in some blog posts and may be featured in the blog sidebars. I base my selections on one of more of the following criteria:

I purchased the book for my personal library.
I am familiar with the author or publisher and trust the quality of their titles from personal experience.
I have searched for items on Amazon and have selected items that other customers review favorably.

This notice is posted in compliance with Federal Trade Commission Final Guidelines on Endorsements and Testimonials, October 5, 2009, which states:

"The notice incorporates several changes to the FTC’s Guides Concerning the Use of Endorsements and Testimonials in Advertising, which address endorsements by consumers, experts, organizations, and celebrities, as well as the disclosure of important connections between advertisers and endorsers. The Guides were last updated in 1980." (Italics added)

Affiliate links are swept into the definition of "endorsements" by this ruling, according to FTC Targets Affiliate Programs at All Things Digital. There is more information in Understanding the New FTC Guidelines at Blogging Basics 101.

A very narrow Amazon Store

2009-09-20T07:50:00.042-04:00

The aStore below has one category and no sidebar widgets. With these limitations, it can fit in this post. (See a related post on making a full aStore narrower.) For this store, the height of the iframe is set to 1000px, with scrolling="auto" to accommodate long product detail pages or product reviews. The width of the iframe equals the width of the aStore body and div#wrap, both 490px wide, plus 17px for the vertical scrollbar. So, the math is 490px + 17px = 507px.

The basic template is one of my narrow shared templates for the aStore wizard ("narrow earth"). This template sets the body margin to 0 and defines overriding CSS for a store 680px wide, including a sidebar. I changed the colors after applying the narrow template. You may need to experiment with the widths and padding in your aStore to fit your blog's center column.

It's important to understand, before you add an aStore to your blog or website, that simply having an aStore is no guarantee of any income from it. Books that promise riches with little effort are not being truthful. Meaningful content, such as reviews or articles that grow out of expertise and real interest, with links to relevant products tend to be more successful than rubber-stamp aStores, which are generally ignored by search engines. Web visitors need a compelling reason to buy from your aStore, if they can find it, instead of shopping directly on Amazon.com.

Amazon product previews in the blogger template

2009-09-01T13:53:00.047-04:00

Notice: Amazon Product Previews stopped working on this blog around June 4, 2010, due to a jQuery version conflict. Since that time Amazon has revised the Previews script. I restored it briefly on April 11, 2011, but removed it again because it plays havoc with the layout when image links are floated. Works okay with text links, but if you use it with image links, test thoroughly in several browsers. I love the previews, but have finally given up on them because of the layout problems they cause on my sites.

Product previews work with Internet Explorer and Firefox. In Chrome and Safari(win), both WebKit browsers, the preview box might not display or appear as an empty box (confusing!). In Opera, the preview does not display at all. Product previews with image links work in Firefox, but in Internet Explorer 7 and 8, they may display and then disappear, unless instantly grabbed with the mouse. [Note: Previews now display when pages are viewed in the Chrome browser. - April 2011]

To fix the "disappearing preview problem" in Internet Explorer, enclose the img tag in a block element such as <p></p> and/or make the image style "display: block". Doing this makes the preview window open directly over the image (where the user's mouse is located), and it stays open. If the preview opens off to the side, not touching the image, the user cannot "grab" it fast enough to keep it open. Other browsers seem to allow more "blur" time to get the mouse over the popup.

Screenshot of preview with image link in Firefox 3.5:

Screenshot of preview with text link in Firefox 3.5:

See a related post with more information about using the product previews script in a single blog post.

To add the previews script to your blogger template, open the Layout tab and select Page Elements. Then click Add a Gadget in the footer area. Select HTML/Javascript and paste the previews code. Important: Change the ampersand (&) in the script tag to & for compatibility with blogger's strict XHTML doctype.

The script should look like this, with the <script> tag all on one line and no spaces or line breaks within the <noscript> src attribute. (Replace "yourTagID" with your own Amazon associate ID):

<script src="http://www.assoc-amazon.com/s/link-enhancer?tag=yourTagID&o=1" type="text/javascript"></script> <noscript><div><img alt="" src="http://www.assoc-amazon.com/s/noscript?tag=yourTagID"/></div></noscript>

Save changes and try it out!

Centering an Amazon aStore

2009-08-29T10:56:00.004-04:00

To center the aStore, log in to your Amazon affiliate account and click the aStore tab on your home page. Click the Edit button to open the aStore builder wizard. In Step 2, Color & Design, click Edit CSS.

In the big empty box on the left of the screen type the following CSS:

body {text-align: center;}
#wrap {text-align: left; margin: 0 auto;}

The #wrap div encloses the entire aStore and its width is declared in the aStore's Global style sheet, so there is no need to repeat it.

Note that using text-align to center block elements is obsolete, and NOT recommended when a web page has a valid doctype. However, the aStore lacks a doctype, causing browsers to relay on quirks (ancient browser) mode to render the web page. To center the #wrap div in this situation, the old text-align hack is necessary in some browsers.

When a valid doctype is present, all that is needed to center a block element of known width is "margin: 0 auto;". Learn more about doctypes at:

Making an aStore narrower

2009-08-28T11:07:00.019-04:00

"Help! My aStore is cut off on the right! How do I make it narrower?" This question is very common on the Amazon affiliates discussion board. The answer is to take advantage of Amazon's option for adding your own "overriding CSS" to the aStore style sheet.

To do this, edit your aStore. In step 2, Color & Design, click Edit CSS. Then enter your own CSS in the big empty box on the left side of the screen. A quick and painless way to remove 48px from the width of the aStore is to enter the following CSS in the Global style sheet:

body {margin: 0;}

This style removes the default 24px margin from the aStore <body> tag, moving the content flush top and left in the <iframe> container.

To make a narrow aStore, some CSS styles have to be changed or added in each tab of the CSS sheet editor. You can do it yourself by starting with the Global tab and working your way through the tabs for Category, Detail Page, Listmania, Reviews, and Shopping Cart, or you can take the easy way out and start with a Shared Theme.

On the Color & Design page, click Shared Themes. Unfortunately, there is no way to search the themes, but you can browse through them, and preview any that have the word narrow or skinny in their titles. As a learning exercise, I posted three shared themes, Narrow Earth, Narrow Blue Centered, and Narrow Red Centered. These themes are each 680px wide, so they will fit in the center column of many web pages.

Remember to jot down your color preferences (or take a screenshot) before you apply a shared theme so that you reselect them afterwards. You can also reselect a previous color scheme from the dropdown list without affecting CSS in the shared theme. The same thing is true for font styling (found in some themes) that is unrelated to adjustments for element widths, padding, and margins.

If you later decide to go back to a standard theme, you can. Just remember to select "Edit CSS" again and manually delete all user-added styles in the CSS tabs.

As noted in one of the comments, if you use a sidebar search widget with Amazon categories, it needs to be about 10px narrower to avoid cutting off the arrow next to the dropdown category selection box. I have updated my Narrow themes to add the CSS for that. I overlooked the search widget because I use hand-picked products instead of Amazon categories.

There are alternatives to the aStore if space is tight. The "My Favorites" widget can be made narrow enough to fit in a sidebar and is automatically paged. Likewise, the "Recommended Products" widget can be vertically oriented. The aStore widget can be made long and narrow or wide and narrow. It displays items from the aStore's first category, so control over the contents is indirect.

I hope this tip saves you some time getting your aStore integrated into your web site. In turn, if you make a great theme, you might want to allow it to be shared, too.

Line breaks in blogger

2009-08-14T20:11:00.013-04:00

Since this post, Blogger has introduced changes to its "new editor" that affect the way line breaks and other HTML are handled. Under Post Options, there are new choices for HTML and Compose. For more information, read the overview of the new post editor to avoid confusion! The HTML option to "Ignore newlines" works fine. Nevertheless, I've found that switching to Compose from HTML and back DESTROYS paragraph tags no matter which "Compose" option is selected. That is, "Interpret typed HTML" removes all <p> tags and replaces breaks with <br />. Selecting "Show HTML literally" changes tags to viewable text. If you have to switch, copy the post to the clipboard first so that you can restore the mangled HTML! Previewing from the HTML tab seems to work alright, though.

I didn't see this coming, but blogger's handling of line breaks is the one thing I would like to change most in an otherwise very nice program. The conversion of each line break to a <br /> tag works relentlessly and saves time when typing a series of simple paragraphs. But the convenience has a dark side.

The lack of real <p> tags is semantically incorrect and hard to overlook. Even so, it seems like a a reasonable sacrifice for ease of use. Until, one day, unnecessary <br /> tags inevitably appear in the middle of scripts, before <pre> tags, between list items in unordered and ordered lists, and in great goopy multiples in pasted content. There's no fix except to edit the HTML and remove every last line break that adds unwanted space.

After laboriously editing several long posts that looked silly and disconnected all spread out, I pulled the plug on "Convert line breaks" and updated all my posts. If you turn off auto line breaks and fail to update your old posts, it's not a pretty sight, at least with the old editor. Once you've made your choice, it's a commitment to use the HTML editor going forward, except for very rare occasions.

What happens if you fall of the wagon and use Compose?

I haven't tested the new blogger editor extensively, but its behavior is not as "hands-off" as the old editor, which left existing paragraph tags alone. In fact, it carried on with new <p> tags in a test draft post that I started in HTML view and continued in Compose mode, as though it wanted to please. However, if you start out in Compose mode, it adds divs where there are line breaks. Whenever I edit a complicated post, I always paste it into Ultra Edit for safekeeping and tidying up.

After I switched to the new editor, I noticed that it does nuke <p> tags if you switch from the HTML editor to Compose. If I need to switch, I copy and paste code to Ultra Edit (although any text editor is fine), use Compose to add an image or whatever, switch back to HTML mode and paste my "good" code over everything but the new addition. This is faster than replacing non-semantic divs with paragraph tags. I really do use the HTML editor almost 100% of the time!

My wish is for an editor in which Enter inserts a paragraph tag and Shift-Enter, a line break. Maybe that's too much ask. Couldn't bloggers who never type anything but plain text into their posts keep the current option? Can we have our cake and eat it too? I'm hoping.

Product preview in a blog post

2009-08-10T13:48:00.036-04:00

Notice: Amazon Product Previews stopped working on this blog around June 4, 2010, due to a jQuery version conflict. Since that time Amazon has revised the Previews script. I restored it briefly on April 11, 2011, but removed it again because it plays havoc with the layout when image links are floated. Works okay with text links, but if you use it with image links, test thoroughly in several browsers. I love the previews, but have finally given up on them because of the layout problems they cause on my sites.

When you use Amazon's Link Builder to create a text or basic image link, instructions for adding the product previews script to a standard web page are displayed at the bottom of the "Get Link" step. You can also add the same script to the blogger template or to a single post.

Here is an example of an Amazon text-only link with product preview:
Beowulf and the Beowulf Manuscript (rev sub edition 1997). Mouseover the link to see a box with the book cover image, customer rating, and price. The preview should look like the screenshot below.

Screenshot of preview with text link in Firefox 3.5:

Be aware that product previews work with Internet Explorer and Firefox. In Chrome and Safari(win), both WebKit browsers, the preview box might not display or appear as an empty box. In Opera, the preview does not display at all. [Note: Previews now display when pages are viewed in the Chrome browser. - April 2011]

Product previews with image links, such as the example at left, work in Firefox and Internet Explorer. I have had a recurring problem with IE, in that the product preview displays and then disappears unless instantly grabbed with the mouse. The product preview should look like the screenshot below.

Screenshot of preview with image link in Firefox 3.5:

To include the product preview script in a post, click the "Edit Html" tab in the blogger editor and paste the script at the end of your post. Important: Remove any line breaks in the pasted script because they magically become <br /> tags that will cause errors. Then change the ampersand (&) in the script's "src" attribute to &.

The script should look like this, with the script tag all on one line:

The code has been added to this post, so it can be seen with "View Source". However, since I have also added the same script to the blogger template, product previews will display in any post that has Amazon text links in both Internet Explorer and Firefox, or in Firefox with image links. Please see this related post for more information about adding the product previews script to the blogger template.

Add an Amazon image link in a post

2009-08-02T11:42:00.044-04:00

I like book cover images because they provide clues about genre, tone, or publisher that help me decide if I want to click for more detailed information. Used sparingly, cover images stand out as spots of color in a sea of text. I use a method of creating image links that is easy for me. You may find a method that works better for you.

Here's an example of an image link:
The novel American Gods by Neil Gaiman, is a SciFi/Fantasy tale about how Old Norse gods migrated to the new world, exist among us disguised as humans, and battle the new gods of World, Money, Internet, etc. The invisible life of an ordinary human named Shadow becomes both tragic and heroic after he signs on as Odin's aide, sees more than he should, and asks life's big questions.

Task Summary

Log in to Amazon so that your affiliate ID will be embedded into links you make with the Site Stripe widget or affiliate bookmarklet.
Find the product page for your link destination
Copy the product image to your computer
Upload the image to a free image storage site (such as PhotoBucket) or to your web hosting server
Add an img tag to your blog post, and set its src attribute to the location of the image file
Create and copy the product link, then wrap the image in the <a> [anchor] tag

Procedural Details

1. After you find the product page for your link, copy the product or book cover image to your computer. There are two methods for getting the image.

Method 1 - Use Amazon Site Stripe
If you use Site Stripe, click, "Link to this page." When the link builder wizard opens, right-click the image and save it to your computer, anywhere that's easy to remember. It's okay to change the image filename to something memorable. Images may not be altered except to resize.

Method 2 - Add the product ASIN to the following link pattern:

Size (approx)	Link
Small 50x75	images.amazon.com/images/P/ASIN.01.THUMBZZZ.jpg
Medium 107x160	images.amazon.com/images/P/ASIN.01.MZZZZZZZ.jpg
Large 317x475	images.amazon.com/images/P/ASIN.01.LZZZZZZZ.jpg

2. Get the product link using Site Stripe or the Affiliate Bookmarklet. The shortest link follows this pattern:

http://www.amazon.com/dp/ASIN/?tag=YOURTAGID

Plug in the ASIN and your affiliate tag:

http://www.amazon.com/dp/0060558121/?tag=myTag-20

If you use Site Stripe, click "Link to this page" at the far left of the toolbar. The link wizard makes a link that you can copy and paste. To make the link shorter, change gp/product to dp, and delete everything after the ? except your tag.

The Completed Link

The finished image link will look something like the one for American Gods, shown above. I've added an inline style to the img tag to float it left and wrap text around the right side:

<a href="http://www.amazon.com/dp/0060558121/?tag=myTag-20">
<img style="display:block; float:left; margin:0 15px 15px 0; 
height:160px; width:107px;" 
src="http://greenetea.com/images/amergods.jpg" 
alt="book cover image" /></a>

In practice, it's better to add a style for .floatleft to your style sheet that you can reuse whenever you need to float an image left. A .floatright style would be the same except for the horizontal margins. The right margin would be 0, and the left one, 15px. The shorthand CSS for margins is clockwise: top right bottom left.

Blogger's upload image feature

Another way to add an image link to a post is to click the picture icon in blogger's post editor. Follow the prompts to upload your image to Picasa, where you have 1GB of storage. Then, in blogger, edit the image link's href attribute to point to the Amazon page instead of Picasa. Here's the result:

As you can see, using blogger with Picasa works fine with the medium-sized Amazon product image. I don't use this method because I have a website where I can corral and control images. If I were creating a shared photo album, Picasa would be a fitting choice for that purpose

I hope these instructions make sense of a task that should be simple.

Add an Amazon My Favorites widget to blogger

2009-07-08T09:43:00.008-04:00

An easy way to add a short list of recommended books (or other Amazon products) to your blogger site is to create a My Favorites widget. Book cover images are served by Amazon, so there's little work involved beyond choosing the best and most fitting titles for your audience.

To make the widget, log in to your Amazon Associates account, select the Widgets tab, and click My Favorites. Add the products you want to feature to the widget, with short optional comments. On the next screen, edit the title of the widget, select details to show for each product, and choose a wide or narrow size depending on where the widget will be placed. To get a better feel for the way the widget will look on your site as you experiment with settings, select one of the preset themes under Color and Design. Preview the widget.

If need be, adjust widget size by clicking Customize size. Specify a custom width, number of columns, and number of rows. If the number of products in the widget exceeds the number of rows, paging is automatically added. That is, if you make a 1-column, 4-row widget with 8 products for your blog's sidebar, there will be 2 pages in the widget.

If the selected preset theme does not match the ambiance of your blog, click the "Customize it" option, which lets you tweak the colors. When you're happy with the results, click "Save".

Make sure you are signed in to blogger (in another tab or browser window) before you continue. Then complete the process back on the Amazon widget-builder page by clicking "Add to my web page". It's not a bad idea to copy and paste the code into notepad or your favorite text editor in case you need it later.

Now, here's the step that will make your life easier: Click the Add to blogger link.

The next screen you see is a form in your blogger account to help you add the Amazon code as a Blogger gadget. Nice!

Choose the blog in which the widget is to appear.
Click "Edit content" and change all the ampersands (&) in it to &. It's important to do this because blogger uses XHTML Strict in the theme doctype. If you leave unescaped ampersands in a link, your page will not validate and the widget may not display properly.
Click the "Add widget" button. The Amazon code is automagically added to a blogger HTML/Javascript gadget.

Almost finished! On the blogger Layout screen, drag the HTML/Javascript into your chosen location, such as the sidebar or footer. Then, preview your blog. To make changes to the gadget in the blogger Layout screen, click Edit in the lower right corner of the gadget placeholder. You may want to remove the title since the Amazon widget already has an embedded title.

Done!

Alternatively, you can sign-in to blogger and go to your Layout tab. Click Add a Gadget in the sidebar or other element, and select HTML/Javascript. Paste the gadget code, change all instances of & to & and save it.

An example of an Amazon My Favorites gadget is was in this blog's sidebar. Enjoy! [Note: I eventually removed the widget from this blog because I like bigger product images. It does work, and it's a flexible, customizable choice for a variety of blogs, but the thumbnails are teeny.]

Open a link in a new window, Part 2

2009-07-06T16:14:00.012-04:00

Part 1 ended with this long example of the DOM window.open() method, containing all the specifications for the location, window_name, size, position, and browser chrome in the link itself. Note that the parameters (stuff inside the parentheses) should be on one line; they're wrapped here to fit the space:

<a href="http://destination.html"
 onclick="var newWin = window.open(this.href,
'mywin','right=0,top='40',height='500',
menubar='yes',scrollbars='auto',
resizable='yes'); newWin.focus(); 
return false;">Destination Title</a>

For more info on all the available parameters, see the w3chools.com article on HTML open()

The example code above is awfully long. What if you have a list or database of 500 product items that the user might randomly select for display in this handy single window? It would be better to store all the window.open() parameters in a separate script than to type them in each link. Less maintenance, smaller file size!

Use Javascript to open a new, reusable window

There is some additional code in the script below that makes it more robust. I can't take credit for it and I can't identify my original source because the same code is found in many scripts and tutorials on the web. I'm still grateful for it, though in a diffuse gauzy way.

In Javascript, everything following // is a comment. You can remove all the comments if you use the script, but I recommend keeping the commented opening and closing CDATA lines if you want your XHTML document to validate.

<script type="text/javascript">
//<![CDATA[
var newwindow = '';
function openwin(url) {
  // Check to see if newwindow is already open.
  // If so, display the url in it.
  if (!newwindow.closed && newwindow.location) {
      newwindow.location.href = url;
     } else {
  // If it is not open, open it.
  // The next 3 lines of code contain the window
  // parameters and are wrapped to fit this post.
  // Glue them together.
    newwindow=window.open(url,'newWin','right=0,top=40,
    height=500,width=500,menubar=yes,toolbar=yes,
    scrollbars=auto,resizable=yes');
  // If there is no parent window, use blunt force
  if (!newwindow.opener) newwindow.opener = self;
     }
  // If focus method is allowed, let newwindow grab it
  // and magically appear on top, even from the Taskbar
     if (window.focus) {newwindow.focus()}
  return false;
}
//]]>
</script>

Phew!

This is what the window variables and specs mean:

The url is a variable. When clicked, each link specifies it's own url (this.href) as the value.
window name is 'newWin', but it could be anything, even 'name'
Open the new window 0px from the right and 40px from the top
Make the window 500px high and 500px wide
Display the browser's menubar,toolbar,scrollbars when needed, and note that you can use 1 instead of yes, and 0 instead of no
Allow user to resize the window

Now, once the script is in the <head> of your document, you must add some code to each link that calls it:

<a href='http://destination.html'
 onclick='return openwin(this.href)'>

That's it! The code block inside (not including) the <script> tags can be moved to an external file with a .js extension. Keeping scripts separate from HTML code means that you can use the same script with many HTML files. Remove the CDATA lines if you do this and call the script like this, in the <head> of your document:

<script type="text/javascript" src="yourFilename.js"></script>

For more help, just Google javascript window.open. Enjoy!

Open a link in a new window, Part 1

2009-07-06T05:28:00.011-04:00

Generally, it's best to let users decide if they want to open a link in a new browser window or tab. For some tasks, such as viewing selected items in a library's new books list or a product catalog, it's more convenient for the user to open a single reusable window than to go back and forth repeatedly. There are two basic methods for opening a new window, depending on the doctype of your web page:

Add the target="_blank" attribute to a link
Access the DOM window object with window.open()

Target Practice

The target attribute may still be used with HTML documents that do not specify a doctype, HTML doctypes, and XHTML Transitional, but is not allowed in XHTML strict. Even with XHTML Transitional, it would be better to let target fade into the West. Usage is simple (line wrapped to fit):

<a href="http://destination.html/" target="_blank">
Link title</a>

Let DOM open the window

Using the DOM lets you control the behavior of the link with optional parameters. To simply open a new window (IE) or tab (Firefox), attach the open() method to the link's onclick event (keep open() parameters on one line, wrapped here to fit):

<a href="http://destination.html"
 onclick="window.open(this.href); return false;">
Link Title</a>

To open a new window that grabs focus (is always on top) and can be reused (because it has a name - 'mywin') to prevent a pile of open windows:

<a href="http://destination.html"
 onclick="var newWin = window.open(this.href,
 'mywin'); newWin.focus();
 return false;">Destination Title</a>

To open a new reusable window and specify its size, position, and amount of browser chrome, add optional parameters (keep parameters on one line, wrapped here to fit space):

<a href="http://destination.html"
 onclick="var newWin = window.open(this.href,
'mywin','right=0,top='40',height='500',
menubar='yes',scrollbars='auto',
resizable='yes'); newWin.focus(); 
return false;">Destination Title</a>

For more info on all the available parameters, see the w3chools.com article on HTML open() The last example is getting long and complex, so if you have a list of links that should remain visible while the user selects and views item information, it would be preferable to move the repetitive window.open() specifications to a separate javascript in the <head> of the document or to an external script file. I'll post an example in Part 2 of this topic.

Making basic Amazon associate text links

2009-07-05T18:29:00.011-04:00

Amazon provides extensive support for adding product links to associates' web pages, including: the Site Stripe toolbar for signed-in users, product images, and link wizards with copy and paste instructions. To someone who is familiar with the basics of HTML and the anatomy of a link, the instructions are understandable and easy to implement.

Nevertheless, there is a steady stream of questions from newbies about this most basic task on the Associates Discussion Boards. It's really not difficult unless the vocabulary of web building is unfamiliar to you. If that's the case, Amazon's instructions will have some mysterious holes that need filling. I hope this post provides some informational spackle for those holes.

First, turn on Site Stripe
To do this, sign-in to your Amazon associates account and click Links & Banners. Click the Site Stripe image, check all the options, then click "Turn On Site Stripe." You are the only one who sees this toolbar, and only if you are logged in to Amazon.com. The toolbar buttons you will use the most are "Link to this page" and "Discussion Boards."

Now, when you find a product page on Amazon that you want to link to, click the Link to this page button. It will automatically open the Customize and Get Link form on the Associates web site. Select Text Only (basic display) to make a text link. Click the Highlight HTML button, copy the code (CTRL-C) and paste it into notepad (CTRL-V) to keep it handy, or you can paste it directly into your web page's HTML or code view (not the WYSIWYG design view).

Important: Make sure you paste the code where you want your link to appear, within the opening and closing <body></body> tags. If you make a mistake, delete the new code, return to your HTML editor's design view, and click on the spot where you want the link. Return to code view and paste again.

The link will work, but it's very long, and in addition to the link, contains a hidden image for tracking purposes. Here's an example (all one line, but wrapped to fit this post):

<a href="http://www.amazon.com/gp/product/0596802447?
ie=UTF8&tag=greehaml-20&linkCode=as2&camp=1789&
creative=390957&creativeASIN=0596802447">CSS:
The Missing Manual</a><img 
src="http://www.assoc-amazon.com/e/ir?t=greehaml-20
&l=as2&o=1&a=0596802447" alt="" 
style="border: none !important; margin: 0px 
!important;" border="0" width="1" height="1" />

The code displays this link on your web page: CSS: The Missing Manual

If you have a code-heavy web page, or just want the shortest possible link that works, read on.

Short product links that work
First, there is an alternative to the long link code created by the link wizard. The shortest possible link that includes your Amazon associates Tag ID is easy to construct and usually works perfectly. You always test every link you add to your website, right?

You could delete everything after your tagID in the link generated by the link wizard to start making a short working link (all one line, but wrapped to fit):

<a href="http://www.amazon.com/gp/product/0596802447?
ie=UTF8&tag=greehaml-20"

Note that this fledgling link conveniently contains the ASIN (product ID) and your associate's tagID. Complete the link with an angle bracket (>), then add the Product title and the closing </a> tag (one line but wrapped to fit):

<a href="http://www.amazon.com/gp/product/0596802447?
ie=UTF8&tag=greehaml-20">CSS: the Missing Manual</a>

Ah, this version is more readable!

To make the link as short as possible, you can replace gp/product/ with dp/, omit ie=UTF8&, and add a / forward slash before the question mark to get this (one line, wrapped to fit):

<a href="http://www.amazon.com/dp/0596802447/?
tag=greehaml-20">CSS: the Missing Manual</a>

That's as good as it gets.

The most basic link format that works with your tagID, with information unique to each link is:

http://www.amazon.com/dp/ASIN/?tag=yourTagID

Some successful associates have commented that they consistently use the short form of these text links on their websites. They seem like happy folk and nothing has fallen out of the sky on them. I would conclude, though not out of long experience with Amazon, that it's a matter of personal preference.

If you decide to use short links often, a sainted person has made a bookmarklet that you can install in your browser. To use the bookmarklet, simply go to the amazon page you want to link to and click the bookmarklet to create the link code. Get the bookmarklet.

Photo credit for green teapot image

2009-07-03T18:09:00.012-04:00

I derived my blog header image from an amazing photo by the artist, Doug Herren, of his industrial-strength green clay teapot. The photo is part of a set featuring his "industrial clay vessels and pedestals and more" in Libby Rosof's flickr photostream

Herren's works were a featured exhibit at the Snyderman Gallery in Philadelphia at the time this post was written. The gallery pages that were originally linked in this post are no longer available.

The image is used in accordance with the CC BY 2.0 generic attribution license which permits "share and remix" and the artist graciously granted permission for this use of the photograph.

Privacy Policy

2009-07-03T09:00:00.004-04:00

Personal Information Collected on this Blog
No personally-identifiable information is solicited or collected from web visitors. If you choose to include your name and e-mail address in a comment, it would become available to other blog readers. If you are signed-in to your Google account when replying to a post, a link to your blog address is created unless you sign out first.

Anonymous Information Collected on this Blog
Anonymous data is collected by Google to provide aggregate statistics about visitors and usage. You, as an individual user, remain anonymous. Such data may include pages visited, your IP address, browser type, how you landed, whether via search engine results or a direct link, and how long you stayed. Such data is used for marketing purposes.

Cookies
This blog uses third party advertising companies to serve ads on blog template pages or blog posts. Google uses a DoubleClick DART cookie to serve ads to you based on your visit to this site and other sites on the Internet. If you would like more information about this practice and to know your choices about not having this information used by Google, click here. Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy.

Amazon Associates Program
Greene Teapot is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.

Any items you order from Amazon are fulfilled by Amazon's secure customer service system, and shipped directly from Amazon or its partner merchants. Amazon keeps your personal information confidential and shares nothing about your identity with this or any other associate website. Amazon uses a 24-hour cookie. If you buy something via links on this site before the cookie expires, is deleted, or is replaced by a click on some other associate site, I would receive a small commission.