Designing your blog on blogger.com

Web tutorial

Welcome to the wonderful world of Google because that’s really where you are when you sign up for your free account at blogger.com. Which is great if, as I do, you love Google. In fact, you’ll use your Google username and password to create your account (or be forced to create one if you don’t already have a Google account).

Let’s assume you already have a Google account for mail or to maintain your preferences when using the search engine. After logging into Google and clicking the new blog button at blogger.com, you’ll be asked to choose a name for your blog. After you’ve picked an address for your blog, you’ll find it at myblog.blogspot.com.

Next, blogger will let you pick from among a very small number of templates and then plop you into the post editor where you can compose your very first blog entry. Feel free to do so. In fact it’ll be a lot easier to see the design choices you’re about to make if you make a sample blog entry. It’s quite easy to do if you’re familiar with a word processor and I don’t need to talk about it here. What I want to talk about now is modifying those paltry few templates and making you aware you actually have a lot of choices.

As I write this now, your choices of templates — which you’ll see if you click the Design tab at the top and then click Template Designer — are Dynamic Views, Simple, Picture Window, Awesome Inc., Watermark, Ethereal and Travel. Avoiding Dynamic Views for now, that’s six templates plus some variations for each templates. You might think that’s not a lot of choices, but that’s because you failed to notice the options down the left side of your screen, especially the very powerful Layout and Advanced Options.

OK, the first option, Templates, simply lets you browse through the six templates. If you click on a template, you’ll see a preview of how your blog will look using that template. Try them out and any of the variations. Your choices won’t take effect unless you click Apply to Blog.

The next option, Background, lets you pick a background image for the entire blog. You’ll obviously want to take some care selecting a background. Picking something too busy or dark may make it hard to read. You can either upload your own image to use as a background or select from the images provided (click on the blank background image). You might note that any uploaded images are automatically added to you Picasa (another Google service) web albums.

You can also pick a Main color theme in Background. Try out the suggested themes and see how they affect the look of your blog, or click the default theme and pick your own color. The Template Designer will create complementary colors from the color you picked.

Adjust widths lets you decide how wide your blog runs and also the width of the sidebar. Dialing this width correctly can be important if you’re trying something fancy like trying to align your background image with the main text box.

The Layout option is where it starts to get interesting because here you can change the actual structure of your site. (Oddly, it’s not the only place where you can change the structure. More about that later.) By clicking the Body or footer layout options, you can decide if you want a left or right sidebar, a left and right sidebar or no sidebar at all. You can also edit the content of the gadgets that were added automatically when you picked one of the Body layout options although curiously you’re unable to move or add gadgets here, but I’ll show you later where you can do that.

Finally the Advanced option lets you specify background colors for page elements or fonts and color for text elements, such as page text, titles and links. It’s amazing how picking the right font and color can make it your own page and distance your page’s design from the template.

Now remember two paragraphs back I mentioned the Layout option of the Template designer was not the only place to change the structure of your pages. When I started this tutorial, I told you to click the Template Designer sub tab of the main Design tab, which took you away from Page Elements. You actually left the main blogger interface to which I now want you to return by clicking back to blogger.

It is in Page Elements that you can add or rearrange gadgets in the header, sidebar and footer. Gadgets are extra features you can add to your blog like: adding links to Pages, which are stand-alone pages on your blog (more about pages in an upcoming article); subscription links, which make it easy for your readers to be informed when you make changes to your blog; AdSense content where Google pays you to host ads on your blog; or twitter updates so that you readers can see your recent nuggets of wisdom from the twitter-verse.

That’s enough for this tour of the design features of blogger. We’ll explore them in depth soon, but our next tutorial will address some concepts common to both WordPress and blogger: gadgets (or widgets in WordPress), Pages and Menus.