Restore Lost Google Ranking with Section Targeting

Have you noticed a change in your Google standing lately? WebLens was among many sites to suffer a nasty clobbering from the latest update of Google's ranking algorithm, code-named Jagger.

This important Google update coincided with a recent re-launch of WebLens, after much work on a new look and feel. I unknowingly published the revised site right around the time that Jagger made its debut. (It was also just before Christmas, which is never a good time to release anything important. What was I thinking!?!)

I watched with mounting bewilderment and dismay as my traffic plummeted and WebLens became virtually unfindable on any of its previously reliable keyword combinations. The site had never had top ranking, but WebLens had, for many years, consistently placed high on several important queries. Now, it was like I had slid right off the map — well, out of Google's universe anyway, despite good use of keywords and careful optimization.

After I calmed down and began to research the issue, I quickly learned about the Jagger update and its impact on the SEO world. A lot of well-established sites took a beating; many dropped steeply overnight. Some, like WebLens, slid into virtual oblivion, unfindable in screen after screen after screen of results.

I began to suspect that my problem was stemming from more than just Jagger. I knew Javascript was an SEO no-no; perhaps the Javascript-intensive nature of the new site was presenting bigger problems for Google than I had expected.

Around this time, I stumbled across an AdSense blog, which recommended Google section targeting as a way to improve ad relevance. This technique involves containing the parts of a page that you wish Google to crawl within a pair of special comment tags.

Would this help Google to bypass the problematic Javascript, I wondered. It took seconds to paste section targets into all my pages and re-submit the site. To my shock, I discovered that my lost ranking was not only restored, but improved, almost immediately. The relevance of the ads served by Google's AdSense program also improved.

Best of all, WebLens' rank in other search engines has also improved — most notably MSN — leaving me wondering whether Google's competitors may be taking these code snippets into account as well.

If you need to boost your Google ranking or Adsense ad relevance, give it a try. Here's how it works:

• Open the page you wish to optimize and locate the text you wish to emphasize
• Paste <!-- google_ad_section_start --> before the words or passage
• Paste <!-- google_ad_section_end --> after the passage
• Save the page and re-submit to Google

You can repeat these paired comments as many times as you need to within the document. Just make sure that every opening comment is closed. If you have a lot of pages to do, use your editor's Find and Replace command to speed things up. (Back up first, just in case. I have wept more than once after a careless F&R.)

One caution: Google does warn that you need to include a significant amount of content within the section targeting tags (insufficient content may result in less relevant ads), and that it is against Adsense program policies to use section targeting to emphasize words that are not relevant to the content of your pages.

Bloggies Voting Closes Soon

Bloggies voting closes at 10:00 PM on Tuesday, January 31st. If you're not familiar with the Bloggies, cruise on over to the 2006 Bloggies Awards site and check it out.

Surfing the Bloggies site is not only a great way to explore some of the Web's top blogs but a guaranteed time gobbler. Cast a vote for your favourites from among dozens of entries. Nominated blogs fall into 30 categories. There are categories covering specific geographic regions like Canada, Asia, Europe, or the U.S. Others are devoted to best podcasts, best photoblogs, or to themes such as best entertainment blog, best political blog, or best tech blog. There are also categories for best humour, best writing, best design, and more.

Some truly wonderful blogs have been nominated. Check it out, if you haven't already.

Blogger Template Hacks: Putting a Logo in Your Header

In an earlier post, I described some of the work I have done to date to customize the default Blogger template for a less off-the-shelf look and feel.

After adding a background graphic, categories, and a post auto-link, I set out to enhance the header. I wanted to make use of this prime screen real estate to promote my feed. This proved easy to do.

It's equally easy to include a logo or other graphic in the header, though how you proceed will depend on whether you retain or replace the existing title text.

Retaining the Title Text
If you wish to keep the existing title text, including a graphic in your header is easy. The key here is that you can put HTML, including the <IMG> tag, in Blogger's Title and Description fields. To add a graphic to existing text:

• Open the Settings > Basic tab
• Click in the Title field, to the left of your title text
• Type the <IMG> tag, pointing to the location of the image you wish to use, as in
  <IMG SRC="[your domain and filename]">
