Basics of the Blogger Template Designer - dummies

Basics of the Blogger Template Designer

By Amy Lupold Bair, Susannah Gardner

Don’t know any HTML but still want to tweak certain elements of your blog’s design just a little? You’re in luck — the Blogger Template Designer gives you some excellent tools to do just that.

The Template Designer gives you the capability to change:

  • The font face, size, and color of text, links, navigation elements, and sidebar elements

  • The background color, image, or both

  • Widths of the columns on your blog

  • Layouts of your blog to use one, two, three, four, or even five columns

In fact, you can even use the Template Designer to insert some of your own custom styles, if you’re up to date with HTML and CSS.

To use the Blogger Template Designer, follow these steps:

  1. From the Dashboard, select Template from the Posts drop-down list.

    Click the Customize button under the Template you’re currently using.

    The Template Designer opens.

    Click the Background link in the left column and click the thumbnail in the Background Image box.

    The Select Background Image window opens.

    Browse the available backgrounds and select one to preview it.

    Looking for something specific? Choose one of the image categories in the left side of the window to see topically selected images, such as Shopping, Technology, or Nature.

    You can upload an image from your computer to use as a background by selecting Upload image.


    Click Done.

    If desired, choose a new color theme from the options in the Background page of the Template Designer.

    The themes set background, link, text, and other element colors.

    Click the Layout link from the left side of the Template Designer.

    This opens the layout page.

  2. Select the thumbnail that uses the number of columns you want your blog to have.

    You can also select the layout to use in the footer — that’s the bottom area of your blog.

    Selecting a thumbnail implements that layout on your blog.

  3. Click the Advanced link on the left side of the Template Designer.

  4. Select an element to customize from the available list.

    You may customize each element in the following ways:

    Font Face: Choose from the standard web fonts, such as Arial, Times New Roman, and many fancier web fonts.

    Font Style and Size: Bold, italicize, and make text larger or smaller that the template’s initial settings.

    Color: Select a color for the element by using the following selection suggestions:

    • Hexadecimal Code: If you know the hexadecimal code for the color that you want to use, you can type it into this text box. Hexadecimal code is a code that contains letters and numbers that equate to a color. Primarily graphic and web designers use hexadecimal codes, so don’t worry if this seems like gibberish to you.

    • Color Picker: Click the drop-down list on the color picker to really fine-tune an exact color choice.

    • Colors from This Template: These colors are already in use in your template.

    • Suggested Colors: This palette shows colors that Blogger thinks fit well with the colors already in use.

    • Background Color: Choose a color for the background of the element you are customizing. The ways you can select a color are the same as for the font color choices.


    When you click a color, Blogger shows a preview of how it looks on your blog in the lower half of the screen.

  5. After you make your edits, click Apply to Blog.

    A Blogger page opens, displaying a confirmation that it has saved your edits. You can return to the Blogger home page or continue making changes in the Template Designer.