bw_mechanic

Document Sample
bw_mechanic Powered By Docstoc
					The Collected Blogware Mechanic




                                  1
Contents
Introduction ......................................................................................................................... 1
Blogware Mechanic #1: Basic Blog Customization, Part 1 ................................................ 2
     Welcome to the Blogware Mechanic!......................................................................... 2
   Changing Your Blog's Color Scheme ............................................................................. 2
   Changing Your Blog's Column Layout .......................................................................... 6
     What's Next ................................................................................................................. 9
Blogware Mechanic #2: Basic Blog Customization, Part 2 .............................................. 10
   Changing the Component Layout ................................................................................. 10
   Changing the Layout of Components in Your Blog's Sidebars .................................... 15
     Adding a Component to the Left Sidebar of Your Blog ........................................... 16
     Adding a Component to the Right Sidebar of Your Blog ......................................... 18
     Removing a Component from Your Blog's Sidebars................................................ 18
     Changing the Layout of Components in Your Blog's Header and Footer ................ 19
     What's Next ............................................................................................................... 20
Blogware Mechanic #3: Customizing Your Permalink Icons .......................................... 21
   Step 1: Choose a Graphic for your permalink icon....................................................... 22
   Step 2: Upload the Graphic to Your Blog's Filesystem ................................................ 22
   Step 3: Edit the "category" Template of Your Blog ..................................................... 25
Blogware Mechanic #2: Favicons and Filesystems .......................................................... 30
   Creating a Favicon ........................................................................................................ 32
   Upload the Favicon to Your Blog ................................................................................. 33
   Your Blog's Filesystem ................................................................................................. 34
Blogware Mechanic #3a: Including Pictures in Your Blog Entries, Part One .................. 36
   A Quick Review ............................................................................................................ 36
   Including Pictures in Your Blog Entries ....................................................................... 36
     Uploading a Picture to Your Blog's Filesystem ........................................................ 37
     Posting a New Entry from the File Manager ............................................................ 38
Blogware Mechanic #3b: Including Pictures in Your Blog Entries, Part Two ................. 40
   Adding the First Picture ................................................................................................ 40
   Adding Subsequent Pictures ......................................................................................... 41
Blogware Mechanic: Translating the Calendar Component ............................................. 45
   Blogware Mechanic #3: How Do I Put a YouTube Video Into a Blog Entry? ............ 52
   Linking to the YouTube Video's Page .......................................................................... 52
   Embedding the YouTube Video ................................................................................... 54
     Special Note for Rich Text Editor Users .................................................................. 58
Blogware Mechanic #4: Breaking Away from Table-Based Layout, Part 1 .................... 59
   Blogware's Table-Based Layout ................................................................................... 61
     Table-Based Layout's Disadvantages ....................................................................... 62
     Implications of Table-Based Layout for Mobile Browsers ...................................... 63
     Implications of Table-Based Layout for Visually-Impaired Readers ....................... 64
     Implications of Table-Based Layout for Search Engines ......................................... 64
     Implications of Table-Based Layout for Readers Using Desktop or Laptop
     Computers With Regular Browsers .......................................................................... 65
     Recommended Reading ............................................................................................ 65


                                                                                                                                       i
    What's Coming Up Next ........................................................................................... 65
  Blogware Mechanic #5: Breaking Away From Table-Based Layout, Part 2 ............... 67
  My Proposed CSS-Based Layout.................................................................................. 67
  Check to See if You Can Customize Your Blog's Templates ....................................... 69
    Blogware's Templates ............................................................................................... 71
    The Base Template ................................................................................................... 74
    What's Coming Up Next ........................................................................................... 76
Blogware Mechanic #?: Blogging for Dollars, Part 1....................................................... 77
  The Cocktail Party Pitch (A True Story) ...................................................................... 78
  AdSense ........................................................................................................................ 79
    How Adsense Works (The Quick and Dirty Version) .............................................. 80
  How Much Money Can You Make? ............................................................................. 81
Blogware Mechanic #?: Blogging for Dollars, Part 2....................................................... 83
  Getting an AdSense Account ........................................................................................ 84
    Website Information ................................................................................................. 84
    Contact Information .................................................................................................. 85
    Product Selection ...................................................................................................... 85
    Policies ...................................................................................................................... 86
    Once You've Filled Out the Form... .......................................................................... 86
  Putting AdSense on Your Blog ..................................................................................... 87
    Logging In ................................................................................................................. 87
    Once You're In .......................................................................................................... 87
  Making an Ad Unit ....................................................................................................... 89
  Putting AdSense into Your Blog's Layout .................................................................... 93
  Congratulations! ............................................................................................................ 97
Blogware Mechanic #?: Introducing the Heat Map (Blogging for Dollars, Part 3) ......... 98
  Where to Place Your AdSense Ads .............................................................................. 98
  The Hottest Spots in the Sidebars, Header and Footer ................................................. 99
    Left Sidebar, Upper Portion ...................................................................................... 99
    Left Sidebar, Lower Portion and Right Sidebar, Upper Portion ............................. 101
    Header, Left and Center Portions............................................................................ 102
    Forget the Footer ..................................................................................................... 104
  But What About the Hottest Spot?.............................................................................. 104




                                                                                                                                    ii
Introduction
The Blogware Mechanic was a series of blog articles written by Joey deVilla and
published between March 2005 and October 2007. The articles are collected here and
presented "as published" in an attempt to maintain the accessibility they enjoyed in their
original medium. We know you will find them useful, we hope you enjoy them.

Please note that due to a numbering sequence conflict the Article Numbers may differ
from those assigned the original blog publication. The articles are arranged conceptually
based on a ratification of the column in 2006 when a couple of introductory columns
were written after the fact. These columns lead off this collection, followed by the
remaining articles in chronological order from the date of the first article published.

Due to the ever-changing nature of the internet, we cannot guarantee that all references
and hyperlinks are current or even active. However, we are confident that the content of
the Blogware Mechanic will continue to remain useful on its own merit.




                                                                                             1
Blogware Mechanic #1: Basic Blog
Customization, Part 1
November 29th, 2006 | Written by Joey deVilla

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.




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




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:




                                                                                        3
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:




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




 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.




                                                                                          5
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:




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




                                                                                       7
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:




                                                                                          8
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.




                                                                                           9