• Save your changes and preview your blog

You're done!

Replacing the Title Text
Things get trickier if you want to replace the contents of the Title field with graphically stylized text. Sure, you can paste an <IMG> tag into the field, but if you eliminate the title text, your blog name won’t show up anywhere.

A better approach is to use the CSS Fahrner Image Replacement (FIR) technique, an elegant solution that’s at the heart of CSS-intensive sites like ZenGarden. In a nutshell, the FIR technique uses stylesheets to replace text with an image, essentially hiding the text from standards-compliant browsers.

This is accomplished by creating a style that sets the text to display: none. Then another style displays a background image instead of the hidden text. You use CSS to control the positioning of the replacement image.

This approach introduces accessibility barriers because display: none renders any element with this declaration invisible to certain screen readers (and possibly to search engines as well). Many people are working on FIR variants that address this problem. In the meantime, I decided to try a compromise solution. Feel free to change the settings below to work for you:

• Open your blog template
  
• Place an empty <SPAN></SPAN> container in the Header area, after <$BlogTitle$>. You will use this to hook a style onto in a moment.
  
• Scroll up to the style declaration part of your template, and modify the #blog-title style. (Instead of display:none; I used the attributes below. Setting the font-size to 2% makes the title all but invisible, but keeps it there for search engines and screen readers. At least that’s my theory — I have no way to test this.)
  #blog-title {
  font-size:2%;
  line-height:1.2em;
  font-weight:normal;
  color:#ffffff;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.2em;
  }
  
• Create a new style called #blog-title span, as per the example below. You will need to experiment a bit, but basically this code centers a graphic over the hidden text. The background:url argument specifies the image to use.
  #blog-title span {
  display:block;
  top:0;
  width:334px;
  margin-top:10px;
  margin-right:auto !important;
  margin-left:auto !important;
  z-index:1 !important;
  height:60px;
  background:url("[your domain and filename]") no-repeat;
  cursor:hand;
  }
  
• Save your template changes and preview your blog.

Hope this works for you. For more on Farner Image Replacement, see:

MezzoBlue: Revised Image Replacement
Seamus Leahy: No Span
Well-Styled.com Tutorial (the method I used)
A List Apart: Facts & Opinions About Fahrner
Dave Shea: In Defense of Fahrner
StopDesign Tutorial

If you find these solutions helpful, sign up for our feed to be sure to receive new articles promptly.

More Flickr Magic from KrazyDad

After finding the cool Spell with Flickr entertainment that I blogged about yesterday, I went digging for other things you can do with this popular tool besides simply posting photographs.

Happily, I stumbled across KrazyDad, a compendium of delightful and innovative entertainments brought to you by Jim Bumgardner, author of Flickr Hacks and programmer par excellence.

Jim has devised a number of must-see games, puzzles, and other diversions that you can interact with. Topping the list, for me, are his amazing Flickr innovations, which have to be seen to be believed. Check out Phyllotaxy, and then give Flickr Color Pickr a spin.

KrazyDad also offers a selection of exquisite kaleidoscopic screensavers and the Metascope screensaver maker. This utility scans the web for images on themes you specify and creates a kaleidoscopic screensaver from them. I haven't tried this tool yet, but it's certainly on my growing to-do list, especially as it gets a big thumbs-up from Tara Calishain, author of Google Hacks.

Jim's Springy Thingies is also fun, as is his Spyrographer. Check it out.

Personalize Your Site with a Flickr Photo Title!

I don't have a category for "web silliness" but I probably should, because I seem to stumble across web diversions that range from amusing to downright silly with surprising regularity. I actually have a burgeoning folder of silly sites. The most recent addition merits a mention here, in recognition of its entertainment potential, if not its outright innovation.

Actually, you may find an application in your blog or web site for Erik Kastner's Spell With Flickr, a sweet little script that spells out whatever word or phrase you specify in randomly-generated Flickr alphabetic photographs. (Flickr is, of course, the blogosphere's most popular photo-sharing site.)

Click your browser's Refresh button and your letters will continually update. Kastner even provides the source code, should you want to integrate this utility into your site.

