When you are ready to alter your blogger via html, it is easy to start with the fonts and colors. Keep in mind that not everyone will have access to your chosen fonts and colors so you may want to choose the more popular ones.
Blogger allows you to modify the fonts and colors in your template any way you like. However, if you want them to work with the Fonts and Colors feature of Blogger Layouts, then there are a few guidelines to follow. Doing it this way will let you modify the colors more easily if you change your mind later. It also helps if you share your template with someone else who wants to customize their version a bit.Before you start anything, be sure to download a back-up copy of your blog . Simply go to the layouts tab- html link.
In the <
head> section of your code, you'll need to have a pair of <
/b:skin>> tags. The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page.
- name - This name may contain only letters or numbers, and each name in your template must be unique.
- description - This can be a more descriptive name, and can include spaces. This is what will appear in the Fonts and Colors tab.
- type - This can be either "font" or "color".
- default - The default value. For colors, this should be a hexadecimal color code, e.g.
#FF0066. For fonts, it will be a list of the form
font-style font-weight font-size font-family.
After the variables are set up, the rest of the code looks like regular CSS, with one exception. Any time you want to use a color or font for which you made a variable, you'll enter
$variable_name instead of the actual color or font. In the example above, you can see that we created a variable called
bgcolor and set it to white (
#fff). Then later on in the code, instead of setting the body background property to white explictly, we just said
background: $bgcolor. This still has the effect of making the background white, with the difference that we can change it