I've had my hands full with all sorts of things this past month, but I've managed to carve out enough time to put together the next article in the Blogware Mechanic series. I'm going to continue from where I last left off in the “Breaking Away from Table-Based Layout” series and show you how to make your Blogware layout CSS-based.

In case you've missed any of the Blogware Mechanic series, here are links to all the articles…

• Blogware Mechanic #1: Basic Blog Customization, Part 1
• Blogware Mechanic #2: Basic Blog Customization, Part 2
• Blogware Mechanic #3: How Do I Put a YouTube Video Into a Blog Entry?
• Blogware Mechanic #4: Breaking Away from Table-Based Layout, Part 1
• Blogware Mechanic #5: Breaking Away From Table-Based Layout, Part 2

In the last Blogware Mechanic article, I illustrated the table-based layout used by Blogware's “out of the box” templates — that is, the templates you get with a Blogware blog. I also listed why table-based layout is a bad idea, citing reasons such as accessibility, mobile browsers and search engine optimization.

Now that we've covered why table-based layout is probably a bad idea for your blog, it's time to cover my proposed alternative: CSS-based layout. This article will concern itself with Blogware's templates system and set the scene for the next article, in which we start editing the base template, which will enable us to go from a table-based layout to a CSS-based one.

My Proposed CSS-Based Layout

As a refresher, let me bring up my diagram illustrating Blogware's table-based layout, which shows the order in which its HTML is scanned and rendered by the browser, which is also the order in which its HTML is read by search engines:

As I mentioned in the previous article, one of the side effects of table-based layout is that the main content of your blog — presumably the most important part — is quite deeply buried in the center. I also mentioned that the general opinion of people who obsess over the finer points of search engine optimization is that search engines seem to give more weight to the content at the start of a web page than the content at the end.

My solution is to create a CSS-based layout that still gives you the visual layout that you expect, but whose underlying HTML is laid out so that the content is much closer to the beginning. This should yield at least two big wins:

• Your blog pages should appear to render more quickly
• Your blog should rank higher in search engine results

There's an additional win: it makes possible changes that wouldn't otherwise be possible in Blogware. For example, Tris Hussey's been asking if it's possible to have a wide column for main content on the left and two skinny columns for sidebar content on the right. This is easy to do with CSS-based layout, and Tris shall soon have the layout he wants!

My proposed CSS-based layout would have the end result of being scanned and rendered like so:

Now that I've spelled out the “what”, it's time to cover the “how”.

Check to See if You Can Customize Your Blog's Templates

Before you begin: The first thing you need to do is confirm that your blog is set to allow you to customize your templates! This feature won't cost you any extra money, but it's a power-user feature; many blogs have it turned off. If they're not enabled, you should contact your Blogware reseller and ask to have it turned on.

Here's how you can see whether you can customize your blog's templates: go to your Blogware control panel and click the Look & Feel tab on the navigation bar:

If your navigation bar looks like the one below — notice the Templates link — it means that you can customize your blog's templates. You can skip ahead to the Editing Templates section.

However, if your navigation bar looks like the one below — note that there's no Templates link, you won't be able to edit your blog's templates. You'll need to contact your Blogware provider and ask them to allow you to create custom templates:

(This might help: this is a screenshot of the Blogware provider's control panel that shows which checkbox needs to be checked to allow you to create custom templates:)

Blogware's Templates

Now that we've got the setup out of the way, it's time to take a look at Blogware's Templates page. To get there, click on the Look & Feel tab on the navigation bar:

…then click on the Templates link:

You'll be on the Templates page, which looks something like this:

This page lists all the templates in your blog. With the exception of the Style template, which is actually a CSS style sheet, each of the templates defines a specific aspect of the page layout of your blog. Here's a quick run-down of what each of these templates controls:

Template Name	What It's For
article	Sets the layout of the main content section of Article pages — that is, pages that are devoted to a single article and its comments, trackbacks and attachments. This template refers to the comments and trackback templates.
base	Set the overall layout of all pages in the blog. This is the template that we must edit to change your blog from a table-based layout to a CSS-based one.
book_review	Sets the layout of the main content section of Book Review pages — that is, pages that are devoted to a single specialized type of article that has extra information pertinent to book reviews, and its comments, trackbacks and attachments. This template refers to the comments and trackback templates.
category	Set the layout of the main content section of Category pages — that is, pages that display one or more articles at once. For example, the main page of a Blogware blog is a category page, as are any pages that display one or more articles belonging to a category, and so are archive pages showing one or more articles.
comments	Sets the layout of the comments within Article, Book Review, Movie Review, Music Review and Photo pages.
movie_review	Sets the layout of the main content section of Movie Review pages — that is, pages that are devoted to a single specialized type of article that has extra information pertinent to movie reviews, and its comments, trackbacks and attachments. This template refers to the comments and trackback templates.
music_review	Sets the layout of the main content section of Music Review pages — that is, pages that are devoted to a single specialized type of article that has extra information pertinent to music reviews, and its comments, trackbacks and attachments. This template refers to the comments and trackback templates.
photo	Sets the layout of the main content section of Movie Review pages — that is, pages that are devoted to a single specialized type of article that has a photo and has extra information pertinent to photos, and its comments, trackbacks and attachments. This template refers to the comments and trackback templates.
photoalbum	Set the layout of the main content section of Photo Album pages — that is, pages that display one or more Photos at once. Clicking on a photo in a photo album takes you to that photo's individual Photo page. Photo albums are to photos what categories are to articles and reviews.
photoalbum-byday	Set the layout of the main content section of “By Day” Photo Album pages — a special case of photo album where photos are grouped by the day they were posted.
rss_feed	Sets the layout of RSS feed components.
style	Contains the CSS style sheet for the blog.
trackbacks	Sets the layout of the trackbacks within Article, Book Review, Movie Review, Music Review and Photo pages.

If you look at the columns in this list, you'll see two columns names Live and Staging. The “Live” and “Staging” refer to the two categories of template:

• The Staging template lets you see what the results of changes to a template are without having to commit those changes
• The Live template, as its name implies, is the “live” one — that is, it's the one that controls the layout your readers see.

We need just a little more preamble before we can dive into editing your blog's layout. Let's now look at the base template.

The Base Template

To get to the base template, click on the corresponding Edit link, as shown below:

You'll be taken to the mysterious Select Style page, which really doesn't do anything for the base template other than make you click something to get to the next page. Just click on the Customize button near the bottom of the page:

You'll now be at the preliminary Edit Template page for the base template. On this page, you select a version of the base template to edit. We want to edit the one that's currently in effect for your blog, so make sure that Copy is selected in the Action list, the click the Go button:

The Edit Template page will reload, and you'll notice that it's now sprouted a text box marked Staging Template Content. This text box contains the base template code, at long last!

What's Coming Up Next

I hate to bring you up to this point and leave you hanging, but time considerations force me to end the article at this point. I promise that by the end of the next installment, we'll actually dive into the base template code and change your Blogware blog from one with a table-based layout to one based on CSS, as it should be!

We're Back!

Welcome to a new year of The Blogware Mechanic, the article series that explores ways to customize, enhance and supercharge your Blogware-powered blog in ways that the manuals don't cover. If you've got a Blogware blog and would like it to have the features that those fancy “A-lister” blogs have, this series is for you!

In case you missed some of the previous articles in this series, they are:

1. Basic Blog Customization, Part 1. This article covers choosing a color scheme for your blog from the built-in set of color schemes and choosing between Blogware's one-, two- and three-column layouts.
2. Basic Blog Customization, Part 2. This article is all about the basics of components: using them, adding and removing them from your blog's sidebars, and adding and removing them from your blog's header and footer.
3. How Do I Put a YouTube Video Into a Blog Entry? If you want to stick a YouTube video into you blgo entry, consult this article, which explains how it's done.

This entry marks the first of a series of articles that takes a look at making some very big changes to Blogware's templates, which define the layout of your blog. In this series, we're going to look at:

• Breaking away from Blogware's table-based layout
• Experimenting with custom page layouts
• Search engine optimization
• Google Adsense optimization
• Blogware's template mini-language
• JavaScript tricks

To begin this series, I'm going to start with the first item on the list: Breaking away from Blogware's table-based layout.

Blogware's Table-Based Layout

As you probably know, you can select from one of four possible column layouts in the Blogware control panel:

• A single-column page with no sidebars
• A two-column page with a thin sidebar column on the left and the main content in the wider right column
• A two-column page with a thin sidebar column on the right and the main content in the wider left column
• A three-column layout with thin sidebars columns on the left and right and the main content in the wider center column

For this discussion, I'll limit my focus to the three-column layout.

The layout of a Blogware blog's pages are determined by templates, which are HTML or CSS files that act as a framework for the blog. The content that you provide and your readers provide — blog entries, photos, comments, trackbacks and so on — is inserted into the framework created by the templates, resulting in the web pages that make up your blog.

If you use Blogware's templates “out of the box” (that is, they way they're given to you), your blog uses a table-based layout. In this layout, every blog page you have is essentially a giant HTML table which in turn contains a couple of smaller tables.