Amazing the things people do with their spare time.

Portrait of an Era Compelling Tribute to the Sixties

I saw the Linda McCartney Portrait of an Era photography exhibit yesterday, and was assailed by mixed emotions: stirred by vivid recollections of coming of age in the 60s; struck by the strength and power, intimacy and vulnerability MCartney captured on film; and saddened by the lengthening passage of time, not to mention growing awareness of my own mortality.

It was a shock to learn that baby Mary, one of the offspring of the union between Paul and Linda, is now almost 40. The photo of her as an infant nestled, sleeping, in her father's lap could have been taken yesterday. That's the "mirror shock" we boomers are increasingly said to be experiencing, and I underwent a healthy dose of it yesterday.

How much of this was because McCartney was a brilliant photographer, and how much was due to an uncomfortable confrontation with the very icons of my youth, I can't say. Opinions about McCartney vary, and not all are kind. To some, she was a gifted artist who captured the very essence of 60s rock and created a lasting visual record of the greatest musicians of our age.

Others dismiss her as "just a groupie" who was in the right place at the right time, lucky enough to meet some legendary performers and capture history in the making. Anyone could have taken those photos, these people will tell you.

I don't agree. The job of photography is not only to chronicle events and eras, but to challenge viewers to stop, think, and feel. McCartney's photographs create a unique sense of time and place and stir a bittersweet nostalgia. These are images so familiar they form a part of our collective psyche. John. Paul. George. Ringo. The Cream. Jim Morrison. Janis belting out a song. Jimi caught mid-guitar flail, arm extended dramatically, as if pointing to the watch tower. David Crosby dreamy and stoned. Grace Slick, tough as nails, bottle of bourbon nearby.

Most are dead now. Viewing McCartney's pictures, I was struck by an overwhelming sense of poignancy, of sadness at all the talent wasted, all the songs that would never be. That was the era of Haight-Ashbury. Of hippies and flower power and psychedelic posters. Of sex and drugs and rock and roll. McCartney sailed through it all, intact, until breast cancer felled her in 1998. Her legacy lives on in these wonderful images.

The exhibit is on at the Royal BC Museum until January 31st. Don't miss it.

Site Crashes Can Be Caused by Third Party Utilities

Man! I feel like I just slid back down to the beginning of the blogging learning curve. The polls are back (at the bottom of the left-hand sidebar, if you want to experiment with them). These little utilities were not causing the hanging problems experienced with this site today. I was too quick to blame and did not investigate carefully enough.

When my blog began hanging and refusing to publish today, I wrongly assumed it was because of the polls. I had included that code in the Blogger template recently, but I also created a blogroll (auto-updating list of favourite sites, for those newer to this than I) around the same time.

My blogroll is hosted at BlogRolling.com. It was a snap to create and install in the Blogger template and — until today — it was working like a charm. I was delighted with the ease with which I could not only create a blogroll but also add new sites on the fly, with a click of the mouse. Infinitely better than hand-coding a bunch of links.

Now, I'm having second thoughts. The BlogRolling.com site is down today and that unhappy circumstance brought my site down too. I'm not just talking about a delay in the site loading, but a crash that produced all kinds of nasty error messages and prevented me publishing at all.

The fix, once I figured out what was happening, was simple enough: First, back up your template. Then, instead of assuming the cause and rushing to delete the suspected offending code, as I did, comment out blocks of code and re-test until you have identified the culprit. As soon as I commented out the BlogRolling script and tried re-publishing, Blogger stopped hanging and behaved itself.

Watch Embedded Tools for Unwanted Behavior

I wrote yesterday about three free online poll creation tools you can use to add interactivity to your blog. I had created and posted sample polls using all three tools in the left-hand sidebar of this blog, so you could experiment and compare results.

I have since taken down the samples because one of them was causing huge delays in downloading. I have no idea which of the three was the culprit, but it was really messing with download speed and overall site performance. Strange, because it wasn't happening yesterday. Maybe three is just overkill.

Another issue I was unaware of yesterday: One of these tools (BraveNet) scatters pop-ups all over the screen. I didn't realize this when I posted yesterday since I usually work with pop-ups blocked.

Lesson learned: it's always a good idea to test any tools you embed in a web site, with pop-ups enabled, to make sure they aren't spewing unwanted garbage all over the screens of your visitors! This will, unfortunately, reflect poorly not on the source of the pop-ups but on you.

So, to anyone I've annoyed with obnoxious advertising , my apologies :-)

Add Interactivity with Online Polls

In poking around Darren Rowse's list of tips for promoting your blog, I came across a post talking about ways to add interactivity. Among the tools and resources Darren has rounded up are links to a couple of online polling tools.

Curious, I tried out both of the tools Darren describes. Both services generate a small piece of Javascript that you paste into your template. Both are highly customizable; both collect data in real-time; both present results graphically; and both allow you to prevent multiple votes.

Personally, I really like the service offered by BlogPoll. The code is generated on the fly and is easy to customize, with a nice onscreen preview feature. About the only downside, for me, is the rather unpleasant advertising in the results screen. I guess that's the price of free.

The service offered by BraveNet is more comprehensive and considerably more difficult to set up and customize. On the plus side, it allows you to create and store multiple polls and even to set up timed rotations among them. The user interface is not as intuitive as BlogPoll's, but they don't bombard you with tacky advertisements.

There are many other companies offering online polling utilities. One worth a look is WebSurveyor. It too is free and easy to customize, and it also offers the ability to store and rotate multiple polls.

Sample polls created using these three tools are displayed (temporarily) in the sidebar to the left for comparison purposes. Feel free to try them out; click View Results to see how each formats and presents responses.

Nikon Goes 100% Digital

Here's a telling portent for the future. Venerable camera manufacturer Nikon announced today that it will stop producing film cameras and focus solely on the digital market. That's a decision with some pretty profound implications.I don't use Nikon, but I have an ancient Canon FTb kicking around. Looks like these wonderful old cameras are rapidly becoming antiques! Soon, you'll have no place to take your film to be developed. Hell, soon you won't be able to buy film! Indeed, most professional photographers I know have long since made the switch to digital. I know only one person who is still using a film camera, and he happily admits to being a luddite.The new digital SLRs make it hard to refute the argument that the old mechanical cameras produced better images. Have a look at the output from the Canon EOS, which captures an astounding 12 megapixels of gorgeous image detail. I'm drooling over this camera, though I must confess I'd have a hard time parting with my FTb. That old friend captured many happy times, as my Canon G6 is doing today.

Blogger Template Hacks: Use Your Header to Promote Your Feed

As you can see if you have stopped by before, I have been busy over the weekend, experimenting with further changes to the Blogger template. The default two columns have now morphed into a three-column layout. I'll be writing about that later.

First, though, a quick note about customizing Blogger's header. The template I chose (Minima) had an attractive but barebones text header, in keeping with the minimalist overall look and feel implied by this template's name.

I wanted to put a logo graphic in the header and make use of the prime top-of-screen real estate to promote my feed. The latter proved easy to do. Including a graphic is a little trickier, and requires using a CSS workaround with some accessibility implications. We'll save that for the next post on this theme.

First, the easy part. To put text and/or a link in the header:

• Open the Settings > Basic tab
• Click in the Description field and add the new text, including any HTML. Include a link to your feed, if desired.
• Here's the trick: if you wish to format the new text differently, as I have, surround it with a tag that you can hook some CSS on, such as STRONG or EM.
• Save your changes and switch to the Template tab.
• Locate the #Description style and make room below it.
• Clone the style and add a contextual selector (i.e. STRONG) that defines the formatting you wish to apply to the added material. Here's what I used:

#description strong {

display:block;
font-weight:bolder;
text-align:center;
padding-top:15px;
color:#ed7321;

}

Hope you found this tip helpful. I'm hoping to post later today on the second part of this process: embedding a graphic in your blog header. If you're enjoying these posts and want to make sure you don't inadvertently miss anything, subscribe to my feed and get new material automatically.

Supercharging Blogger Categories

Whew! More to say on Blogger categories. I have been immersed all day in further refining Daniel Chong Jyh Tar's amazing Blogger category fix, which I have implemented on this site and blogged about twice already.

