Blog Harbor
Full Service Weblog Hosting
Main Page  »  How To
View Article  Blogging for Dollars, Part III: Introducing the Heat Map

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 I: In this article, I introduced the idea of using Google AdSense to harness your blog to make a little extra money.
  • Part II: In this article, I covered how to sign up for Google AdSense and how to put AdSense into your BlogHarbor-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:

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.

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.

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:

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:

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.

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 our templating system isn't designed to allow you to 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. If you're interested in learning how to add Google Adsense to your center area, post your question in our forums.

View Article  Blogging for Dollars, Part II: Setting up your Adsense Account

Welcome to the second part of Blogging for Dollars, a series of articles that cover how to make money with 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 BlogHarbor-powered blog.

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:

Google AdSense greeting page.

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.

'Website Information' section of AdSense sign-up form

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 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 know to whom they should address and send the check.

'Contact Information' section of AdSense sign-up form

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.

'Product Selection' section of AdSense sign-up form

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.

Policies

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

'Product Selection' section of AdSense sign-up form

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!

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

AdSense sign-in page

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:

AdSense Setup main page

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

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:

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:

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:

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

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:

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

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:

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:

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:

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:

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 takeN to a page that candisplay all sorts of reports showing how much money your AdSense ads have earned.

Next: Blogging for Dollars, Part III: Introducing the Heat Map.

View Article  Blogging for Dollars, Part I: An Introduction to Google Adsense

This series of articles, written by the one and only Accordion Guy Joey deVilla, explains how to make some money from your blogging by adding the Google Adsense service to your blog.

Laptop showing the text 'Money, money, money!' onscreen and with a $20 bill on the keyboard.

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

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.

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:

Example AdSense banner.

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

Example AdSense vertical banner.

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

Example AdSense sqaure 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.

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:

                                                                                                                                       
Blog Pageviews
per month
Earnings from AdSense
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.

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, check out Blogging for Dollars, Part II: Setting up your Adsense Account!

View Article  Customize the Look and Feel of Your Blog With CSS

A variety of Color Schemes are available which allow you to alter the look of your blog, its colors and fonts. If you're a do-it-yourself type, you'll eventually want to create your own custom "look" for your blog.

This article will skip the customary introduction to CSS and its concepts and dive right into making changes. I think you might find it more satisfying if you can start making changes to your blog's look by the end of the article.

For the technically inclined: This series of articles will cover editing the Style template of our template system. The Style template defines the CSS styles used by a blog.

Getting to the "Edit CSS" Page

Before you can start changing the look of your blog, you've got to be able to get to the page which allows you to do so. This page is called the Edit CSS page, and it allows you to define the CSS styles which determine the colors and fonts used in various elements of your blog.

Log into the Publisher Control Panel for your blog. You need to go to the Look and Feel section, which you can do by clicking on the Look and Feel tab of the navigation bar:



The Look and Feel section has three subsections: Colors, Layout and Templates. We want to go to the Templates page, so click on Templates in the Navigation Bar:




The Templates page lists all the templates for your blog. The templates are guides that tell our servers how to assemble your blog. You should be able to guess what some of the templates do just by their names; for example, you might have guessed (correctly) that the article template has got something to do with the way an article looks.

The template we're interested in is the style template. It appears second last in the list. We want to edit it, so click its Edit link.



You'll be taken to the Select Style page, which lets you choose one of the built-in styles or customize an existing one. This is the top portion of the page:



We're more interested in the bottom portion of the page, where you'll find a button marked Customize at the very bottom. Click this button.



You will now be on the Edit CSS page.

The Edit CSS Page

The Edit CSS page is split into three parts. Here's the top, which  shows you what the current them is and allows you to select a new one. You can use our built-in themes as a springboard for your own theme designs.



The middle portion contains the Current CSS text box, which contains the definitions for the current theme. You can't change this text; you can only read and copy it.



At the bottom of the page is the Custom CSS text field. This is where you enter the information for customizing your blog's theme.



Now for the fun part: the customizing!

Customizing the Look of Your Articles

If you use a word processor or desktop publishing software often, you're familiar with styles, which let you define a whole set of properties for text all at once: font, size, bold/italic/underline, color and so on. CSS stands for "Cascading Style Sheets", and the "style" in CSS is similar to styles in word processors and desktop publishing software, but it's for web pages.

Many elements of BlogHarbor blogs have a style associated with them. The style determines the look of the element; change the style, and you change that look. That's exactly what we're going to do today.

In order to make such changes, you need to know which styles are associated with which elements. Since articles tend to make up the lion's share of blogs, we'll experiment with changes to the look of article elements; these should produce some dramatic changes.