If you have a Blogware blog, take a look at the source of your blog's home page. (It won't do to look at the source of this blog, as I've already made big changes to its templates.) You'll see that the page is enclosed within a  <table>, and you should see a number of <tr> and <td> tags as well.

In order to make it easier to visualize what's going on with all these tables, I've put together a little diagram below that illustrates the table-based layout of a Blogware blog using the three-column layout:

With Blogware's default templates, a page is essentially a big table with three rows:

• The header row, which in turn contains a three-column table for the header's left, center and right columns
• The main content row, which contains the blog's three columns
• The footer row, which in turn contains a three-column table for the footer's left, center and right columns

Table-Based Layout's Disadvantages

As long as you're only considering human beings reading your blog on browsers made for reasonably large displays using fast connections under ideal network conditions, table-based layout will serve you well. However, by sticking with table-based layout, you're underserving a big chunk of your audience.

Most of the problems with table-based layout have to do with the way the HTML is read and rendered by a browser. While we humans tend to think of web pages as two-dimensional creatures (or even three-dimensional, if you start to dabble with DOM layers), as far as the computer is concerned, they're one-dimensional. Computers don't “see” layout, they “see” HTML source and read it from top to bottom. To illustrate this, I've put together this diagram that shows how a browser reads Blogware's three-column layout:

The browser, when reading the giant table that makes up a Blogware blog page, first reads and renders the header, then the left sidebar, then the main content, then the right sidebar, and finally, the footer.

The end result is that your blog's main content — the “meat”, if you will — is buried deep in the middle of your page. This has a number of implications.

Implications of Table-Based Layout for Mobile Browsers

We'll still in the early phases of the mobile browser adoption curve, but if you look around at any major airport's departure lounges, chance are you'll see at least a couple of people checking out web sites on their web-capable mobile phones or Blackberry devices. According to this article in Opera Watch, the Opera Mobile Browser alone has been built into 40 million mobile phones and had been downloaded 2.5 million times as of August 2006.

Different mobile browsers treat table-based layout differently. Some will render the page the way a desktop browser would, which forces the user to scroll not only up and down, but sideways in order to view the page. Opera's mobile browser takes a smarter approach: it renders table-based layout as a single column, going row by row, then column by column, in same order as the one shown int he diagram above. This eliminates the need for sideways scrolling, but your mobile readers will have to scroll downwards a long way to get to your articles, especially if you have a very long left sidebar.

It would be better if there were an alternative layout method that would server both “stationary” and mobile users well. In such a layout, “stationary” users would get the full three-column experience, while mobile users would read your blog as a long, thin single column, with the main content near the top, followed by the sidebars.

Implications of Table-Based Layout for Visually-Impaired Readers

Specialized browsers or browsers that have a special mode for impaired readers are pretty much like mobile browsers; many also break down a table-based layout into a long strip that displays the content in the same order as shown in the diagram above. By using a table-based layout, you're doing your visually-impaired readers a disservice.

I've seen a number of people dismiss this by saying that “it's political correctness run amok” or that “blind users make a statistically insignificant fraction of the readership”.

