Customizing Your Blog Template, with Blogger Template Designer

What are we doing, and why?

When you first set up your blog, you chose a template that determines how your blog looks. However, you will probably want to customize your template to make things more to your liking. This post shows how to use Blogger's built-in options to change fonts, colors, and so on -- using the "Blogger Template Designer". A subsequent post will show how to make further changes by adding in your own CSS rules.

As you will see, the Blogger Template Designer is very easy to use. You don't really need a tutorial to learn how to use it. However, what is important to your readers (and your teachers) is that you use it well - that you make good design choices so your blog is easy and pleasant to read, and projects a somewhat professional image of yourself.

So, in this tutorial, we will keep in mind the design principles of CARP - Contrast, Alignment, Repetition (unity, rhythm), and Proximity (grouping/spacing). The two main ones you can control in this tutorial are contrast and repetition.  If you don't use good contrast, parts of your blog may become unreadable, and the important parts may not stand out as they should. If you don't use repetition (for example, you choose a lot of random fonts and colors), your blog will become confusing and disjointed.

Step by Step

Here's a blog just using one of the Picture Window templates, with the default settings.

Choosing Template in the menu brings up the available Blogger templates (in some other blog platforms they are called themes).

After choosing the one to start with, click on the orange Customize button.

The first thing we can adjust is the template, just like we could at the previous page.  I just kept on using the same one.

The Background settings let you choose a different background image, as well as a different color scheme. In this example, I chose the blue texture background and changed to the blue color scheme.

The Adjust Widths settings let you change the size of the blog "container" and the sidebar.

I kept the settings as-is, but later I may come back and make my sidebar narrower if I have wider content that I need to fit in posts.

The Layout settings let you control the positioning and the number of sidebars, and the way in which those are split up into gadget areas. The footer can also be split up into separate areas.

Here in the Advanced settings we can control more specifically the fonts and colors.  This is where a little bit of restraint and evaluation is called for....

Page Text is most of the text on your page.  You can choose a font, size, and color.

Choose a color that contrasts well with the backgrounds of your posts area and sidebar.

The top few fonts are the "core web fonts" that most people already have on their computer.  These are fast loading. Georgia and Verdana were designed to look good on screen.

The Web Fonts are fonts that must be downloaded in addition to the rest of your blog.  There are nice ones, but if your blog loads too slowly, try going back to the core web fonts at the top of the list.

Do NOT use typefaces that may look cool or unique but will be difficult to read in paragraphs of your blog posts!!

Also, do NOT make all your text bold or italicized.

And, do NOT make your text too small.

Bad choices:

The font is not very readable, and doesn't look professional.

The color does not have enough contrast with either background - especially in the sidebar.

Decorative or novelty fonts have their place - usually in very small doses - maybe for a favorite quote in the sidebar, or for a comment in the footer.

Better choices:

Open Sans is a nice readable typeface.  The darker color contrasts well with the backgrounds.

The Backgrounds colors are for the header, posts, and outer areas.

Remember to keep good contrast with your text.

I changed the header background color to "Raven Blue" -- #00539f.

(#00539f is a hexadecimal color code.  The 00 is the amount of red - none.  The 53 is the amount of green - not much.  The 9f is the amount of blue - more blue.)

Links is where you choose your starting link colors, your visited link colors (links that have already been clicked), and hovered link colors (when the cursor is over them).

The main thing is to make it obvious that your links are links.  If you make the color too close to your other text color, your links are hard to distinguish.  There's that contrast again.

Blog Title is one I decided to use a different font for.  Your blog should not use more than 2 or 3 fonts all together.  But, the blog title is important and should stand out, so I'm using a different color, size, and font for contrast.

Tabs Text and Tabs Background don't apply the way I have this template set up.  If I had a menu going across the top, those would be my tabs.

Watch your color contrast.  If your tab names are long enough that fitting them in is an issue, try choosing Arial for your font.

For my Post Titles, I'm using the same font I used for the Blog Title.

The Date Header appears above posts.  Keep the color subtle so that the Post Header underneath it is what grabs attention.

The post footer color should also be low-key. It shouldn't stand out as much as the post content above it.

The border color can be whatever you want. If you don't want a border, you can pull down the color picker and choose "transparent".

Gadget titles probably need to stand out a little, so I made them a contrasting color.

Footer colors are usually also fairly low-key.

Same with footer links.

Add CSS is the last section, which we'll leave blank for now.  In the next tutorial we'll use it to add our own style rules to further customize the appearance of our blog.

Once you have previewed and adjusted everything, you must press the orange "Apply to Blog" button in the upper-right corner.

The finished result for now:

Typically, after using the blog for a while I'll think of some better colors or fonts to use in certain places, and I'll go back into the above settings to tweak them.

A CARP Checkup

We used Contrasting colors, sizes, and fonts to make the important things stand out more than the lesser things.

We used Repetition by staying with a consistent set of color and fonts (hopefully).  I'm not really satisfied with my mix of green links, white gadget headers, and blue text, so that's on my radar to fix and make more consistent looking.

None of these settings had to do with Alignment.

Proximity will figure in when we add our own custom CSS to clarify and distinguish the groupings of different page elements.

Next time - custom CSS!