As I mentioned in the previous post I was going through the blogger blog templates to do some changes. This is something I have notice in the templates.
This hack will be useful to people who create Blogger templates. This will provide people who use your blog template user friendly way to change font, font colours and background colours as they want without accessing the HTML code.
After log in to Blogger account, under the Layout tab Font and Colours will provide you a easy interface to change font, font colour and background colour. When you create a template you can provide as many areas as you want.
How to add new property to the list.
This is a quite simple process and you just need to change CSS and add a new variable to the template as you required.
For example I am going to add background colour variable to column-wrapper(Side bar). Next time I will be able to select a different colour to my side bar without going to Edit HTML or figuring out the hex decimal code for the colour.
1. Go to Layout and then go to Edit Html.
2. Find the CSS for the column-wrapper.
3. Add the following line inside the column-wrapper.
background-color:$coloumnwrapperbgcolour;
background-color:$coloumnwrapperbgcolour;
background-color: is the CSS property for background.
$coloumnwrapperbgcolour; is the variable we will going to define next.
4. Scroll up until you find the place it defined the variables. Normally you can find it top of the page. Add the following line
<Variable name="coloumnwrapperbgcolour" description="Column Rapper Bg Colour"
type="color" default="#fff" value="#35556a">
Variable name should be same as the variable used in step 3
description you need provide a unique description to each variable you define. It need to be something you would understand later as this is going to be display in the list.
type in this case type will be color. If the variable is about font type would be font.
5. Click Save template. After it successfully updated go to Fonts and Colours.
Now you can easily update the Custom Blogger Bg Colour by just couple of clicks. You can apply it to other CSS properties you would think will be help.