Blogware Mechanic #2: Basic Blog
Customization, Part 2
December 4th, 2006 | Written by Joey deVilla
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”.




                                                                                        10
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.)




                                                                                           11
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.




                                                                                        12
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).




                                                                                           13
What we'll cover in this article are the Component Layout controls. The first things 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.




                                                                                          14
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.



                                                                                         15
      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 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


                                                                                          16
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:




                                                                                      17
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
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:




                                                                                        18
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…




                                                                                         19
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.


                                                                                          20
Blogware Mechanic #3: Customizing Your
Permalink Icons
March 30, 2005 | by Joey deVilla

When looking at articles on your blog's main page or category pages, you'll notice that
there's an icon beside the title of each article. By default, it looks like a page with the
upper right-hand corner folder over. It's called a permalink icon, and an example is
shown below:




It's called a permalink icon because it's a permanent link to the article. If you click on it
(or as web techies like to say, "follow the link"), you'll get taken to the article's article
page, which contains:

      the full text of the article
      any comments for the article
      any trackbacks for the article
      the comments form, if comments are enabled

If you've been reading blogs for a while, you're probably familiar with the concept of the
permalink icon. What you might not know is that you're not stuck with the default
graphic for the permalink icon. Take a look at the main page of this blog, my personal
blog (The Adventures of Accordion Guy in the 21st Century) or the blog IndieGameDev:
they all have customized permalink icons.

With only a little work, you can use any graphic as your permalink icon. The procedure
consists of three steps:

           1. Choose a graphic for your permalink icon
           2. Upload the graphic to your blog's file system
           3. Edit the "category" template of your blog




                                                                                                21
Don't be intimidated by the lengthiness of the text in these instructions. I'm just being
thorough, explaining some background principles along the way. You'll find that the
procedure doesn't take more than a couple of minutes and is easier than it looks.

Step 1: Choose a Graphic for your permalink icon
You'll need a graphic to use as your permalink icon. You can either create a graphic using
your favorite image-editing software or use one from the many shareware or freeware
icon sites. This article will provide a set of icons that you can use, just in case you haven't
got a graphic that you want to use as a permalink icon.

Although there are no hard and fast rules for what size they should be, they should be
relatively small. A permalink icon that's too large will take your readers' attention away
from the article, but one that's too small will be hard to click on. Generally, you want the
permalink icon to be around the same size as your headline font. In the example below,
the headline text is 18 pixels, and the icon is 24 pixels by 24 pixels:




In case you don't have a graphic that you think would be suitable for use as a permalink
icon, I've created one in a number of colors and put them below. Feel free to copy any
and all of them:




(You can copy any of the graphics above to your hard drive by right-clicking on it -- if
you have a Mac and a one-button mouse, hold down the ctrl key and click on the icon --
and selecting Save Picture As... or Save Image As... from the menu that appears.)

Step 2: Upload the Graphic to Your Blog's Filesystem
"My blog's what?" you might ask. Let me explain.

Every Blogware blog comes with a filesystem, which is a fancy way of saying "a place to
store files". The filesystem in your blog is similar to the filesystem that your computer
has: it's arranged as files and folders. The filesystem has all sorts of uses that I'll cover in
a future Blogware Mechanic article; for now, we're going to use it as a place to store your
custom permalink icon.

We'll access your blog's filesystem through your Publisher Control Panel. If you haven't
done so yet, log into your Publisher Control Panel. Then, click the File Manager tab on
the Navigation Bar. You'll be taken to the File Manager page.


                                                                                             22
On the left side of the page, you should see a column that looks something like this:




This is a graphical representation of your file system, similar to the way the file system is
represented in Windows and Linux, and to a lesser degree, on the Mac. "Home" is the
master folder into which all your files and folders go; in a brand-new blog, it's the only
folder in your system.

Although you can put the graphic that will be your permalink icon anywhere in your file
system, I'm going to show you a little convention I use. In my blogs, I put any graphics
that are part of the layout into a folder called "layout", to keep them separate from other
sorts of graphics. To create the layout folder, type layout into the Create subdirectory
textbox (located in the Options form on the page) and click the Create button:




This will create a folder called layout as an immediate subfolder of the Home folder. The
column on the left side of the page should look something like this:




                                                                                           23
We now want to go to the layout folder, which we do by clicking on the word layout:




You'll know that you're in the layout folder because the word layout is highlighted in the
left-hand column and the File and Directory Listing form will indicate that you are in
the layout folder:




Once you're in the layout folder, you can put your permalink icon file inside it by using
the Upload New File form located near the right side of the page. Use the Browse...


                                                                                        24
button to locate the file for your icon on your hard drive, then click the Upload button to
copy the file from your hard drive to the layout folder:




Once the icon is uploaded, you should see it in the File and Directory Listing portion of
the page:




Now that the file is in your filesystem, you'll want to make a copy its location for the next
step. The easiest way to do this is to right-click (or control-click on the Mac) on the
fiilename and select Copy Shortcut or Copy Link Location from the menu that appears.

Step 3: Edit the "category" Template of Your Blog
Templates are a very powerful feature of Blogware-based blogs -- they control the layout.
I could write at least a dozen articles on what you can do with templates, but for now,
we'll simply concentrate on the category template, which controls the layout of articles
on the main page and the category pages of your blog.

You edit your blog's template in the Templates page of the Look & Feel section of the
Publisher Control Panel. To get there, click the Look & Feel tab of the Navigation Bar
and then click the Templates option of the Look & Feel tab:




                                                                                          25
(If the Templates option is not available, contact your Blogware reseller.)

You should see a list of templates like the one below:




You want to edit the category template. Do this by clicking the Edit link in the category
row. You will be taken to the Select Style page -- click the Customize button near the
bottom:




You'll now be in the Edit Template page. Click the Go button to access the template
code:




                                                                                        26
You will be taken to a page with a text area that looks like the one shown below:




The text area contains the code for the template that defines what the main and category
pages of your blog look like. This code is a mix of HTML and Blogware's built-in
scripting language, BOTS. You can identify the BOTS parts quite easily -- they're the
parts contained within the double braces like so:




                                                                                       27
{{this is BOTS code}}

