Main Page Beginners Design Tips Get Traffic Earn Money Picks Codes

Are you a Successful Blogger?

Successful Blogging

  • Beginners can learn the basics about Blogging
  • Advanced Bloggers can learn how to take their blog up a notch.
  • Anyone can learn HOW TO GET MORE TRAFFIC
  • And more- Templates, Codes, and Tips etc.

What do you want to read about? Scroll down or check out our sidebar for topics.

We post at least daily so check back or subscribe to our newsletter.


Modifying Fonts and Colors

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> < /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.

Look for a list of variables here. There will be one for each font or color that you want to be editable from the Fonts and Colors tab. Each variable is required to have the information shown in the example above and described here:
  • 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