01 December 2011

Blog Coding 101: Intro to Template Designer

Template Designer is a great way to easily customize the colors, fonts, and layout of your blog.



When you first go into Template Designer, you'll be brought to the Template page.  This shows you all kinds of pre-made templates that you can just click on and leave.  Or, you can click on a template and customize the fonts and colors yourself.  I base my template choice on the type of background I have.  But usually, I use Picture Window.

But I can't see my background...
That might happen.  To take care of this problem, click on the Background tab.  You'll see the background of the template in a drop-down Background image box.  You can change your background here to something different, but if you want it gone, click on the drop-down box and in the first screen, click one of the backgrounds with a peel-away corner showing transparency.  After clicking and submitting that, you should be able to see JUST your background in the live preview.

Adjust Widths:  This lets you customize the width of your entire blog up to 1000 px, as well as your sidebars.  Always annoyed by those 200 px wide graphics overflowing into your background or center column?  Widen your sidebar to include it.

Layout: Layout allows you to pick a great design for your widgets.  Choose one or two sidebars, or one sidebar with divisions.  Also customize your footer.

Advanced:  This tab carries a bunch of extra features.  What you can customize in the Advanced tab depends on the type of template you chose in the first step.  But you can always change the Page Text, Links, Blog Title & Description and Tabs Background & Text and a few others.  I'll describe a few of them.

  • Page text:  Simple and straightforward.  Choose a font from Blogger's wide selection that will be the font across your entire blog.  I recommend using something easily read, as some of the web based fonts can be tricky when it comes to deciphering them.  You want people to be able to read your reviews easily.  You can also change the size and color of your text.
  • Blog title:  You will NOT see this if you put a graphic in place of your header.
  • Post title:  This is a great place to use those nifty web fonts.  You can use the live preview to make sure the size you chose is big/small enough.
  • Add CSS: I reckon this will usually be left blank, UNLESS you're doing stuff like customizing blockquotes.