Let me go Machiavellian for a moment and ignore the moral issues and go for sheer pragmatism. What if I told you that there was a small cabal of blind users out there who are so influential that ignoring their needs is tantamount to web suicide? Would you care about blind user then?

You should. Those blind users are the search engines.

Implications of Table-Based Layout for Search Engines

For the 99.9999% of us whose sites aren't in the top 100, most of our visitors do not come directly to our web pages. Instead, some of them come in through referring links from other sites, but the vast majority come in by way of search results, especially Google search results.

As a “blind” reader, Google isn't aware of the layout of your blog and scans it in the order shown in the diagram above. “So what?” you might ask, “Google, unlike people, has infinite patience and doesn't mind waiting until it hits the middle of my blog's HTML to get to the main content.”

While Google is infinitely patient, it operates under some constraints:

• It must index billions of web pages — and very often, too. That means that Google is designed scan web pages as quickly as possible, and to this end, it takes some shortcuts.
• To Google, content at the beginning of the page is more important than the content at the end of the page. This is one of those shortcuts I mentioned in the previous point. Have you ever decided to read a magazine article based on the first couple of paragraphs? It is generally believed that Google's algorithm works on the same principle: that the “gist” of a web page can be determined by the content near the beginning.
• There is an upper limit to how much of a web page search engines will index. This upper limit varies from search engine to search engine, and they generally don't publicize what this upper limit is. According to this article at SitePoint, here are the points after which various search engines stop indexing a page:
  • Yahoo! stops indexing after reading 210K of page data
  • Google stops indexing after reading 520K of page data
  • MSN Search stops indexing after reading 1030K of page data
  This limit isn't likely to affect most blogs — even 210K worth of page data is plenty of text and JavaScript.

Implications of Table-Based Layout for Readers Using Desktop or Laptop Computers With Regular Browsers

In a three-column table-based layout, the main content of your blog doesn't load and render until the parts the table that precede it have been loaded and rendered. If you've got a lot of JavaScript in the <head> section and a busy header and left sidebar, there can be a noticeable lag between the time your blog's pages load and the time the main content becomes visible.

Table-based layout also tightly couples content with design, which greatly increases the file size of your blog's pages (remember, bandwidth costs money). It also makes it harder to modify your blog's design or keep the design consistent.

Recommended Reading

I could go on covering the disadvantages of table-based layout, but the presentation titled Why Tables for Layout is Stupid does the job so well that I thought I'd simply point you there. Don't let the fact that it's from ancient history — 2003! — irk you; the points it makes are still valid today.

What's Coming Up Next

You've probably guessed where this is going: CSS-based layout. In the next installment, we'll look at replacing Blogware's table-based layout by changing its base template. Not only will you get a look at Blogware's underlying template system, but you'll also get a look at its template scripting language.

The Blogware Mechanic is a series of articles that covers how to get the most out of your Blogware blog through customization. In this series, we'll look at all sorts of ways to take advantage of the flexibility of the Blogware blogging platform and make your blog better-looking, easier to use, funkier, more highly-ranked by search engines and even help make you a little money! If you have a Blogware blog and want to soup it up like those fancy “A-lister” blogs, then this series is for you.

I'm going to interrupt The Blogware Mechanic's ongoing series on customizing the look and feel of your Blogware blog to answer a question that I get asked on an increasing basis:

How do I put a YouTube video into a blog entry?

There are two ways to do it:

• By linking to the YouTube video's page (easy, not as impressive-looking)
• By embedding the YouTube video directly into your blog entry (a little more work, impressive-looking)

Linking to the YouTube Video's Page

Here's an example of linking to a YouTube video's page:

Take a look at this video of me interviewing Tucows VP Product Development, Alain Chenais, for a podacast!

If you click on the link above, you'll get taken to the page at YouTube where the video lives.

Linking to a YouTube video page is easy, because YouTube makes it easy for you to copy the page's location. If you look at the YouTube video page, you'll see a section just to the right of the video. Let's take a closer look:

This section of the page shows a lot of information about the video on the page, including its URL (or, if you prefer, “web page address”). If you click on the URL, it will be highlighted. Do this, and then copy the URL (by pressing control-c on if you use Windows or Linux, or command-c if you use Mac OS).

