Thursday, October 18, 2012

How to customize the look and feel of your blog

In an earlier post, we discussed how to change the administrative settings for your blog.  Here we will show you how to change the creative settings for your blog.

Google Blogger provides a selection of templates to change the look and feel of your blog.  Here are a few examples:

Simple look
Watermark

Travel




Choosing one of Blogger's preexisting templates is an easy way to add character to your blog's appearance.  Here's how you do it:


In the left sidebar of your admin area, choose Template.  This will bring you to a screen with a range of categories of templates, and it will show you what your blog currently looks like at the top of the screen.  You can choose from a variety of templates in the following categories:  Simple, Picture Window, Awesome Inc. (our favorite!), Watermark, Ethereal, and Travel.  You can browse the templates by clicking on one and then using right and left arrows to move forward and backward through the choices, but you get the fullest sense of what it will look like if you actually click the orange Apply to Blog button.  Don't worry, you can easily change it back again!

Customizing the template
If you find a template that's almost right for you, but you want to tweak certain aspects of it, Google Blogger allows you to customize the template.  You can change the colors and fonts of various areas in the template (blog title, footer, post background, etc.).

On the Template page, click the orange Customize button underneath the Live on Blog image.



This will bring you to a screen with the Blogger Template Designer.  The menu on the left defaults to template choices; Background allows you to change the color theme for the template.  If you would like to adjust the widths of the columns on your blog, or move around specific components on your blog, choose Adjust widths or Layout, respectively.  On this blog, we did not make any of the above changes, but we did find the last Template Designed menu choice to be helpful; the Advanced section allows you to change the color (and, where applicable, font) of specific elements on the page.  As you select a particular element, Blogger will highlight the element, so you can see what would be changed.  A palette to the right provides pre-selected color choices, as well as a box to give the hex value of a particular color, if you happen to know what you already want.



We kept our sidebar a transparent gray, but we changed our Footer to a pale yellow.  We ended up putting "Gadgets" into each area (a slideshow in the Sidebar, and a poll in the Footer).  We had the Gadget Title set to white, which looked great in the gray sidebar, but disappeared almost entirely in the pale yellow footer.  There's no way in the existing template to change only one gadget text, so we needed to identify a color that would be visible in both the footer and the sidebar; we settled on a reddish hue.

There is also a place at the bottom of the Advanced section to do some of your own coding.  Clicking Add CSS will bring up an editing box for you to enter your own CSS.  If you know any CSS, you may find yourself wanting to use it in Google Blogger.  The templates have only so many pre-programmed choices for you to make.

No comments:

Post a Comment