Let's take a look at some articles on the main page of a blog. In the picture below, the blog is using the built-in "Simply Red" theme. The styles associated with various elements of an article are pointed out:



Let's take a closer look at the styles and their corresponding elements:

Style Element
postDate
The date appears before any article or group of articles published on the same day. This style defines the look for that date.
articleTitle
Defines the look for the title of the article.
articleAuthor
Defines the look for the line that specifies the author of the article and when the article was published.
articleBody
Defines the look of the text making up the body of the article.
articleMore
With articles that make use of excerpts, only an excerpt of the article appears on the main page. The reader has to click the "more" link to read the whole article. This style defines the look of that "more" link.
articleStats
Defines the look of the statistics that list the number of comments and trackbacks the article received.


Changing the Article Body Font

Let's make some changes to those styles. The easiest way to do so is to copy the existing styles and then modify them.

You'll find all the styles for your blog in the Current CSS text box. If you scroll through this text box, you will find the definitions for the various styles that control the look of the elements of an article.



Let's take a look at the articleBody style. For a blog whose theme is currently "Simply Red", the style is defined by the following lines:
.articleBody {
   font-size: 11px;
   line-height: 150%;
   clear: both;
}
Suppose we want to change the typeface of the body text of articles to Georgia, 12 pixels high. The first step is to copy the style definition for articleBody from the Current CSS text box and paste it into the Custom CSS text box:



You make the changes within the Custom CSS box. The font-family property specifies a typeface for the style, and the font-size property specifies the size of the text. To specify 12-pixel Georgia, the style should be changed to this (changes are shown in bold red text):
.articleBody {
   font-family: Georgia;
   font-size: 12px;
   line-height: 150%;
   clear: both;
}
Once you have made these changes, click the Save CSS button near the bottom of the page to save them:



Here's what the blog looks like now:



Changing the Article Title Font

The articleTitle style defines the look of ther article title font. Changing it involves the same process as changing the article body font. First, copy the style from the Current CSS textbox. For a blog using the "Simply Red" theme, the articleTitle style looks like this:
.articleTitle {
    font-size: 12px;
    font-weight: bold;
    clear: both;
    line-height: 135%;
}

Let's say we want to change the typeface to 18 point Trebuchet MS bold. To do this, we set the font-family property to "Trebuchet MS" and the font-size property to "18px". The font-weight property is already bold, so we don't need to touch it. Here is the resulting style (changes are in bold red text):

.articleTitle {
    font-family: "Trebuchet MS";
    font-size: 18px;
    font-weight: bold;
    clear: both;
    line-height: 135%;
}
The Custom CSS text box should look something like the picture below.



Click the Save CSS button to view your changes...



And there you have it!

Try making similar changes to the other article styles.


View Article  Add a YouTube Video
This article explains how to embed a YouTube video into an article on your blog.   more »
View Article  How to Configure Google Docs & Spreadsheets to Post to your Blog

Google Docs & Spreadsheets is a new service for Google account holders and Gmail users. Derived from Google's acquisition of the Writely service earlier this year, this service allows users to create word processing and spreadsheet documents within a web browser, so they can accessed from anywhere. These types of web-based applications are often referred to as "Office 2.0" applications, implying an evolution of the standard desktop-based Office software. Google describes their service on the docs.google.com home page:

Google Docs & Spreadsheets is a web-based word processing and spreadsheet program that keeps documents current and lets the people you choose update files from their own computers. You can, for example, coordinate your student group's homework assignments, access your family to-do list from work or home, or collaborate with remote colleagues on a new business plan.

What's exciting about Google Docs & Spreadsheets (let's refer to it as GDS for the rest of this article) is that it also provides you the ability to post your documents directly to your weblog. It even can update your blog post when you update its original GDS document!

Google has made it easy to configure GDS to post to BlogHarbor weblogs by including BlogHarbor in the default list of blog services (thank you Google!), so all you need to know to configure GDS to post to your BlogHarbor weblog is your username and password.

Here's a walk through of the steps to configure posting to a BlogHarbor blog from an existing Google Docs & Spreadsheets account:

Step 1 - Begin Blog Setup
Choose a document to edit, then click the Publish tab at the top right of your GDS control panel:

Begin Blog Setup

Click on the set your blog site settings link just above the Post to Blog button.

Step 2 - Enter your BlogHarbor Settings
A dialog box will appear over current screen:

Choose BlogHarbor from dropdown

Check the Hosted Provider checkbox at the top of the menu, then choose BlogHarbor from the Provider dropdown menu. Next enter your BlogHarbor User Name and Password:

Enter BlogHarbor username and password

Step 3 - Test your Configuration
That should be all the information GDS needs to post to your BlogHarbor weblog. Click the Test button and you should see a dialog appear like this:

Enter BlogHarbor username and password

Now you're ready to post to your BlogHarbor weblog using Google Docs & Spreadsheets!

Tips and Tricks

  • Google Docs & Spreadsheets allows you to use Tags to cagegorize documents. When you publish a document to your blog, Google will automatically check to see if your blog has any Categories with the same label as your Tag, and if so, post your article to that Category.

    So if your blog has a category named Trivia, and you tag your GDS doc with the Trivia label, when posting the document to your blog it will automatically be placed into your blog's Trivia category.

  • GDS can output a list of documents you create as an RSS feed. Use an RSS Headline Component to add a dynamically updated list of your GDS docs to your blog's sidebar!

We welcome your tips, questions or comments about using the Google Docs & Spreadsheets service to post to your BlogHarbor weblog; please post them to our BlogHarbor Community Forums.

View Article  System Templates Updated

Changes were made to our commenting system during System Update 2006-06-29 aimed at increasing performance and improving the security of the system against comment spam.

We try to avoid making changes to the system that would require modification of your custom templates, unfortunately it was necessary to update the default base, article, photo, movie_review, music_review, and book_review templates in order to implement this updated commenting system. If you have customized any of these templates, it will be necessary to roll our updates back into your customized template in order to re-enable commenting on your blog. This page will explain how to add these changes into your custom templates. If you have not already customized your templates, then you can ignore these instructions; your blog will receive the updated system templates automatically.

As a result of this revision to the commenting system, the comment form (and Comment Verification image known as a CAPTCHA) does not display immediately when your blog article loads, the comment box will appear only when your visitor clicks on the Post a Comment link. Not only will this change reduce the amount of comment spam targeted at your blog, but it also will increase the speed at which your article pages load.

We apologize for the necessity of this change and for the lack of advanced notice.

Updating your Article Templates

Access your blog's control panel and go to Look & Feel > Templates. Click on Edit in the article row. Look for the following code in your custom template:

{{if allow_comments}}
{{if can_post}}
<div style="margin-bottom:20px;"><a href="#post_comment"><%= gettext("Post a comment") %></a></div>
{{/if}} <!-- can_post -->
{{/if}} <!-- allow_comments -->

It might look like this, depending on when you originally made your customization:

{{if allow_comments}}
{{if can_post}}
<div style="margin-bottom:20px;"><a href="#post_comment">Post a comment</a></div>
{{/if}} <!-- can_post -->
{{/if}} <!-- allow_comments -->

Change that code to the following:

{{if allow_comments}}
<div style="margin-bottom:20px;"><a href="#post_comment" onclick="return reveal_post_comment_inline(true, false);"><%= gettext("Post a comment") %></a></div>
{{/if}} <!-- allow_comments -->

Click on Update Live Template. Your article template should now be updated with the most recent code. If you have made customizations to your photo, movie_review, music_review, or book_review templates, repeat this step for each of your customized templates. 

Updating your Base Template

Access your blog's control panel and go to Look & Feel > Templates. Click on Edit in the base row. Look for the following lines near the top of your base template:

{{include name="javascript.html"}}

If it exists, delete it. Your template may or may not contain this line depending on when you customized your template. If you find it, remove it, but if you don't see it there's nothing wrong.

Next, look for the following line:

</head>

and right above it, enter the following:

{{include name="utils.js"}}

<script language="JavaScript" type="text/javascript"><!--
// translate common phrases

translator.settext("by", "<%= gettext("by") %>");
translator.settext("Anonymous", "<%= gettext("Anonymous") %>");
translator.settext("on", "<%= gettext("on") %>");
translator.settext("Permanent Link", "<%= gettext("Permanent Link") %>");
translator.settext("Profile", "<%= gettext("Profile") %>");
translator.settext("Reply", "<%= gettext("Reply") %>");

// -->
</script>

Click on Update Live Template. Your base template will now be updated with the most recent code, and comment functionality should now be restored.

Need some help?

If you have customized your templates and want us to roll the new changes into your existing article or body templates, please contact us; we'd be happy to make these changes for you.

Again, if you have never customized your blog templates, then it is not necessary for you to make any changes to your blog templates, as these changes have automatically been integrated into the default templates.

Our apologies to all of our users for the necessity of these changes, we hope that the new commenting system will meet its goals of decreasing comment spam and increasing the speed of your blog.