In the Blogware control panel, highlight the text that you want to link to the YouTube page. Then click the Link button:

A window like the one below will pop up:

Paste the URL into the text box in the pop-up window (by pressing control-v on if you use Windows or Linux, or command-v if you use Mac OS), then click the OK button. The text will now be linked to the YouTube video's page.

Linking to the YouTube Video's Page

A flashier way to include a YouTube video is to directly embed it into your blog entry. Unlike linking to the YouTube video's page, you readers don't leave your blog to see the video; it's right there, inside your entry

I've embedded a YouTube video below. If you click on either play button (the triangle pointing to the right in the center of the video or the one in the lower left-hand corner), the video will play. If you click anywhere else on the video, a new browser window or tab containing the YouTube video's page will open.

As with linking to a YouTube video, the first step is to go to the YouTube page for the video and look at the section just to the right of the video…

This time, we're interested in the Embed text field. If you click on it, it will be highlighted. Do this, and then copy the URL (by pressing control-c on if you use Windows or Linux, or command-c if you use Mac OS).

Now go to the Blogware control panel. What you do next depends on whether or not you use the Rich Text Editor to enter posts.

If you use the Rich Text Editor, you'll need to click the Mode button near the lower right-hand corner of the Article Body area so that the editor is in Source mode:

If you don't use the Rich Text Editor, you're already editing the HTML source for your blog entries and don't need to do anything special.

Now paste what you copied from the Embed text field in the YouTube page into the source of your blog entry:

The video will now be embedded in your blog entry.

Special Note for Rich Text Editor Users

The Rich Text Editor doesn't know how to display embedded YouTube videos. Here's what an embedded YouTube video looks like in the Rich Text Editor:

If you use the Rich Text Editor and want a preview of what your entry looks like with the embedded video, click the Preview button at the bottom of the page. You'll see something like this:

The Blogware Mechanic is a series of articles that covers how to get the most out of your Blogware blog through customization. In this series, we'll look at all sorts of ways to take advantage of the flexibility of the Blogware blogging platform and make your blog better-looking, easier to use, funkier, more highly-ranked by search engines and even help make you a little money! If you have a Blogware blog and want to soup it up like those fancy “A-lister” blogs, then this series is for you.

In the previous installment, I covered some basics: changing the color scheme of your Blogware blog, and changing the column layout.

In this, the second article in the series, I review another basic Blogware customization technique: changing the layout of components in your Blogware blog's sidebars, header and footer. As with the previous article, this is stuff that's covered in the Blogware Publisher's Guide, but it's stuff you need to know before we can start covering the fancy stuff, which we do in the next installment.

Here's what's covered in this article:

• Changing the Component Layout
• Changing the Layout of Components in Your Blog's Sidebars
• Adding a Component to the Left Sidebar of Your Blog
• Adding a Component to the Right Sidebar of Your Blog
• Removing a Component from Your Blog's Sidebars
• Changing the Layout of Components in Your Blog's Header and Footer

Changing the Component Layout

As I mentioned in the previous article, most blogs have:

• A “main content area” for blog posts and photos, and
• One or two sidebars for navigational links and supplementary content.

Blogware blogs also provide two more areas for navigational links and supplementary content:

• The Header, located at the top of the page. It's typically used to hold the blog's title and the most important navigational links.
• The Footer, located at the bottom of the page. It's often used to hold information such as copyright notices and other “fine print”.

With this in mind, here's a view of the structure of a Blogware page:

Here's a screenshot of our example blog, with the underlying structure — header and sidebars — pointed out. (Yes, there's a footer, but we won't bother showing it for now.)

Just as blog and photo entries determine what goes in the content area of your blog's page, components determine what goes in the header, footer and sidebars. You can think of components as little building blocks that you can easily move about.

Let's take a closer look at our example blog and identify some components:

As you can see, components are handy little accessories for your blog; many of them make it easier to use and navigate. Among the various components built into Blogware are:

