Christine's Blog Templates

Instructions For Using Templates and Customization Tutorials

These pages include instructions for applying the template to your blog, and tutorials and tips for customizing the template to make it more personal and individual. My templates are written to maximize Blogger's Fonts, Colors, and Page Elements features, giving you a lot of customization potential. Also included are some articles which are just helpful information. Please look around, and enjoy personalizing your blog :)

If you find my work helpful, you can show your appreciation by linking to this website and/or making a small donation. Thanks.
 
 

Styling Individual Blog Entries

Say you want some blog entries to have a blue background, and some to have a yellow background, or you want to change the font color, or add a background image. This is useful if you just like variety, if you want each category to have it's own style, or perhaps you have a blog with several authors and want each one to post entries with their individual style.

You can do this by adding divs assigned to classes to your posts, then styling the classes in the css of your template. You can add as many new classes as you want to. This does require editing the template css, and it requires that you have some basic css knowledge. Always save a backup of your current template to your computer before making any modifications, in case you need to go back to it, and always use Notepad to edit your template.

How it works:
  • You can create any class you want to, as many as you want to, and define the styles in your template's css.
  • Then, when writing your blog entry, you switch to HTML mode and you wrap the entry in a div which is assigned the class.
  • Unlike changes made with the entry editor, you can change every entry which uses divs and classes simply by editing the template css- you will not need to go back to each entry and change them! That means if your new background color clashes with your old font colors, or you want to change your blog's images from flowers to beach gear to falling leaves . . . just change the attributes of the class in the template css, and every entry using that class will be updated.
You may also find my article about using color helpful.

For example, you want to set up a class called "sunflower."

  1. You set up a class called sunflower in the style sheet, make it the last thing in the style sheet section, right above </b:skin>.
  2. You give the class some attributes, like this:

    .sunflower {
    background:#ffffff url(http://i97.photobucket.com/albums/l204/timbt/sunflowerbg.jpg) no-repeat bottom right;
    border:1px solid #1A2855;
    color:#1A2855;
    padding:5px;
    }
  3. Then, when you write a blog entry, you go to the HTML mode in your entry editor and you add the div into your entry. It's very important that you remember the opening and closing tags. Like this:

    <div class="sunflower">
    Your blog entry goes here.
    </div>
Here is another example, this style I call "sarah."

  1. The css code for your template:

    .sarah {
    background:#F9E2E2 url(http://i97.photobucket.com/albums/l204/timbt/sarah1.jpg);
    border:2px dotted #B15050;
    color:#A24849;
    padding:8px;
    }

  2. The code for your blog entries:

    <div class="sarah">
    Your blog entry goes here.
    </div>