Tutorials, tips and tricks about Blogger

30 Dec

Blogger’s Cheat Sheet

6 Comments | by in Design, Freebies, Tutorials | 2009

Español Português


Most of us, when we start a blog we do it with Blogger, a simple interface and it is very easy to start a new blog, but trouble starts to appear once we try to manipulate the blog’s layout, CSS and XML of the template might seem a bit complex right from the start, however, they aren’t that much after fighting a bit with it and looking at the general structure. And precisely as a helping hand to understand the Blogger templates’ general structure, we’ve created a Blogger Cheat Sheet specially focused on classes and identifiers that most of blogger templates use.

What’s the point?

Essentially this:

  • Change elements in an existent template.
  • Adequate a layout from another platform.
  • Create a new Blogger layout.


How to use it?

Using this guide requires at least basic knowledge on CSS and according to it you’ll be able to modify certain things.

Changing elements.

You just need to look for the class or ID in the cheat sheet related to the part we wish to modify and change the CSS attributes on the template.

Example: Change the blog’s title color.

Looking up in the cheat sheet, the class related to the blog’s title is h1.title, look for the class in the CSS code, if it does exist just modify the color code, otherwise add a new class:

h1.title {
/* other attributes */

Adequate a layout from another platform.

Here the cheat sheet helps us finding the Blogger equivalent for each element. Example: In a WordPress theme the entry title has a class called .tit, just copy the class and attributes and rename in Blogger as .post-title.

This is a very basic example, obviously adapting a whole template requires a bit more knowledge on CSS, because not always you do have an equivalent and the structure has to be changed.

Create a new layout.

Based on this cheat sheet you might create a CSS and HTML structure which allows to code without working directly on Blogger, or maybe just the CSS structure and doing the work online.

Help and corrections

This cheat sheet is basic, and because of that we think it might be very useful for a lot of people, if you think so we will be really thankful if you help us spreading it, on your blog, digg or anyway you can think of. And in case you have corrections to make or just an opinion, then have your say on the comments.


6 Comments, leave a reply · Feed
  1. that’s a good web very nice i like it

  2. I really thank you for this. Hope you can give more of version 2, let’s say šŸ™‚

  3. Love it. i got blog using this cheat sheet ^_^ cools

  4. Roberta Fye January 19, 2011

    I cannot download your PDF cheatsheet. My computer keeps telling me that it is damaged somehow????

    I have the latest version of Adobe Reader, and I’d like to use this (cheatsheet) for my blog with one of your templates.

    I’m a real amateur here. Is there a step-by-step video available?? I could really use some help with this please!

    Thanks in Advance

  5. @Roberta you need unzip the file first, for example, with 7zip.


You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger