Getting Paid to Blog: Don't Quit Your Day Job Yet

It sounds too good to be true. I'm sure there are many bloggers — myself included — who would like to see their costs offset, or their time investment rewarded, but is it really possible to earn significant income through pay for content schemes?

Several companies want you to think so. AdSense-sponsored content has been around for donkey's years, of course, but other revenue models are emerging with the explosion of blogging and other Web 2.0 phenomena.

PayPerPost is the latest player on the market. They act as matchmaker between bloggers and advertisers who are seeking people to write about their products. PayPerPost publishes a list of advertiser opportunities on their site. Bloggers review this list, select a topic, and create a post. Once approved by PayPerPost, the post must remain live for 30 days before the blogger is paid (via PayPal). From a professional writing standpoint, payments are miniscule, ranging from $2.50 to about $20 per article.

Squidoo has quite a different approach. Organized like a directory, the site is a collection of articles on various topics (called "lenses") grouped into categories, rather like About.com. Bloggers are invited to create lenses on topics that interest them, and can link back to their blogs. There is no limit on the number of lenses you can create. You earn "royalties" on the lenses you write, based on a share of Squidoo's AdSense and affiliate advertising revenue. The company claims it distributes 50% of after-expense revenue directly to lensmasters.

Another company that wants to pay you for content is Associated Content. The site operates as a content syndication service for text, audio, video, and images. Unlike Squidoo, which derives revenue from advertising, AC resells content and offers cash up front. Your submission is reviewed by an AC content manager and, if accepted, you'll receive an offer within five business days. Payments range from $3 to $40.

In addition to these, numerous blogging networks claim to pay you to blog, out of income derived from advertising revenues. These include:

• BloggerParty
• WritingItUp
• BlogCharm
• Weblogs

ShigOdani maintains that, for those bloggers who do blog for money, payouts average $5.00 to $50.00 per month. Not exactly enough to retire on. What has your experience been? Does your blog produce income? What revenue programs do you use, and why? Drop a comment on me below.

Church Sites That Inspire

I'm not religious, but I love this web site! Stumbling around the Web late last night, I came across ChurchBeauty, and couldn't pull myself away. No, it's not about church architecture — though that would be interesting too — it's a showcase for quality church web sites, similar to the many CSS design galleries on the Web.

The site author (who, unfortunately, doesn't identify himself) has collected high-quality church sites and organized them into several categories, including clean, simple, colour scheme, photography, CSS, classic, video, and organic (not quite sure what that means). Though he focuses on visual design, he also provides categories for writing and usability. This is the first design gallery I have come across that acknowledges the importance of content.

He invites visitors to recommend sites for inclusion, and you can click through and rate the linked sites. A fun site to poke around, especially if you're seeking inspiration — divine or otherwise.

Preventing Disappearing Columns and Sidebars

Update: for more on troubleshooting Internet Explorer quirks and bugs, see this post.

Over the last few months, many people have downloaded the three-column templates provided here. These templates use a fluid layout, which means that content scales to accommodate the viewer's font size and/or browser window rather than being locked down at a fixed width. The templates were tested in a wide range of browsers before I put them online. Overall, their performance is solid and feedback has been great. A few people, however, have reported strange behavior in older versions of Internet Explorer. In certain situations, the right-hand column or sidebar may mysteriously vanish or jump around unpredictably.

This well known IE problem actually afflicts many three-column designs that use a fluid or liquid layout. It appears when you enlarge screen fonts or reduce browser window dimensions. And, no, Firefox is not immune.

However, IE versions 6 and earlier are responsible for much of this behaviour. It is due to IE's faulty implementation of the CSS box model, which describes the boundaries of HTML/CSS elements. According to the W3C specification, the width and height of a CSS element is based upon the raw dimensions of the element itself, before the addition of margins, padding, and borders. IE, however, uses a different box model, in which padding and borders are included in calculated base width. When fonts are enlarged beyond the width of a container, IE also improperly widens the container. These differences between the two approaches are responsible for many layout inconsistencies among browsers, including the wrapping third column problem seen in liquid layouts.

Fortunately, there are some simple fixes you can try. And, for the really stoic, all kinds of box model hacks that you can use to achieve virtually identical performance from IE and standards-compliant browsers.

Troubleshooting Tips and Fixes

If all you want to do is prevent a third column from wrapping and absolute consistency across browsers isn't huge issue for you, the troubleshooting strategies below may solve the problem:

• Check for images, form input elements, and web site URLs that exceed column widths and may force wrapping
• Reduce the width of form input elements until columns cease wrapping
• Reduce image sizes until layouts behave themself
• Shorten the alt text of web badges — long strings can force wrapping if the badge doesn't display for some reason
• Try reducing the width, margins, borders, or padding of one or more columns
• Reduce the font size slightly.
• Increase the overall width of the container div by a few pixels or percentage points
• Make sure the cumulative width of all columns, plus their margins, borders, and padding does not exceed 100% of the width of their container div
• Remember that borders add width — one pixel can force unwanted wrapping!

Often, a combination of these measures will seem to eliminate the problem. Don't assume, however, because your layout looks fine in Firefox or your version of IE, that no problem exists. Test in as many browsers as you can, especially older versions of IE. Often, the problem appears when window dimensions are reduced, so test at different window sizes. The problem can also occur when screen fonts are enlarged, so test at different font sizes too (click View / Text Size, and select increasingly larger font sizes, or press control while scrolling your mouse wheel). For the ultimate test, view at large font size in an 800 x 600 size window (type javascript:window.resizeTo(800,600) into your browser address field to simulate this width).

Box Model Hacks for Forced Cross-Browser Consistency

If you wish to trick Internet Explorer into acting like a standards-compliant browser and you are comfortable with CSS, consider using IE conditional comments to provide an alternate style for IE or try the box model hacks linked below. There are several versions of the box model hack, all of which involve "tricking" IE into rendering the box to the same dimensions used by compliant browsers. Be warned, however, that most of these are not for the faint of heart:

• Why does the box model need a hack?
• Tantek's original box model hack
• Getting Internet Explorer to play well with CSS

Hope these tips help, and if other strategies have worked for you, please drop a comment below.

Quick Tip: Tracking Down Misplaced Favorites

Ever bookmark an interesting or useful blog post, only to return later via your favourites to find it gone? I don't know about you, but I waste an inordinate amount of time hunting around blogs, trying to figure out what tweaked my interest weeks or months earlier.

When I stumble across a post that interests me, I usually tend to just click the Add to Favourites button without even thinking about it. But blog posts eventually disappear from index pages, to be tucked away in an archive. If you have bookmarked a blog's index page instead of a post's permalink (usually found at the bottom of each post), you could have difficulty finding that post again later.

Not to worry. There's an easy fix. Among the properties stored when you add a site to your favourites list (in Internet Explorer anyway) is the date the favourite was created. You can access this by right-clicking on the favourite, and selecting Properties from the pop-out menu. The date created is on the General tab, as seen in the screenshot here. Use that date as a guide to when the post was created or — if it goes back a ways — which archive to search.

I usually find what I'm looking for within a few days of the date the favourite was created. Unless, of course, I've bookmarked a much older blog post.

How to Create Amazing Circles and Bubbles

For photographers and Photoshop buffs, one of the biggest dangers of Flickr is its addictiveness. Since I first signed up a couple of months ago, I have spent endless hours posting my own images, exploring other people's work, and discovering all kinds of wonderful tools, tips, and tutorials. My latest Photoshop experiments have taken me into the realm of making amazing circles and phubbles.

Making an Amazing Circle

You can see my first attempt at an amazing circle at left above. I first noticed these dazzling spheres posted on various groups in Flickr, and a couple of quick queries led to tutorials on how to make them.

Amazing circles are not hard to make — the main challenge lies in choosing the right image. They are created with Photoshop's Polar Coordinates Distortion filter. BrilliantDays.com has published a short tutorial that walks you through the process.

Making Phubbles

Once you've mastered amazing circles, it's a good bet you'll want to refine the result to produce a transparent bubble effect. Phubbles, or Photoshop soap bubbles, are made from amazing circles that have been successively erased from the center out, to reveal just the right amount of image detail beneath. Flickr member Photopool describes the process in his popular tutorial. I followed his instructions to achieve the result you see at right.

For more examples, see Flickr's Amazing Circles interest group.