View Article  How to Manage your Bandwidth
There are a number of techniques for managing the amount of bandwidth your weblog uses. This article will illustrate three easily implementable methods to understand, manage, and reduce your weblog's bandwidth usage.   more »
View Article  How to Add More Bandwidth to your Blog
BlogHarbor weblog hosting plans allow a generous amount of disk space and bandwidth. Some weblogs may require more bandwidth, either temporarily or permanently. At BlogHarbor, you may temporarily add bandwidth to your weblog, or add additional bandwidth by permanently upgrading your hosting plan. This article will discuss the options and considerations when your blog approaches or exceeds its monthly bandwidth allowance.   more »
View Article  Delete an Article
Learn 2 ways to delete an article.   more »
View Article  Edit your Articles
In addition to posting new articles, you can also continue working on articles you've saved or even make changes to articles that you've already published.   more »
View Article  Post your first Article
Once you've logged in, the best way to get familiar with the system's features is to post an article. This guide provides a step-by-step guide to the basics of posting and viewing an article.   more »
View Article  Post a Photo
When you are done uploading your photo (see Uploading a Single Photo for details), the next step is to post it. Photos can be posted from the New Photo page, which is similar to the Post Article page. On this page, more information for your photo can be added, such as a caption, description and excerpt. The page should look familiar -- it's largely the same as the Post Article page, except for the fact that it has a photo attached, as well as some extra fields for photo-related information.    more »
View Article  Edit a Photo
In addition to posting new photos, you can also continue working on photos you've saved and make changes to photos already published.    more »
View Article  Style Template CSS Reference

Almost all of the look and feel aspects of your weblog can be modified through your style template, which allows you to edit the CSS or Cascading Style Sheet for your blog. This template allows you to modify aspects of your blog such as colors, fonts, alignment, margins, and borders. While other templates such as the base, category, and article templates control the structure of your blog, the style template controls the presentation of those structural elements.

Customizing your blog through CSS does require some knowledge of the CSS language. Once you've mastered the basics of CSS, it should be easy to apply your knowledge by customing your blog's style template. Our BlogHarbor Community Forum is a great source for information and support on customizing your blog with CSS. These threads from the forum are a great way to get started on personalizing your blog through CSS:

This document provides a reference to the CSS classes used in your blog's style template.   more »

View Article  How to Configure Performancing for Firefox to post to your weblog

Performancing for Firefox or PFF is an extension for the Firefox web browser which builds a blogging client right into your browser. The company describes their software:

Performancing for Firefox is a full featured blog editor that sits right in your Firefox browser and lets you post to your blog easiy. You can drag and drop formatted text from the page you happen to be browsing, and take notes as well as post to your blog.

Performancing for Firefox's recent update to Version 1.1 added support for posting to BlogHarbor weblogs. This document provides information on configuring the PFF extension to post to your blog.

   more »
View Article  How to Add Attachments to Articles or Photos

Attachments for blog entries are like attachments for email messages. Topics covered in this guide to using attachments:

  • What are Attachments? 
  • What happens when someone clicks on an attachment? 
  • Virus Prevention Begins With You! 
  • Adding Attachments to New Entries 
  • Multiple Attachments 
  • Editing Attachments for Existing Entries 
  • Attachments in Restricted Categories 
  • Copying the URL for a Link 
  • What Happens to an Attachment When You Delete its Entry? 
   more »
View Article  Implement Technorati Tags on your Blog

Technorati is a blog search engine which earlier this year introduced the concept of a tag, a self-categorization of your content. It's how you can tell Technorati what you think the subject of your blog article is. Here's how Technorati describes a tag:

Think of a tag as a simple category name. People can categorize their posts, photos, and links with any tag that makes sense.

Using a simple customization to your blog's category template, you can use BlogHarbor keywords to function as Technorati Tags. Now you can assign keywords to your blog articles which will not only make it easier for your readers to find content using the built in search function on your blog, but millions of Technorati users will also be able to find your pages when searching for content using those same keywords.

   more »
View Article  Include Images in Your Articles
Every BlogHarbor weblog comes with a file system -- a space in which you can store files of any type: pictures, sounds, Flash files, Word or Excel documents and so on. This article shows you how to upload images to your blog's file system and add these images to your articles.   more »
View Article  Post Articles to your BlogHarbor weblog using Flickr

Flickr is a free online photo management and sharing service, now owned by Yahoo. The Flickr service allows you to share images as well as organize them using "tags", comments, and annotations.

Some BlogHarbor users find Flickr to be a useful supplement to their blog, and the Flickr service integrates very well with our service. This article will show you how to enable your Flickr account to post articles directly to your BlogHarbor weblog.

   more »