Blogware uses your blog's templates as a guide for constructing the pages of your blog.
Whenever it encounters BOTS code, it treats them as instructions and replaces it with the
appropriate HTML. (I'll cover BOTS in upcoming installments of Blogware Mechanic.)

Look for a snippet of code that looks like this:

{{if restricted}}
<a href="{{view_url}}"><img src="/_images/locksm.gif"
width="7" height="10" border="0" alt="Locked"></a>&nbsp;
{{else}}
<a href="{{view_url}}"><img src="/_images/page.gif"
width="13" height="13" border="0" alt="View
Article"></a>&nbsp;
{{/if}}

What this code says is:

For each article do the following:

      If the article is a restricted article, use the built-in "padlock" icon (located at
       /_images/locksm.gif) as the permalink icon for the article. The permalink
       icon is linked to {{view_url}}, which Blogware automatically replaces with
       the URL of the current article.
      If the article is not a restricted article, use the built-in "page" icon (located at
       /_images/page.gif) as the permalink icon for the article. The permalink
       icon is linked to {{view_url}}, which Blogware automatically replaces with
       the URL of the current article.

For now, we'll simply use the same icon as the permalink icon for both restricted and
unrestricted articles. Replace the code shown above with the following:

<a href="{{view_url}}"><img src="PASTE HERE" width="WIDTH
OF ICON" height="HEIGHT OF ICON" alt="Permalink
icon"></a>&nbsp;

Replace PASTE HERE with the location of your icon. You copied that location at the
end of Step 2. Replace WIDTH OF ICON with the width of the icon, in pixels. Replace
HEIGHT OF ICON with the height of the icon, in pixels.
In the case of this Blogware blog (blog.blogware.com), the code used looks like this:

<a href="{{view_url}}"><img
src="http://blog.blogware.com/images/layout/permalink_icon_
article.gif" width="24" height="24" alt="Permalink
icon"></a>&nbsp;


                                                                                         28
Once you've made the change, click the Save and Activate button:




Your template will be updated, and the process of changing your permalink icon is
complete.

Check the result by viewing your blog!




                                                                                    29
Blogware Mechanic #2: Favicons and
Filesystems
April 1, 2005 | by Joey deVilla

A number of web sites have their own custom icons that appear in the address bar (that's
the text field in which you enter the URL or "web address" of the site you want to visit).
All sorts of web sites -- from the major ones like CNN, Amazon, eBay and Google to
personal home pages -- make use of these custom icons.

Pictured below is what a site with its own icon (my blog) looks like in the Firefox
browser on Mac OS X (it should look similar on Windows or in Internet Explorer). Note
that the icon appears in both the address bar and in the tab in which my blog is being
displayed:




Compare this with how a site without its own icon looks. Both the address bar and in the
tab in which the site appears simply display a generic icon:




                                                                                         30
In Windows, a site's custom icon also appears in the Bookmarks or Favorites list beside
the site's name if it is bookmarked. If the site doesn't have a custom icon, a generic icon is
used instead:




These custom icons are often called favicons -- short for favorites icon and named for the
fact that it is displayed in the Favorites (or bookmarks) list of your browser. This article
will look at creating and installing custom icon for your blog.



                                                                                           31
Creating a Favicon
Favicons are tiny, being a mere 16 pixels high and 16 pixels wide. Favicons were
originally implemented by Microsoft for Internet Explorer and hence were Microsoft
Windows icon (.ico) files. Nowadays, all modern browsers support favicons, which can
now be in .ico, .gif or .png format. For the purposes of this article, we'll make a favicon
the easy way: we'll take a graphic and convert it into an .ico file.

The simplest way to convert a graphic into a favicon is to use the FavIcon from Pics site.
It lets you choose a picture file from your hard drive and creates a favicon based on it.

It's easy to use: once you have a graphic (in .gif, .jpg or .png format) that you want to turn
into a favicon on your hard drive, go to the FavIcon from Pics site. Click the Browse...
button to select the graphic, then click the Generate FavIcon.ico button to create the
favicon:




The site will create the favicon based on your graphic and show a preview for you to
approve. If you like the result, click the Download Favicon button to download the
newly-created favicon:




                                                                                              32
The favicon will be compressed inside a .zip file. Its name should be favicon.ico. Extract
your favicon from the .zip file.

Upload the Favicon to Your Blog
The original way in which favicons worked was that Internet Explorer, whenever
downloading a page from a web site, also attempted to download a file called
"favicon.ico" from the web server's top level or "root" folder. To take advantage of this,
we're going to upload the favicon you created to the top level folder of your blog's
filesystem.

(Modern browsers still use this method, although there's a method that's more in line with
web standards. Wikipedia's entry on favicons has the details.)

To upload the favicon to your blog, log into the Publisher Control Panel and click the
File Manager tab in the Navigation Bar:




Make sure that the Home folder is the current folder:




                                                                                         33
Then upload the favicon.ico file:




Now view your blog. You should see the favicon appear in the address bar of your
browser.

Your Blog's Filesystem
The Home folder -- the top-level folder -- of your blog's filesystem corresponds to the
URL of your blog. For example, if your blog's URL is

http://myblog.myblogwareprovider.com/

then the URL of your Home folder is also

http://myblog.myblogwareprovider.com/

If your Home folder contains a favicon.ico file, the URL for that file is

http://myblog.myblogwareprovider.com/favicon.ico

...and if you were to type that URL into your browser's address bar, you'd be taken to a
mostly-empty page containing your favicon.

If your Home folder contains a directory called layout, the URL for that directory would
be

http://myblog.myblogwareprovider.com/layout/




                                                                                           34
At this point, it may seem to you that the filesystem of your blog is awfully similar to the
filesystem of an ordinary web site. In fact, that's the case.

What this means is that you can use the filesystem of your blog to hold all kinds of things
-- not just icons for your permalinks or favicons, but also:
     Picture files for inclusion in your blog entries
     Shockwave flash animations
     Banner ads
     Sound files
     Your resume in PDF or Microsoft Word format
     PowerPoint presentations
     MP3 files
     HTML pages
    
In the next installment of Blogware Mechanic, we'll cover some uses of your blog's
filesystem.




                                                                                          35
Blogware Mechanic #3a: Including Pictures in
Your Blog Entries, Part One
May 31, 2005 | by Joey deVilla

A Quick Review
Every Blogware blog comes with a filesystem -- a space in which you can store files of
any type: pictures, sounds, Flash files, Word or Excel documents and so on.

You access your filesystem via the File Manager, which allows you to:

      View the files in your blog's filesystem
      Add new files to your blog's filesystem
      Change the name of any file in your blog's filesystem
      Delete any file from your Blog's filesystem

You get to the File Manager by clicking on the "File Manager" tab in the Navigation Bar
of your Publisher Control Panel. The File Manager page is shown below (click the
picture to view it at full size):




                                     The File Manager.



Including Pictures in Your Blog Entries
Many people have asked me "I know how to put a picture into my Blogware photo
albums, but how do I include a picture in my blog entries?"

There are a number of ways to do this. One way consists of these two steps:

      Upload a picture to your blog's filesystem
      Include that picture in your blog entry


                                                                                         36
Uploading a Picture to Your Blog's Filesystem
The Upload New File box on the File Manager page contains all the controls you need to
upload a picture to your filesystem. Click the "Browse" button to select the picture on
your computer that you wish to upload:




A window titled "File Upload" will pop up. Use this window to select a picture to upload,
then click the "OK" button.

Once you have selected the picture, click the "Upload" button, as shown below:




                                                                                      37
You will have a short wait (the length of which depends on the size of the picture), after
which the page will reload and the file you just uploaded will appear in the File and
Directory Listing, as shown below:




                         The File and Directory Listing, showing the file you just uploaded.


Now that the picture is in your filesystem, it's time to post a blog entry containing it.

Posting a New Entry from the File Manager
Every file in the File Manager has a "Blog This" icon in its row. Clicking this icon will
take you to the "Post Entry" page and include the file within the entry.

Let's do this. Click the "Blog This" icon for the file you just uploaded, as shown below:




                                           Clicking the "Blog This" Icon.


You will be taken to the "Post Entry" page. If you look at the "Article Body" section,
you'll see that the picture has already been automatically included in the entry!




                                                                                               38
                          The "Post Entry" page after clicking the "Blog This" button.


You can now write your blog entry around the picture, putting text before or after it.
When you publish the entry, it should look something like this:




                                  The published entry, complete with picture.




                                                                                         39
Blogware Mechanic #3b: Including Pictures in
Your Blog Entries, Part Two
June 1, 2005 | by Joey deVilla

Yesterday, I showed you how to include a single picture in your blog entries. Today, I'll
show you how to include multiple pictures in a blog entry.

To recap, including a single picture in a blog entry is a matter of:

      Uploading a picture to your filesystem
      Clicking the "Blog This" icon for that picture, which creates a new blog entry and
       includes that picture within the blog entry

Adding another picture to the blog entry is a matter of adding one more step to this
procedure:

      Clicking the "Insert Image" button for subsequent pictures, providing the location
       of the picture each time.

Adding many pictures to a blog entry is made easier if you use two browser windows. It's
even easier if you have a browser with a tabbed interface, like Firefox or Opera.

Adding the First Picture
Upload your pictures to the file system. Once that's done, right-click on the "Blog This"
icon for the first picture you want to include. A pop-up menu will appear.

If you are using Internet Explorer as your browser, the item you want to pick is "Open
Link in New Window". Clicking on this menu item will open a new window, which will
contain the "Post Article" page; the "Article Body" area will contain the image you
selected:




                                                                                        40
If you are using a tabbed browser like Firefox, choose "Open Link in New Tab". Clicking
on this menu item will open a new tab, which will contain the "Post Article" page; the
"Article Body" area will contain the image you selected:




Here's what the "Post Article" page will look like:




Adding Subsequent Pictures
Since clicking on the "Blog This" icon causes a new article to be created, you can use it
only once per article. Luckily, we have the "Insert Image" button, which is in the toolbar
of the "Article Body" area. Clicking on it causes a pop-up window to appear; you enter


                                                                                        41
the location of the picture into it.

The two-window (or two-tab) approach makes it simple to add multiple pictures to a blog
entry. One window (or tab) contains the "Post Article" page, into which you insert the
pictures, while the other contains the filesystem page, from which you will copy the
locations of the pictures.

Let's add a second picture to the article. Do this by going to the tab or window containing
the filesystem page and copy the location of the second picture.

Here's how you do it using Internet Explorer:




                                                                                         42
...and here's how you do it using Firefox:




Now that we've copied the location of the second picture, let's go back to the "Post
Article" page. Move the cursor to the location in your article where you want to put the
second picture and click the "Insert Image" button:




                                                                                           43
A pop-up window will appear. Paste the location of the picture (which you copied from
the filesystem page) into the text box marked "Enter the full URL of the image". Click
the "Submit" button.




The window will disappear. You will see that the Article Body area now includes the
second picture:




You can repeat this step for as many pictures as you please.




                                                                                      44
Blogware Mechanic: Translating the Calendar
Component
January 6, 2006 | by Joey deVilla

We're working hard on making Blogware available in a number of languages. In the
meantime, for those of you who want the Calendar component to be in a language other
than English (or Spanish as of January 10th), here's a quick fix that changes its language.
So if the fifth month of 2005 displays on your blog like so:




...I'll show you how you can customize the component so it displays like this:




Let's start with German.

First, here's a quick reminder of what the names of months in German are. Note that
some of them are spelled the same as the English equivalent.
Englisch     Deutsch
January     Januar
February    Februar
March       März
April       April
May         Mai
June        Juni
July        Juli
August      August



                                                                                         45
September September
October    Oktober
November November
December Dezember

Here are the German days of the week:

 English                   Deutsch                  Abbreviation
Monday      Montag                                  Mo
Tuesday     Dienstag                                Di
Wednesday Mittwoch                                  Mi
Thursday    Donnerstag                              Do
Friday      Freitag                                 Fr
            Samstag
Saturday                                         Sa
            (Sonnabend in some parts of Germany)
Sunday      Sonntag                                 So


To create a custom component, you need to go to the Publisher Control Panel and select
the Look and Feel section. Within that section, select Layout.




                                                                                     46
Once you're on the Layout page, select the Components tab. The page should now look
something like this:




In this case, we want to customize an existing component, the Calendar component. In
the list marked System Components, click the Customize link that corresponds to the
Calendar component. The Add Custom Component window will appear:




                                                                                       47
The Content text box determines what appears inside the Calendar component.

The names of the days are right in the HTML in the content text box. The part of the
HTML that defines them looks like this:
<td   class="componentCalendarDayname">Sun</td>
<td   class="componentCalendarDayname">Mon</td>
<td   class="componentCalendarDayname">Tue</td>
<td   class="componentCalendarDayname">Wed</td>
<td   class="componentCalendarDayname">Thu</td>
<td   class="componentCalendarDayname">Fri</td>
<td   class="componentCalendarDayname">Sat</td>
Simply change the "Sun", "Mon" and other English day name abbreviations to the ones
for the language you want to use. In the case of German, the code should look like this:
<td   class="componentCalendarDayname">So</td>
<td   class="componentCalendarDayname">Mo</td>
<td   class="componentCalendarDayname">Di</td>
<td   class="componentCalendarDayname">Mi</td>
<td   class="componentCalendarDayname">Do</td>
<td   class="componentCalendarDayname">Fr</td>
<td   class="componentCalendarDayname">Sa</td>
Changing the month displayed is trickier. That's because the Calendar component
displays the current month for the articles being viewed. For example, if you're viewing
today's articles, today being January 6, 2005, the Calendar component will display
"January". If you're viewing last August's articles, it will display "August".




                                                                                           48
The bit of Calendar component code that displays the month name is shown below:
<tr>
<th colspan="7">{{calendar.month}} {{calendar.year}}</th>
</tr>
{{calendar.month}} is a template variable. When Blogware generates a blog page, it
replaces template variables with the values they contain. {{calendar.month}} gets
replaced with the English name of the month corresponding to the article the reader is
currently reading.

We can use a little JavaScript to make a translator that converts English month names to
the language of our choice. In this case, let's go with German.

To do this, we'll replace:

{{calendar.month}}

with this:

<script language="javascript"><!--
englishMonth = "{{calendar.month}}";
if (englishMonth == "January") germanMonth = "Januar";
else if (englishMonth == "February") germanMonth = "Februar";
else if (englishMonth == "March") germanMonth = "März";
else if (englishMonth == "May") germanMonth = "Mai";
else if (englishMonth == "June") germanMonth = "Juni";
else if (englishMonth == "July") germanMonth = "Juli";
else if (englishMonth == "October") germanMonth = "Oktober";
else if (englishMonth == "December") germanMonth = "Dezember";
else germanMonth = englishMonth;
document.writeln(germanMonth);
--></script>

Once you've done this, click the Add Component button to save your changes.

You've just created a custom Calendar component. However, you're not done yet; you
still have to add it to your blog's layout. Go to the Columns tab on the Layout page.




                                                                                         49
In the Inactive column, you'll find your newly-created Custom calendar component; it'll
be labelled Custom: Calendar. Drag it to the layout of your blog.




The original calendar will still be in your layout, so you need to put it away. Drag it to the
Inactive column:




                                                                                           50
Click the Save button at the bottom of the page, and go look at your blog -- your calendar
should be active!


Note that some of the names for months are spelled the same in English and German.
This means that I wrote code that translated only those month names that differed
between the two languages. In the case of languages with months completely unlike
English, you should write JavaScript code that translates each month. For example, this
code translates to Pig Latin:

<script language="javascript"><!--
englishMonth = "{{calendar.month}}";
if (englishMonth == "January") pigLatinMonth = "Anuaryjay";
else if (englishMonth == "February") pigLatinMonth = "Ebruaryfay";
else if (englishMonth == "March") pigLatinMonth = "Archmay";
else if (englishMonth == "April") pigLatinMonth = "Aprilyay";
else if (englishMonth == "May") pigLatinMonth = "Aymay";
else if (englishMonth == "June") pigLatinMonth = "Unejay";
else if (englishMonth == "July") pigLatinMonth = "Ulyjay";
else if (englishMonth == "August") pigLatinMonth = "Augustyay";
else if (englishMonth == "September") pigLatinMonth = "Eptembersay";
else if (englishMonth == "October") pigLatinMonth = "Octoberay";
else if (englishMonth == "November") pigLatinMonth = "Ovembernay";
else if (englishMonth == "December") pigLatinMonth = "Ecemberday";
else pigLatinMonth = englishMonth;
document.writeln(pigLatinMonth);
--></script>




                                                                                          51
Blogware Mechanic #3: How Do I Put a YouTube Video
Into a Blog Entry?
December 8th, 2006 | Written by Joey deVilla

 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.




                                                                                          52
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 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:




                                                                                         53
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 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.

Embedding the YouTube Video
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.

                     <<missing element from original blog posting>>




                                                                                              54
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:




                                                                                          55
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:




                                                                                    56
The video will now be embedded in your blog entry.




                                                     57
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:




                                                                                      58
Blogware Mechanic #4: Breaking Away from
Table-Based Layout, Part 1
January 9th, 2007 | by Joey deVilla

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,



                                                              59
      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.




                                                                                          60
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:




                                                                                         61
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


                                                                                        62
“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


                                                                                             63
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



                                                                                             64
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:
            o Yahoo! stops indexing after reading 210K of page data
            o Google stops indexing after reading 520K of page data
            o 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

                                                                                          65
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.




                                                                                      66
Blogware Mechanic #5: Breaking Away From Table-
Based Layout, Part 2
January 11th, 2007 | by Joey deVilla

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:




                                                                                   67
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!



                                                                                           68
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:




                                                                                         69
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:)




                                                                                          70
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:




                                                                                      71
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
                                              What It's For
   Name
                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
article         and attachments.

                This template refers to the comments and trackback templates.
                Set the overall layout of all pages in the blog.
base
                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


                                                                                          72
                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.
             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
category     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.
             Sets the layout of the comments within Article, Book Review, Movie
comments
             Review, Music Review and Photo pages.
             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,
movie_review
             trackbacks and attachments.

             This template refers to the comments and trackback templates.
             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,
music_review
             trackbacks and attachments.

                This template refers to the comments and trackback templates.
                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
photo
                comments, trackbacks and attachments.

                This template refers to the comments and trackback templates.
                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
photoalbum      a photo album takes you to that photo's individual Photo page.

                Photo albums are to photos what categories are to articles and reviews.
                Set the layout of the main content section of “By Day” Photo Album
photoalbum-
                pages — a special case of photo album where photos are grouped by the
byday
                day they were posted.
rss_feed        Sets the layout of RSS feed components.
style           Contains the CSS style sheet for the blog.
                Sets the layout of the trackbacks within Article, Book Review, Movie
trackbacks
                Review, Music Review and Photo pages.




                                                                                               73
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:




                                                                                          74
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!




                                                                                          75
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!




                                                                                          76
Blogware Mechanic #?: Blogging for Dollars,
Part 1
August 10, 2006 | by Joey deVilla

Welcome to the return of The Blogware Mechanic, a regular series of articles
in which I'll show you all sorts of tips and tricks to get the most out of your Blogware-
based blog.
Since this is a return after a long hiatus, I thought I'd start with a fairly splashy topic;
something nice and attention-getting. How 'bout this?:




That's right: what I'm going to do is show you how to make a little money off your blog.
But first, let me tell you a story...




                                                                                          77
The Cocktail Party Pitch (A True Story)
It all started at a cocktail party for nerds (yes, such things exist). I won't go into the
details of the party, other than the fact that a large software corporation had hired a
boutique PR company to throw the shindig. This meant that the snacks -- and more
importantly, the drinks -- were free. This probably explains why my friend was a mite
tipsy when he approached me.

"How come you're not blogging full-time?" he asked. "Your blog's good. You get lots of
hits. You could make a killing!"

Oh wow, is he drunk, I thought. I figured it was the bloggy equivalent those
druken moments when a buddy comes up to you and says "I love you, man." At least I
was dealing with a happy drunk.

"I don't think so," I said. "Boing Boing -- I can see that making a lot of money, but not
my blog."

"How many pageviews d'you get on your blog?"

"I average about 3,500, maybe 4,000 a day," I replied, "with the occasional spike on a
good day."

"You can make money, then."

"Why? How much do you make off your blogs?"

"I make my living off my blogs, dude."

A living?

I should make it clear at this point that my friend does not live in a single-room apartment
in a nearly-condemned tenement building, nor does he subsist on ramen noodles (the
starving student's best friend). He's got a house, a wife and kids, a car and all the other
stuff that you'd associate with suburban living.

"Just off the ads?" I asked. His were regular blogs; none of his pages were behind any
kind of for-pay "firewall". I didn't remember seeing any kind of "tip jar" either, which left
advertising as the most likely possibility.

"Yup, just off the ads," he replied.

I tried to think of how often I clicked on an ad on a web page. Maybe once a week,
maybe once a month. Not often anyway. I couldn't imagine making more than a few
pennies a month off ad clicks.


                                                                                            78
We talked for a little bit longer, and my friend gave me a few extra suggestions on how to
go about making money from my blog. After I left, I decided that I'd give it a try.

The idea of harnessing a hobby to make a little extra spending money isn't new to me. I
play rock and pop tunes on the accordion as a hobby, and from time to time, I play on the
street. With a hat tossed down for tips, many passers-by don't mind tossing me one- and
two-dollar coins (I'm in Canada), and those coins add up. On a good night, I can make
enough money to buy dinner for two at a decent steakhouse. Maybe I could do something
similar with my blog.

I decided that to follow the tried-and-true business strategy of taking a look at my friend's
blogs and doing exactly what he did. I visited his blogs -- has has about a half dozen --
and they all relied exclusively on Google AdSense ads.

AdSense
Chances are that you're already familiar with Google AdSense ads. They're those ads that
seems to be on every other other website and are marked with a text link that reads "Ads
by Goooooooogle". They take on a number of forms, like the ones shown below.

Here's the "468 by 60" banner:




...here's the "120 by 240" vertical banner:




                                                                                          79
...and here's the "250 by 250" image ad:




How Adsense Works (The Quick and Dirty Version)
I used to work with at a company founded by an advertising executive, and I remember
him always saying "It's not that people hate ads; it's that they hate ads that aren't
relevant to them".

AdSense tries to provide relevant advertising by displaying ads that are related to the
content of the page they are on. This is possible because AdSense, being owned by
Google, has access to Google's data store, which has data on most of the publicly-
accessible web pages in existence. AdSense uses the data that Google has on that page to
determine what sort of ad to show. Here are a couple of quick examples: When I blogged
about accordions, AdSense started displaying ads for accordion stores, accordion repair
shops and accordion lessons. When I blogged about how silly people look on pocket
bikes, AdSense showed advertisements for motorbikes (of both the regular and pocket
variety) and helmets.

When you put AdSense on your blog, you make money based on the number of clicks the
AdSense ads get and the number of people that visit your site. I'll go into the details in a
later article, but in the meantime, it boils down to these rules:

      If people visit your site, you make some money.

      If people click on the ads on your site, you make more money.

Google will send you a check (or alternately, direct-deposits money into your bank
account) at the end of the current month whenever you accumulate $100 or more.




                                                                                         80
How Much Money Can You Make?
It's hard to say. There are so many factors that enter into the equation.

I could cite my own earnings from the very short time I've used AdSense, but the terms
and conditions of joining the AdSense program specifically prohibit you from
announcing how much you've earned.

Luckily, there are a few people on the net who have provided examples without
mentioning specific blog names. Darren Rowse at problogger.net has written about the
AdSense earnings of three unnamed blogs with which he is involved:



         Pageviews
 Blog              Earnings from AdSense
         per month
Blog A 20,000         $790.91
Blog B 40,000         $99.08
Blog C 160,000        $515.12
As you can see, there isn't a direct correlation between pageviews and revenues from
AdSense. Pageviews help, but clicks on ads are where the money's at.

A Washington Post article titled A New Model For Getting Rich Online cites several
examples:
    PodcastDirectory.com grew from a site from 100 hits a month in 2004 to getting a
      million per month -- it earns about $30,000 to $40,000 a year, "the equivalent of
      an entry-level government worker's salary".

       Two 20-year-olds cashed in on the MySpace phenomenon by creating
        FreeWebLayouts.net, where people can download designs to customize their
        MySpace pages. Their AdSense revenues: $100,000 a month. Not bad for a year-
        old site.

       A guy who flies often created SeatGuru, a site provides information on various
        airlines' seats, such as which ones have the most legroom and recline, which ones
        provide audio and video in-flight entertainment, which ones have laptop power,
        and so on. He makes about $10,000 to $20,000 a month from AdSense.

While these stories are of exceptional cases, these people didn't do anything that most
people couldn't do: create a list of podcast sites, create a bunch of templates for web
pages and collect information about airline seats. Sometimes the simplest ideas are the
most successful.




                                                                                          81
At the very least, a blog that gets a few hundred hits a month should be able to cover its
own hosting expenses; a blog that gets a few thousand hits a month should be able to
meet the threshold to get a Google check at the end of each month, which is enough to
give yourself a new computer or plane tickets for a decent-haul trip every year for your
birthday.
If at this point you're salivating at the thought of making a little extra money by
harnessing your existing blog or starting one, tune in tomorrow for the second part in this
series!




                                                                                         82
Blogware Mechanic #?: Blogging for Dollars,
Part 2
August 11, 2006 | by Joey deVilla


Welcome to the second part of Blogging for
Dollars, a series of articles that cover how to
make money with your Blogware-powered blog
and Google's Adsense.

In the previous article, I wrote about the
opportunities that AdSense provides to someone
with a blog. With a few hundred pageviews a
month, it's possible to cover the monthly charges
for your blog and make it pay for itself. With a
few thousand pageviews a month, you can
harness your blogging and make it generate
some decent spending money. With the right
topics or themes, you might even be able to
seriously supplement your income.

In this article, I say "enough with the theory, it's
time to make some money!" I'll cover the
process of getting an Adsense account and then
inserting AdSense into your Blogware-powered
blog.




                                                       83
Getting an AdSense Account
The first step is to get an AdSense account from Google. To do this, go to:

       http://google.com/adsense

You'll be taken to a page that will look something like this:




To enter the sign-up process, click the Click Here to Apply button. You'll be taken to
the sign-up form. It's divided into a number of sections, each one requiring a different
type of information about you or your blog. We'll go through them one by one.

Website Information
The first section is pretty simple: you simply tell them where to find your blog and what
language it's written in.




When you enter the URL (some people like to call it the "web address") of your blog into
the field marked Website URL, don't add the "http://" part. For example, when I signed


                                                                                        84
up for AdSense for my personal blog, I entered accordionguy.blogware.com
there.

Contact Information
The second section is for contact information, so that Google knows to whom they should
address and send the check.




When you enter the information for Country or Territory and Payee Name (that's
the person who should get the checks), make sure you don't make any mistakes. Those
can't be changed once the application process has begun.

Product Selection
The third section is for choosing which AdSense products you'd like to have on your
blog.




Check both. Right now, we're focusing solely on AdSense for Content, which are the
context-sensitive ads. I'll cover AdSense for Search -- which puts on "Search" function on
your site for which you get paid when it's used -- in a later article.


                                                                                       85
Policies
The fourth and final section is where you promise that you'll adhere to the terms and
conditions of being an AdSense member.




You have to agree to all the terms to become a member, which means you have to check
all those boxes. By checking all of them, you're making many promises, some of which
are:
      That you won't click on the AdSense ads on your own blog.
      That you won't tell people to click on your ads.
      That you won't put porn (and other content forbidden by the terms and conditions
        -- see here) on your blog.
      That you won't disclose how much your blog makes via Adsense.

Once You've Filled Out the Form...
Click the Submit Information button. Then it's time to play the waiting game.

(Cue that line from The Simpsons: "The waiting game sucks. Let's play 'Hungry
Hungry Hippos'.")

You won't have to wait too long. I've read on several sites that most acceptance/rejection
emails from the AdSense screening people arrive within 1 or 2 days of your clicking the
Submit Information button.

Once you've been accepted, you can proceed to the next step: inserting AdSense ads in
your blog!

(If you've been rejected, cheer up, and I'll cover what to do in a later article.)




                                                                                        86
Putting AdSense on Your Blog
Now that you've been accepted, the next step is to put AdSense into your blog. Although
there's going to be a lot of Blogware-specific material in this section, a lot of this is
applicable to other blogging software or web pages in general.

Logging In
The first step is to go to the AdSense main page (http://google.com/adsense) and log in
using the email address you provided when you signed up and the password emailed to
you by AdSense.




Once You're In
Once you've logged in, you'll see that the site is divided into three major sections:

   1. Reports: This section provides reports of your earnings. Since you haven't
      installed AdSense on your blog yet, this won't be useful to you right now.
   2. AdSense Setup: This section generates you the code that you need to place in
      your blog in order for AdSense to work. We'll be working in this section today.
   3. My Account: This section lets you review and change your account
      information, such as deatils about your blog, contact information and payment
      information.

Make sure that you're in the AdSense Setup section, which is shown below:




                                                                                          87
The page displays a number of AdSense services. Right now, we're only interested in the
ads, so click on AdSense for Content.




The AdSense for Content page provides two choices of AdSense unit: Ad units and
Link units. For the time being, let's concentrate solely on ad units. I'll cover link units
and the difference between them and ad units in a later article.




                                                                                          88
Select the Ad unit option and click the Continue button at the bottom of the page.
You'll get taken to a page that looks like this:




This page lets you select a format and a color set for your AdSense ads. Once you've
selected a color and a format, you'll be given a piece of JavaScript code that you insert
into your blog's layout.

Now it's time to create an ad unit.

Making an Ad Unit
At its simplest, creating an ad unit requires only two sets of selections. The first is to
select a format, which is done from the drop-down menu shown below:




                                                                                             89
If you need to see examples of the various formats available, click on the Ad Formats
link.
For this example, I'm going to choose 160 x 600 Wide Skyscraper. A number of
sites that cover AdSense suggest that ads in sidebars get more clicks than banner ads, and
the Wide Skyscraper is the largest ads that will fit in a sidebar. Here's what the Wide
Skyscraper looks like:




                                                                                        90
Once you've selected the format, the next step is to choose a color scheme. You do this in
the Colors section, which is shown below:




There are two ways you can choose a color scheme. The simplest way is to choose one of
the pre-defined color schemes from the drop-down menu:




The other way is to define your own color scheme using these controls. You can either
type in the color code of the colors you want to use...




...or, if you're a more visual sort, you can click on the color boxes and choose from the
palette that pops up:




                                                                                            91
No matter which way you choose your ad unit's colors, you can see a sample showing the
color you chose. The sample appears near the bottom left of the Colors section and
updates whenever you choose a new pre-defined color scheme or change a color:




Feel free to pick whatever color scheme or colors for your ad. As a general rule, you
should choose a color scheme or select colors that match those of your blog. In a later
article, I'll write about effective color choices.
Once you've chosen the color scheme or colors, click the Continue button at the bottom
of the page. You'll be taken to the final page, which contains the AdSense code:




                                                                                      92
This AdSense code needs to be inserted into the layout of your blog. If you click
anywhere inside the textbox marked Your AdSense Code, you'll select all the code.
Copy it (control-C on Windows and Linux, command-C on the Mac). If you like, you can
open a text editor or word processor and paste the code there.

Now that we have the code, it's time for the final step: putting it into your blog's layout.

Putting AdSense into Your Blog's Layout
(Note that this section is specific to Blogware and Blogware-powered blogs.)

The simplest way to place an AdSense ad unit into your blog is to place it in a custom
component. As a component, it will be easy to move to different places in your layout
once you've defined it. The ability to easily move ad units about is important because one
of the keys to success with AdSense is experimenting with ad placement.

Log into your blog's control panel and go to the Look & Feel section by clicking the
Look & Feel tab.




The page for editing components is in the Layout section, so click on the Layout below
the Look & Feel tab:




Now click on the Components tab:




                                                                                               93
Here's the part of the resulting page that's most important to us at the moment: the Add
Custom Component section. This is where we can create a new component, which is a
piece of code that we can easily move around the blog's layout. The Add Custom
Component section is shown below:




Give your component a name so that it's easy to identify. In this example, we'll give it the
name "Skyscraper Ad" by entering it into the Name textbox:




Now the slightly harder part: to enter the code that defines the component. Enter the
following into the Content textbox:

       <div class="component"></div>

Which looks like this in the control panel:




                                                                                         94
Note that those two lines are separated by a blank line. The blank line doesn't really do
anything except make the next step easier. The next step is to paste the AdSense code
into that blank line:




Now that we've defined the component, it's time to save it. Click the Add Component
button to save it. The page will reload and the component should appear in the Custom
Components list:




                                                                                            95
With a component defined and saved, there's only one step remaining: it's time to add it
to the layout. For this example, we'll add it to the top of the blog's left sidebar. To add
components to sidebars, we need to click the Columns tab:




This will give you a view of the components as they are laid out in the blog's left and
right columns. Since our new "Skyscraper Ad" component (in the page it appears as
"Custom: Skyscraper Ad") isn't in use yet, it's in the Inactive column:




To place our skyscraper ad at the top of the left sidebar, drag it from the Inactive column
to the top of the Left column. Here's what the page looks like while you're dragging the
component to its destination:




And here's what the page looks like when you've dropped it:




                                                                                          96
Now click the Save button at the bottom of the page. Once you've done that, the ad unit
will be in your layout at the top of the left sidebar. Take a look at your blog now: the
Skyscraper ad unit should now be at the top of the left sidebar:




Congratulations!
You've just placed an AdSense ad on your blog. Now it's a matter and waiting to see how
much money comes in.

To keep an eye on the action that your AdSense ad is getting, log into to the AdSense site
(http://google.com/adsense) and click the Reports tab. You'll be take to a page
that candisplay all sorts of reports showing how much money your AdSense ads have
earned.

Next time: I'll talk about AdSense reports and ad placement.




                                                                                       97
Blogware Mechanic #?: Introducing the Heat
Map (Blogging for Dollars, Part 3)
August 18, 2006 | by Joey deVilla
Hello, and welcome to the third installment of Blogging for Dollars, in which I'll cover
how to make money with your blog using Google's AdSense! In case you missed the
previous two installments, they are:

      Part One: In this article, I introduced the idea of using Google AdSense to harness
       your blog to make a little extra money.
      Part Two: In this article, I covered how to sign up for Google AdSense and how
       to put AdSense into your Blogware-powered blog.

Where to Place Your AdSense Ads
In the previous article, I showed you how to create a component that held a Google
AdSense ad unit. The Google AdSense term and conditions allow you to put up to three
AdSense ad units per page. You should create a separate component for each ad unit –
create each one as I showed you, and give each one its own name.

Once you've created the components, you might be wondering where the best places for
your ads are. In this case, by "best places", I mean the locations for your ads which make
it more likely that they will be clicked on. Remember, more clicks on those ads means
more money for you!

Google also makes money on those clicks, so this is a case where your interests and
Google's interests are aligned. Simply put: money money for you also means more
money for them. That's probably why they publish many useful articles for Google
AdSense users that show how to maximize clicks on their ads.

One of the first articles on Google ad placement that you should read is Where Should I
Place Google Ads on My Pages?. The main feature of this article is the "Google Heat
Map", shown below:




                                                                                           98
The heat map corresponds to the layout of a web page and is color-coded with red being
the hottest, orange being the second-most-hot, yellow being third-most-hot and white
being cold. The hotter an area, the better a location it is for ads.

The Hottest Spots in the Sidebars, Header and Footer
Left Sidebar, Upper Portion
In this article, we'll consider the header, sidebars and footer as possible locations for ads.
For these locations, the hottest part is the upper portion of the left sidebar. In the example
from the previous article, this is the location where I placed the ad.



                                                                                           99
This makes sense for blogs written in languages where you read from left to right and
from the top to the bottom of the page (such as English and European languages). For
readers of these languages, their eyes typically start at the upper left-hand corner of the
page.

To place an ad in the upper portion of the left sidebar, make sure you're on the Look &
Feel section, Layout page, with the Columns tab selected:




Drag one of your ad unit components from the Inactive column to the top of the left
column, then click the Save button at the bottom of the page. You'll now have an ad in
the upper part of the left sidebar.




                                                                                          100
Left Sidebar, Lower Portion and Right Sidebar, Upper Portion
The next-best locations are the lower part of the left sidebar and the upper part of the
right sidebar:




                                                                                           101
Header, Left and Center Portions
The left and center portions of the header are considered to be as hot as the lower part of
the left column and the upper part of the right column.

To place an ad in the header, make sure you're on the Look & Feel section, Layout page,
with the Header tab selected:




                                                                                        102
You can one of your ad unit components from the Inactive column to either the left or
center column, then click the Save button at the bottom of the page. You'll now have an
ad in the header.




                                                                                     103
Forget the Footer
As you can see, the bottom of the page is a bad location to place ads. Don't bother
dragging one of your ad components into the footer.

But What About the Hottest Spot?
All these are good locations for ads, but none of them are as good as the spot just above
the primary content. It's the reddest part of the heat map.

The problem is that Blogware doesn't let put components in the center column; it's strictly
for blog content.

That doesn't mean that it's impossible to place ads above the primary content; it just
means that there's more work involved. I'll cover it in the next article.

Unfortunately for the Blogware community, Joey deVilla never did write The Blogware
Mechanic. Ruby on Rails enticed him on a new journey in programming and we wish
him well.




                                                                                         104

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:9
posted:8/4/2012
language:
pages:107