Dan's workaround is based on Blogger's search feature, which itself derives from Google search syntax. In a previous post, I wrote about how to tweak your query before using Dan's code generator by employing a phrase search (enclose term in double quotation marks) or by brainstorming a list of words separated by Google's OR operator ( I ). This worked, but I still wasn't happy with the results. I have been experimenting further, and have discovered a couple of important things:

• Because it's the Google search (or some variation thereof), you can use the exclusion operator (-). This is great, because you can tell Blogger to pull up all the pages containing one of a set of words, but NOT another word. Just add the word you wish to exclude at the end of the query code in the Blogger template before the final quotation mark. Precede the word with a minus sign. You can exclude multiple words. Just place a minus sign before each, like so: -hack -hacks. This is a great workaround, and I used it to prevent the Blogger template hacks from appearing in the Tools and Resources category. Take a look at the code here.


• The only hitch I found is that Blogger seems to have some sort of word limit, and you may have to remove a couple of words from your list of ORs. This is strange because Google extended its notorious 10-word limit t0 32 words a long time ago. Doesn't seem to work in Blogger though. If you have trouble getting your exclusion to work, try eliminating a couple of the words in your list of ORs.


• I also got strange results combining a phrase with a set of ORs and an exclusion, as in this example: "web design" I HTML I CSS -hack -hacks. Blogger produced completely erroneous results, though this works typed directly in the search field rather than the template. This needs further tweaking, and the Blogger people could certainly improve the query language.


• In the process of re-working my categories yet again, I began to realize how much careful thought you must put into word choice as you write, since the words you use become the keywords Blogger search will use to achieve logical, intuitive topic clustering. Search engines are very literal: if you have used the word tool in talking about, say, a light meter for a camera (using this site as an example), that posting will show up under both Photography I Photoshop and Tools I Resources. That might be OK, but it might also make your topic clustering less intuitive to readers.

Hope you found this post helpful. Stay tuned for more. Even better, subscribe to my feed and get more on this topic automatically.

Blogger Template Hacks: Auto Embed Links

A couple of days ago, I wrote about some of the changes I have been making to the Blogger template. One of these took minor effort but has already produced big results.

The Blogger default template is designed to generate basic information for each item you post: title, the post itself, date, permalink, and various other footer-type fields. Blogger lets you insert images and format text easily enough, but that's about it.

One of my goals for this blog is to support WebLens and to introduce people to the resources there, and I was quickly getting tired of hand-coding links. Fortunately, it's easy to embed a link in the template that gets inserted automatically into each new post. You see the result at the top of this post, and the WebLens stats are already confirming that it's working.

Your auto-content could be anything: a link, a photo, a small piece of text. I used a web badge in this case, made with Luca Zappa's Brilliant Button Maker.

The key is to put the code in the right place in the template. For it to appear below the date, place your code after the <⁄BlogDateHeader> tag.

This little tweak creates all kinds of possibilities, especially for anyone concerned with blog traffic or site promotion. Hope you find this helpful. Stay tuned for another template hack later today. Even better, subscribe to my feed and get it automatically.

VisiBone: Quality Webmaster Tools that are a Pleasure to Buy

I shop online a lot, and much of the time I end up extremely frustrated. But I just had an unusually pleasant experience with an online purchase that I just have to share here.

VisiBone offers a variety of useful web design tools, including HTML, CSS, and colour reference cards and posters. I just ordered their Browser Book, half expecting the same teeth-grinding experience as usual with online purchases. What a surprise! Their shopping cart works like a charm: no burps or hiccups; no confusing instructions; no looping me back again to the beginning or jumping me out of the site; no request to fill out a field that didn't exist; best of all, no snippy Sorry, we don't ship to Canada at the tail end of the process.

The whole thing took about 30 seconds, moving me smoothly through each stage, from address confirmation to the hand-off to PayPal (they accept credit cards too), and back again for final confirmation. I actually found myself thinking this is what online shopping should always be like!

Their products aren't half bad either. Take a look.

Blog Server Outages Too Frequent