• Blog name: Lets readers know what blog they're reading.
• Recent articles: Provides a list of the articles most recently posted to the blog. Clicking on a list item takes you to the corresponding article.
• Calendar: Readers can click on a date in the calendar to read the blog entries for that specific date.
• Favorites: Sometimes referred to as a “blogroll”, this is a list of other blogs and websites you read. Clicking on a list item takes you to the corresponding blog or site.

You change the layout of your blog's components in the Look & Feel section of the Blogware control panel. To get there, click on the Look & Feel tab of the navigation bar:

Then you'll need to go to the Layout page. Do this by clicking on the Layout link, as shown below:

If you look at the page, you'll see something familiar: the controls that set the column layout of your blog. (In case you missed this, see the Changing Your Blog's Column Layout section of the previous article).

What we'll cover in this article are the Component Layout controls. The first thing to note are these tabs:

These tabs determine which component settings you'll be editing. They are:

• Columns: For controlling the layout of components in your blog's sidebars.
• Header: For controlling the layout of components in your blog's header.
• Footer: For controlling the layout of components in your blog's footer.
• Components: For customizing existing components or creating your own ones.

We'll cover the first three tabs in this article; customizing components will be covered in the next one.

Changing the Layout of Components in Your Blog's Sidebars

Make sure that the Columns tab is the selected, the scroll down the page until you see these columns:

The columns are:

• Left: Components in this column appear in the left sidebar, if your blog has one. If your blog doesn't have a left sidebar, these components will not be shown.
• Center: You can't put components here — it's just here so that you can have a better sense of the page layout.
• Right: Components in this column appear in the right sidebar, if your blog has one. If your blog doesn't have a right sidebar, these components will not be shown.
• Inactive: Unused components go here. Any component in this column will not appear on your blog. Think of this column as a shelf or toolbox for storing your unused components.

Adding a Component to the Left Sidebar of Your Blog

Let's try changing the the left sidebar of our blog. We'll add the Enhanced Search component to the left sidebar and place it below the Category Tree component and above the Calendar component, in the location shown below:

In the Component Layout section of your control panel, that location is here:

To the Enhanced Search component to the left sidebar, simply drag it from the Inactive column to the Left column. We want it be below the Category Tree component and above the Calendar component, so drop it between those two components. The animation below shows what the dragging-and-dropping looks like:

Once you've dragged the Enhanced Search component to the left sidebar, scroll down to the bottom of the page, to where the Preview and Save buttons are:

Click the Preview button if you'd like to see what the change you made looks like without committing it to the blog. The Preview button will open a new window showing what your blog would look like. In the case of our example blog, the preview should look like this:

To make the change permanent, go back to the control panel and click the Save button.

Adding a Component to the Right Sidebar of Your Blog

<

p>Adding a component to the right sidebar of your blog is similar to adding one to the left sidebar, but instead of dragging the component to the Left column, you drag it to the Right column.

Removing a Component from Your Blog's Sidebars

Removing a component from either the left or right sidebar of your blog is the reverse of adding it; you simply drag the component you want to remove into the Inactive column.

For example, if you want to remove the Enhanced Search component we added to the left sidebar in the previous example, you would drag it from the Left column and drop it into the Inactive column, as shown below:

As with adding a component to a sidebar, the Preview button at the bottom of the page lets you see the result of the change without committing to it, while the Save button saves the change.

Changing the Layout of Components in Your Blog's Header and Footer

To change the layout of the components in your blog's header, you need to click on the Header tab…

To change the layout of the components in your blog's footer, you need to click on the Footer tab…

Whether you're changing component layouts in the header or footer, you're taken to a page showing with the familiar Left, Center, Right and Inactive columns. The only difference with the header and footer is that you can drag components into the Center column:

As with making changes to the sidebars, once you've made changes to the layout of the header and footer, clicking the Preview button lets you see the effects of your changes without committing to them, while clicking the Save button commits your changes to your blog.

What's Next

In the next article in this series, we'll customize some components and then we'll roll our own.

Welcome to the Blogware Mechanic!