I wanted to post an article last night and couldn't for several hours. I don't know what the problem is with Blogger's server, but it's happening too frequently for me. I'm not the only one experiencing this. A quick Technorati query confirmed that it's a frequent problem for users of this blogging tool. It's enough to make me want to switch — a thought that makes me want to cry, after all the hard work I've done customizing this template.

I should have investigated a bit more carefully (ah... those should'ves) before I settled on Blogger. I know WordPress has features Blogger lacks, but does it have server problems too? If the Technorati statistic of 1 new blog per second is true, servers everywhere must be groaning under the strain.

So how about it, folks. Please take a moment to comment. What blogging tool do you use? What do you like/dislike about it? Do you have problems with server outages?

Great Free Blog Stats Tool

After much experimentation, I have finally found a traffic statistics tool that works as advertised. In the last week, I have been busy subscribing this blog to just about every directory, blog portal, and link exchange I could find.

In the process, I have tried several counters and stats tools, but none left me jumping for joy. Most were unwieldy and non-intuitive. A couple were just plain useless. One simply wouldn't accept my login and password, despite tech support intervention.

Just when I was beginning to despair of finding a good, reliable counter that is easy to use and produces statistical reports that make sense, I stumbled across StatCounter. This cool little utility took seconds to configure and get running. The site is fast, easy to navigate, and well documented with comprehensive help available if needed.

The blogging world's most popular stats program seems to be Site Meter, and I have set up that one as well, for comparison purposes and because The Truth Laid Bear ecotraffic blog ranking relies on this tool.

I'll be posting both of these to WebLens' blogging resources. If you have any you'd recommend, please let me know through the comment feature of this post.

Finding Canadian Blogs

Well, election fever is running full tilt in Canada. Our political leaders have had their moment in the spotlight. Martin, Harper, Layton, and Duceppe squared off again tonight in debate, and pundits and pollsters were quick with analysis.

In a debate with no clear winner, Martin stunned everyone in saying he would eliminate the Charter's notwithstanding clause. According to the media, this unanticipated move could be the tie-breaker the Liberals need to regain their lead and divert attention from the income trust scandal. Then again, maybe not.

What do ordinary Canadians think? Poised to go to the polls in two weeks, many remain undecided, fed up with Liberal corruption but wary of Conservative hidden agendas. I began to wonder what the blogosphere might have to say about it, and it should come as no surprise that it's a booming source of Canadian public opinion. In fact, we are very well represented in the blogging world. Here are some places to look for Canadian information:

1. BlogsCanada is a blogging portal with a variety of services and a good list of reviewed and rated Canadian blogs. There are 266 blogs alone just devoted to political commentary. One sure to be of interest to undecided voters is HarperWatch.
2. Goofy name notwithstanding, the Truth Laid Bear is an excellent resource for identifying popular blogs and analyzing traffic. The site's comprehensive list of Canadian blogs is ranked by popularity.
3. Blog.ca. Just emerging from beta testing, this blogging software tool also offers a blog directory and allows users to publish photos.
4. And finally, for a snapshot of Canadian voter opinion of the respective leaders' performances, go to Technorati and type in the query canadian election debate harper martin layton.

If you know of other good Canadian blogging resources, please drop a comment and share the URL here.

Blogger Template Hacks: Adding Categories

Blogger lacks the ability to organize posts by category, a feature available in many other blog editors. I have written previously about this problem, directing you to the excellent workaround provided by Daniel Chong Jyh Tar. His solution, based on Blogger's search feature, takes just seconds to implement. He even provides a code generator. Just type your category labels into it, generate the code, and paste it into your template.

But wait! It's not quite so simple. Getting a result that functions reliably and does not produce irrelevant results has taken a bit of experimentation. In his blog, Dan suggests inserting a category label (to base the sort on) in the beginning of each blog title. I didn't want to clutter up my postings that way. Consequently, the results obtained were not always a tight match, since Blogger's search engine was just making a match with any occurence of the query word within a post, rather than pulling out posts dedicated to that topic.

I decided to experiment a bit. Knowing that Blogger is owned by Google, I assumed that the search syntax available would be similar. Google supports certain Boolean terms like the OR operator as well as phrase search. Tweaking your query words in this way before you use Dan's gizmo will produce a tighter, more focused result, and ensure that the right posts get caught.

Here's what I ultimately came up with:

Brainstorm a list of words that describe each topic. Include all variables, including different endings and both singular and plural forms. For example, here's what I typed for the Gadgets, Tools, & Fixes category:

gadget gadgets tool tools fix fixes script scripts

Type your list of words into one field in Dan's code generator, separated by the pipe character ( I ), which Google substitutes for the OR operator. In the previous example, the query now becomes:

gadget I gadgets I tool I tools I fix I fixes I script I scripts

Where you need a tighter result, try a phrase (surround multiple words with double quotation marks). For example, I get much better results with "web design" than with web design, which Blogger seems to interpret as either the word web or the word design. Until I made this change, the query was pulling up every post with the word web in it.

You will have to experiment a bit. The code generated looks nasty, but it works. One final tweak: after pasting into Blogger's template, edit the link text (the words displayed between the anchor tags) for brevity and readability. There's no reason to display a long, unwieldy list of words for each category.

Hope you find this helpful. Stay tuned for more template hacks. Even better, subscribe to my feed and get more on this topic automatically.

Blogger Template Hacks: Background Graphics

In an earlier post, I mentioned making some changes to the default Blogger template. I deliberately chose a plain vanilla template because I wanted an easy-to-read blog with a clean look and feel. However, it only takes seconds to juice it up a bit with a background graphic or two. I added the green mouse image that you see here to provide visual continuity with WebLens, to which this blog links heavily.

Fix: Here's the code I used to tweak the Blogger template:

1. Open the Blogger template and find the CSS for the Body tag


2. Between the opening { and closing } parentheses, add the following code:
   
   background-image: url(http://your-domain-and-filename);
   background-position: 140% 0%;
   background-attachment: scroll;
   background-repeat: no-repeat;

Experiment with the background positioning until your image is positioned where you want. The first figure (140%) controls horizontal placement. The second, vertical. Negative percentages will move the image up or to the left, in relation to the containing element. The repeat attribute controls tiling.

Hope you find this fix helpful. Stay tuned for more. Even better, subscribe to my feed and get more on this topic automatically.

Blogger Template Hacks

In a previous post, I talked about the substantial learning curve for someone new to blogging. One of the greatest challenges for me has been to gain control over the Blogger template and find ways not only to put my own stamp on it, but to remedy limitations.

There are strong arguments for taking the time to customize a template. While the default Blogger templates are attractive and well-designed, there's a danger in using a canned template right out of the box, with no modifications. Your blog will not stand out. Worse, depending on the template chosen, it could look just like thousands of others out there.

To avoid that, I chose a bland but attractive template that would lend itself to subtle changes. In the past few days, I have made a number of modifictions, including:

• converting to a three-column layout
• placing a single background graphic
• placing tiling background graphics
• adding categories, which the Blogger tool lacks
• adding a link that gets inserted automatically in postings
• changing font size or typeface
• disabling the Blogger navbar
• and customizing the blog header, which included:


• Linking prominently to my feed
• Formatting header content to emphasize the link
• Inserting a logo graphic in the header

If you're used to having complete control over HTML and/or CSS, tweaking the code generated by an automated content system like Blogger can be disorienting. If you're not used to XML, there's an even steeper learning curve.

I'm thinking that perhaps what I've discovered through this exercise will be of use to others, so I'll post the details here over the next few days. To get these automatically, take a moment to subscribe to my feed.

Giving Birth to a Blog: a Herculean Labour

I feel like I've given birth to a 14-pound infant. The experience of launching this blog into the world rivals childbirth, in exhaustion if not in actual pain. In the two weeks since this blog went live, I have worked like a demon. I have had to surmount a huge learning curve, and it has been humbling to discover just how much I didn't know. It isn't about the writing. That's the easy part.

I thought I knew a fair bit about web design, but I quickly discovered that blogging opens up a whole new world, introducing a new language and turning established Web convention on its head. In the last two weeks, I have had to master a blog editor; figure out how to tweak Blogger's template styles for the effects I want; and find ways to overcome its limitations. I have created 80x15 web badges (which I'd never even noticed pre-blogging); explored the differences between Atom and RSS; set up a feed and various subscription links; registered the blog with all kinds of lists, search engines, and aggregators; and learned about everything from permalinks and pinging to trackbacks and tag clouds.

I have done everything I can to create a quality blog that offers information of value to readers. Now, to take a bad cliché even further, it's time for the newborn to take flight. I have enrolled in several traffic exchange sites, some of which are starting to produce results, but this blog needs real traffic. Not just one-time visitors swinging by to pick up some credits to be applied to their own blog traffic, but people interested enough to post comments, link to interesting posts, or sign up for a feed to get new posts automatically.

So, over to you. Let's get some dialogue going.

More Tools for Creating Web Badges

In an earlier post, I talked about a couple of great sites for finding and/or generating the small 80x15 web badges like the one you see at the top of this post. I had stumbled across these two sites in the course of researching the topic, but efforts to find similar sites were not very fruitful. Then yesterday, I hit the motherlode. Not surprisingly, once again, Lorelle Van Fossen has already covered this topic in depth. Her comprehensive list of badge generators is at her blog, Lorelle on WordPress, along with more badge, button, and icon generators. Lorelle's blog is an absolute treasure trove of goodies, and well worth taking time to explore for anyone interested in web design or blogging.

Logo Embellishment

Did you happen to visit Google today? We're all pretty used to holiday-themed variations on the official company logo, but today's Google logo celebrates an important milestone, especially for visually impaired people: the birthday of Louis Braille. The popular search engine has long used its logo to celebrate important birthdays, that of Vincent Van Gogh among my personal favourites. A little harmless nonsense that always brings pause for reflection before one begins frantically typing queries. Google has maintained this tradition since 1999, and you can find a full archive at their web site, along with a separate collection of logo variants created by Google fans.

Book Lives Up to ZenGarden Rep

What a delightful read! I just got my copy of Dave Shea and Molly Holzschlag's The Zen of CSS Design, the new companion publication to the Net's pre-eminent CSS destination, and I was up all night eagerly digesting the book's abundant insights.

Well written and lavishly illustrated with numerous full-colour photos and lots of sample code, this book dissects three dozen of the most intriguing and complex designs at ZenGarden. The authors provide abundant CSS tips, including workarounds for some of the most challenging browser (IE) implementation problems.

The book is a passionate argument for standards-based design, and an eloquent demonstration of the power of CSS when used to its full potential. Like the ZenGarden site itself, it raises the bar on web design, providing both inspiration and challenge to all who would build better web sites.

Cool Color Picker Generates Intermediate Shades

I don't know about you, but I love stumbling across cool gadgets, especially when they're free! My folder of handy online tools, scripts, and code generators continues to swell every day. Topping the list is a truly useful tool I stumbled across a few days ago. Eric Meyer's Colour Blender generates a series of intermediate shades from two colours that you specify. This is a great resource for creating web palettes (or any type of color scheme) on the fly!

Choose hex or RGB, select your start colours from a point-and-click color picker, and set the number of midpoints, then simply click Blend, and the picker will generate the code for you. Technology Lighthouse's ColorCache product does the same thing, and much more, for a modest fee of $35 USD.

Note: Meyer is a CSS maven and author of numerous books
on cascading stylesheets. His web site is also a fountain of information on this topic.

Where to Get Those Nifty Web Badges?

Check out my new web badge at the top of this, and every post! If you've been blogging for a while, you have probably noticed these little 80 x 15 icons. They seem to be plastered all over the Web, though I have to admit I never noticed them much before I started this blog. In blogging lingo, these tiny graphics are called web badges, and I have found a couple of great sites for getting and/or creating them.

Topping the list is the 80x15 Brilliant Button maker, a cool tool from Luca Zappa that lets you generate your own 80x15 badges. I used it to create the WebLens badge, in seconds.

Equally useful is Zwahlen Design's Web Badges page, which features a large collection of ready-made badges you can grab, and a discussion of the emerging standard for the creation of these graphics.