The Blogware Mechanic is a series of articles that covers how to get the most out of your Blogware blog through customization. In this series, we'll look at all sorts of ways to take advantage of the flexibility of the Blogware blogging platform and make your blog better-looking, easier to use, funkier, more highly-ranked by search engines and even help make you a little money! If you have a Blogware blog and want to soup it up like those fancy “A-lister” blogs, then this series is for you.

Every series has to start at the beginning, and that's what I'll do here. I'll begin with a couple of articles on basic customization. If you've been using Blogware for a while, there's a good chance that none of this will be new to you; in fact, you'll find the same information in the Blogware Publisher Guide. However, in the interest of being thorough and for the benefit of new Blogware users, I'm going to go over the basics before diving into the fancy stuff.

This article is the first of two that cover the basics of changing your blog's appearance. I'll cover two things:

• Changing Your Blog's Color Scheme
• Changing Your Blog's Column Layout

Changing Your Blog's Color Scheme

The simplest and most dramatic way to change the appearance of your Blogware blog is to change the color scheme. The name “color scheme” is a little misleading — not only does it define the colors of your blog, but it also defines the fonts used, as well as a little bit of the layout.

(If you're familiar with other blogging tools, Blogware's color schemes are similar to what they call “themes” or “styles”.)

Blogware lets you choose from a number of pre-defined color schemes, and if you don't like those, you can always create your own. For the time being, we'll look at choosing a pre-defined color scheme.

Consider the screenshot below, depicting a blog using the color scheme named “Antique”:

Click to see the screenshot at full size.

Let's change its color scheme to one of the other pre-defined ones.

To do this, log into the Blogware control panel. Once you're in, click on the Look & Feel tab on the navigation bar:

You'll be taken to the Look & Feel section of the control panel. The default page of this section is the Colors page, shown below:

To change the color scheme of your blog, select the color scheme you want to use and click the Change button at the bottom of the page. The page will refresh itself, and you should see the “Style updated” message near the top of the page:

Now that the color scheme has been changed, let's take a look at your blog:

Click to see the screenshot at full size.

It's the same blog, with the same content and layout, but with different colors and fonts.

The color schemes available to you depend on your Blogware provider. Blogware comes with a default set of color schemes, and your provider has the option of creating their own as well.

You're not limited to choosing from a set of pre-defined color schemes; you can also “roll your own”. A good portion of this series of articles will cover just that, from simple tweaks to wholesale redesigns.

Now that we've taken a quick look at color schemes, let's look at column layouts.

Changing Your Blog's Column Layout

Most blogs have a layout with columns. Typically, there's a wide column or “content column” for blog entries and one or more “sidebars” which hold things like navigation links, lists such as “most recent entries” and “most recent comments” and supplementary content. Blogware gives you four options for column layouts, which I'll describe below.

Let's take a look at the layout of the example blog. Note that it's a three-column blog, with the content in the center and two sidebars, one on the left and one on the right, as shown below:

With only a couple of mouse clicks, you can change the blog's layout to a two-column layout, with the sidebar either on the left or right side:

You even have the option of doing away with the sidebars altogether and going with a single-column layout:

If you choose to use the single-column layout, you can still put navigation controls and other content that would typically belong in the sidebars into the header or footer of your blog.

Choosing a column layout is simple. In the Blogware control panel, go to the Look & Feel section by clicking on the navigation bar's Look & Feel tab:

Once you're in the Look and Feel section, the Options section of the navigation bar will show you the options for that section. Click on Layout:

You will be taken to the Layout page, where you'll see a set of controls that look like this:

These controls let you select the column layout for your blog. Click on the picture corresponding to the layout you want, then scroll to the bottom of the page.

You'll notice that you have two options:

Clicking the Preview button lets you see what the new column layout will look like without committing to it. Clicking the Save button will actually change the column layout.

That's all there is to changing the column layout!

What's Next

In the next article in this series, we'll look at something a little more complex: components.

iMedia Connection gives us brief looks at how General Motors, Sun Microsystems and Wells Fargo are reaching out to their customers using blogs in the article titled 3 Big Brands Reinvent Themselves with Blogs. In addition to showing how these companies are making use of their blogs, the article also provides some useful advice for companies who are thinking of starting their own customer-facing blogs.