The Web Designer’s Guide to Blogger Templates

Despite it’s apparent simplicity, Blogger is a powerful publishing platform which offers many unique features. Millions of bloggers from all corners of the globe use this platform, and as more turn to blogging, the demand for professional, well-designed Blogger templates is increasing in demand.

Blogger offers an ideal template system for web designers in the form of a single-file template and editing system where changes can be previewed as they are made. If you are capable of creating a well-designed CSS based web template, you can easily adapt your skills to create beautiful Blogger templates. Furthermore, a little knowledge of Blogger’s template tags allows you to utilize some of the more powerful features to control exactly how the template will perform.

In this article, I will introduce you to the key concepts of designing Blogger templates and provide links to useful resources where you can learn more about using and utilizing the features of this free blogging platform.

The structure of a Blogger template file

Blogger templates comprise of a single XML file which is similar in structure to a regular HTML page:

Basic structure of a Blogger template

The <head> section contains information for the page headers, a dynamic internal style sheet (more on this later), and any JavaScripts functions/links required for the template’s functions.

In addition to regular (table-less) HTML mark-up, the <body> section contains various nested data tags which generate the blog posts, widgets and other functions required to generate pages in the blog.

Let’s take a look at the code used for these two main sections of the template.

The <head> section

In similarity to a regular HTML page, this is the section where page headers, internal style sheets and JavaScript functions will be formed.

Page headers

These are generated automatically by the tag: <b:include data=’blog’ name=’all-head-content’/>, and are based on the information provided about the blog in the blog settings page of the dashboard.

Dynamic internal stylesheet (the <b:skin> section)

Blogger templates include an internal stylesheet which enables certain colors and fonts to be changed dynamically in the Fonts and Colors setting of the dashboard. All other CSS statements are formed using regular CSS formatting.

These dynamic variables are generated by the statements which appear between the <b:skin> and </b:skin> tags of the template, rather than between regular <style> and </style> tags.

These variables appear near the top of the b:skin (style) section of the <head>, and will appear like this:

For a color variable:

<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">

For a font variable:

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Arial, sans-serif" value="normal normal 100% Arial, sans-serif">

To add this variable in a CSS statement for a class or ID, you would do so like this:

body {
font: $bodyfont;
color: $textcolor;
}

Which when generated in an active page of the blog would produce the following in the source code:

body {
font: normal normal 100% Arial, sans-serif;
color: #333;
}

You can create as many different color and font variables as you like to use in your Blogger template designs. The only caveats are:

  • Each variable must have a unique name and description
  • When used in style declarations, each variable should begin with a dollar sign, and is case sensitive. So $BodyFont will not work where Variable name=”bodyfont” is used.

These variables can be used as often as you like within the template code, and can be overridden by using regular CSS statements.

For example, when using $bodyfont to style the text for the sidebar (from the variable example above), you can add “font-size: 1.2em” to adjust the size of the font, while retaining the other aspects of this variable. Eg:

#sidebar {
font: $bodyfont;
font-size: 1.2em;

}

When you use variables in your Blogger template designs, these variables will appear on the Fonts and Colors page of the Blogger dashboard, allowing the user to alter these variables with just a few clicks, and preview the changes before committing them:

Fonts and Colors screen in Blogger dashboard

Saving these changes to the font and color variables updates the code in Blogger template itself.

JavaScript

JavaScript is one method you can use to add interactivity to your Blogger template designs. Most JavaScript functions can be applied to Blogger templates, though you would need to be aware of data and layout tags if you plan on applying JavaScript to content contained in widget sections.

When linking to external JavaScripts, you can format this in the same way you would for a regular HTML document. However, once you save the template, any quote marks (“) will be changed to single quotes instead.

If you plan to use inline JavaScript in your Blogger template, you must be sure to replace any ampersands and quotes are replaced with their HTML equivalents, otherwise they will not be parsed when Blogger generates the active pages of code. If this happens, you may receive errors when attempting to preview or save the template, or your JavaScript will be rendered useless.

The <body> section

Blogger templates are fully widgetized, including the header, main posts section, sidebar and footer. This enables the user to easily add, swap or remove elements of their template using the drag-and-drop interface in the Page Elements section of the dashboard.

Within the <body> section of a Blogger template file, you will find these widgets are nested inside <b:section> tags that in turn are nested within regular HTML divisions.

Here is a very crude visual example of how the body section is coded to include the various sections and widgets that appear in a default template:

Basic Mark-up of a Blogger template

When pages of the blog are generated by the template, each b:section and b:widget tag becomes a division in the source code. This enables you to style each section and widget using ID and Class selectors in the CSS section (the <b:skin> area) of the template.

The <b:section> areas

Each widgetized area of a Blogger template is defined as a <b:section>. In default Blogger templates, there are four main widgetized sections:

  • The header (for the blog title and description, or to upload a header image)
  • The main posts section
  • The sidebar
  • The footer

Usually the header and main posts sections permit only one widget to be added to this section, using the format max-widgets=1 within the opening <b:section> tag. The sidebar and footer areas allow an unlimited number of widgets to be added to the template.

It is possible to add more <b:section> areas to the template if you wish to add more widgetized areas, such as a second sidebar, columns in the footer or a navigation bar above the header.

To do this, you can duplicate the format of a <b:section> widget, replacing the ID (which must be unique!) and any class selectors with those of your own choosing.

Once the template has been saved, this new section will appear as a widget place-holder in the “Page Elements” section of the Blogger dashboard. Furthermore, the template code will update when any new widgets are added in this section.

The Page Elements Page

Only <b:widget> tags can be nested within the <b:section> tags. You cannot add extra HTML code between these <b:section> tags unless they are nested within the <b:widget> tags (and within the <b:includables>!).

The <b:widget> sections

Each <b:widget> section contains the template tags used to generate the contents of a widget in the blog’s live pages.

The actual content of each widget is inaccessible to the user, as it is stored on Blogger’s servers. Instead, we can control the content of each widget by editing widgets in the Page Elements section of the dashboard. Furthermore, we can alter the layout of the widget by editing the template code.

Only <b:includable> tags can be nested between <b:widget> tags. These <b:includable> tags contain the tags and HTML code required to generate the widgets and their content.

Each widget will contain at least the <b:includable id=’main’> set of tags, in which are nested the tags and code to form the heart of the widget.

Other includables may also be present between the <b:widget> and </b:widget> tags. These includables contain other short-hand codes to be included in the ‘main’ includable, and are referenced by name.

For example, here is a very basic representation of the mark-up of the header widget:

<b:widget id='Header1' class='header'>

<b:includable id='main' var='top'>
<b:include name='title'/>
<b:include name='description'>
</b:includable>
<b:includable id='title'>
[some code and tags used to generate the blog title]
</b:includable>
<b:includable id='description'>
[some code and tags used to generate the blog description]

</b:includable>
</b:widget>

Of course, the actual header widget should include much more code than this, though I hope my example will help you understand how the widget sections work.

There are many different types of widget available to add to a Blogger template, including:

  • Header
  • Profile
  • Archives
  • Labels
  • Text
  • Image
  • HTML/JavaScript

The Header and Profile widgets may only be used once in each template, while the other widgets can be used any number of times.

Each different widget type contains unique tags used to generate the contents and style, depending on the type of content they are required to produce.

Learn more!

Here are some useful resources to help you learn more about the construction of Blogger templates:

Designing Blogger Templates

Depending on the method you currently use to design site templates or themes for other CMS’s, the methods used to construct Blogger templates may vary dramatically from those you are familiar with.

Blogger is a “closed source” platform, which means you will only be able to see how Blogger templates generate live pages by viewing/previewing an active page which has been generated by the Blogger system.

This means that using Dreamweaver (or your HTML editor of choice) will not provide a complete preview of how your template will appear. It is far preferable (and much easier) to create your Blogger template designs by editing the template in the Edit HTML section of the Blogger dashboard.

You can create your free Blogger account within minutes simply by signing up at Blogger.com. Once you have created your free account, you can create any number of blogs in which to begin constructing and testing your new designs.

Accessing your Blogger template

Once you have created your first blog with Blogger, you can access the template code by clicking on the Layout tab, then on the Edit HTML link.

On this page, you will see your template code presented in regular HTML format for easy editing. You can also download the template as an XML file to your computer, or upload a new template from your computer hard drive.

The Blogger Edit HTML Page

When you make changes to the template code, you can preview these changes using the preview button near the bottom of the page. This also allows you to troubleshoot any inconsistencies in your template mark-up, as you will receive error messages and an explanation of the error on the screen.

Expanding the widget templates

By default, when viewing the Edit HTML page, the “widget templates” are contracted. This is basically a “shorthand” version of your template, in which the mark-up used to generate the widgets is hidden.

This contracted mode allows you to make sweeping changes to the template more easily. For example, you can make alterations to the style section, locate HTML tags with ease, or cut-and-paste sections of the template to alter the layout of your design.

When you tick the check-box to “expand the widget templates”, you have complete access to all of the code used to generate your blog pages.

In this mode, you can make changes to the actual mark-up of the widgets (such as the Blog Posts section). This is useful for when you need to change the location or class identifier of widget tags. For example, to change the placement of the date-header, or to make adjustments to how comments are presented.

Most of the visual appearance of the template may be edited easily while the widget templates are contracted. To alter elements within the widgets, you must ensure the “expand widget templates” box is ticked.

The easiest way to begin designing Blogger templates

In my opinion, the simplest method of designing a Blogger template is to build upon a “bare-bones” theme.

This ensures that all required template and data tags are already present in the template, saving time, troubleshooting and effort, which enables you to begin working on a design concept immediately.

Many Blogger designers begin by manipulating the default Minima template (which appears to be the most basic of Blogger’s choice of design). However, I have found this template to be riddles with many annoying bugs, and instead have developed my own basic template on which I base most of my own Blogger designs:

Blogger Basic Template

This “Blogger Basic” template contains only minimal styling. It’s a simple two column layout, 860px wide with a widgetized sidebar and footer section. There are several font and color variables already present in the <b:skin> section to build upon, and a few default widgets to offer an idea of how the content will appear.

Using this Blogger Basic template, it’s easily possible to create a beautiful design using only CSS (adding backgrounds, borders, changing font and heading styles, etc). Familiarizing yourself with the different sections and their mark-up code will enable you to create additional widget sections (such as a second sidebar) and alter the placement of elements which appear within the widgets themselves.

You can download this Blogger Basic template for unlimited use in your experimental Blogger projects, provided you use build upon this theme to create an original design.

Download Blogger Basic template (Zip File)

Another simple method to generate a Blogger template with ease

Once you have developed some familiarity with the inner workings of Blogger templates, you could try converting an existing HTML theme to a Blogger compatible design.

The simplest method to achieve this would be to copy important and nescessary template tags from a simple Blogger template over to your HTML based theme. Then replace the template code in the Edit HTML page of your Blogger dashboard with your modified template mark-up.

Be sure to include these essential tags and components in your modified template to ensure your Blogger theme functions correctly for the end-user:

  • The tags for page-headers:

    <b:include data=’blog’ name=’all-head-content’/>

    <title><data:blog.pageTitle/></title>

  • Include the contents of your stylesheet inline, between <b:skin> and </b:skin> tags.
  • Add <b:section> and </b:section> tags to the areas of the template you would like widgetized (eg: the header, sidebar, main posts column, footer)

Once saved and uploaded to your blog, you can add widgets to your template through the Page Elements section of your Blogger dashboard, add content (in the form of posts) and preview how the template will appear.

You may also like to alter the format of widgets, and add variables to elements of the <b:skin> (style) section as required.

Some caveats of designing for Blogger

There are a few issues which you should be aware of when designing templates for Blogger, which have the potential to affect the methods you use to design themes. If you are aware of these caveats from the start, you can ensure your Blogger designs function correctly, and are also user-friendly to those who would purchase your themes.

Blogger does not host external files

If you plan on using external files (eg: images, JavaScripts) for your Blogger templates, be aware that Blogger does not host external files – only the actual XML template and blog posts.

Most Blogger users do not purchase additional hosting, and instead make use of free hosting services when required such as Picasa Web Albums (for images used in the template) and Weebly (for JavaScripts).

Be sure to write a comprehensive help file which includes information about any externally hosted files used in your Blogger templates!

Wherever possible, try to use inline JavaScript for your Blogger templates, which saves buyers the trouble of creating a hosting account and uploading their JavaScripts.

I also find it useful to upload any images used to Picasa Web Albums and change the URLs to these images within the template. As far as I am aware, there are currently no limitations of bandwidth for these accounts, and this method ensures my templates work for the buyer as soon as they are uploaded. Anyone who has a Blogger account also has access to a free Picasa account (included as part of their Google account), and in my experience, this is the most user-friendly way of offering Blogger templates for purchase.

Try not to use PHP scripts

Blogger templates produce blog pages as regular HTML and are not compatible with PHP commands.

It is possible to use JavaScript to reference external PHP files, but as mentioned before, Blogger does not provide hosting for such files (and neither do most free hosting services!).

Escape character entities when using inline JavaScript

When using inline JavaScript for Blogger themes, you must ensure that special characters are replaced by their HTML equivilents in the mark-up code. In particular, you should ensure that

  • Quotation marks (“) are replaced with &quot;
  • Ampersands (&) are replaced with &amp;

If you do not escape these character codes, attempts to save your template may result in errors, or the functions of the JavaScript may fail to work.

The contents of widgets are not carried over with the template file

When you add content to widgets (particularly HTML/JavaScript widgets, Images and Text gadgets), this content is not transferred to the actual template file.

If the content if such widgets is an integral part of your design, you should include this content in an external file in your template download, and reference this in your template’s help file.

Alternatively you could hard-code this content into the widget code within your template, by replacing the <data:content/> tag with the HTML mark-up for the content you wish to appear.

Blogger blogs do not have “pages” enabled

Unlike Wordpress and other CMS’s, Blogger does not offer the ability to create static pages, only posts.

Blogger users tend to work around this by backdating posts to use in similarity to static pages (for “About” and “Contact” pages).

Blogger blogs can use a custom domain

Blogger users now have the choice of mapping their blogs to a custom (top level) domain, so don’t assume buyers will automatically use the *.blogspot.com extension when coding scripts for use in your templates!

Blogger templates do not produce valid HTML

When Blogger parses the contents of a template to generate active blog pages, the pages produced are not W3C valid.

This is an issue over which we have no control. While we can do our best to ensure the contents of our templates are valid, Blogger will insert additional JavaScript (to parse and display the content of widgets), plus the code for the Blogger nav-bar iframe; both of these elements are constructed of invalid code.

Even the most basic of Blogger templates will produce pages of invalid HTML mark-up. This is unfortunate for Blogger template designers, but it is an issue which we have to learn to live with.

For the most part, those who use Blogger to publish their blogs are not too concerned about valid mark-up – so long as the templates function correctly and are made to be user-friendly. We can do our best to reduce validation errors by ensuring every variable accessible to us conforms to the ideals of valid mark-up, and try to be content about those elements over which we have no control (since it’s doubtful that Blogger is in any hurry to rectify these issues!).

Blogger users and their expectations of premium templates

I have been writing tutorials and designing templates for Blogger for well over two years, and based on my experiences I can offer some general assumptions regarding those who use Blogger, and their expectations of premium quality Blogger templates.

Here are some considerations you should be aware of when designing templates for Blogger, which will in turn enable you to create designs which sell well in the premium Blogger template market:

Assume little or no knowledge of HTML/CSS

Blogger is a simple Blogging service to use, and as such attracts many new bloggers who have no experience with HTML, CSS or the inner workings of a blogging program.

Ideally, you should try to create templates which require little or no customization to function once they are uploaded; make use of font and color variables, so buyers can easily customize their themes, and over-explain everything in your help files!

This will not only help you sell more Blogger themes (as buyers will be happier using their template purchases), it will vastly reduce the number of support requests you receive in regard to your theme offerings.

Bright and ornate themes tend to be the most popular…

If you take a look at the most popular Blogger templates available, you’ll likely notice that highly decorative, bright and playful themes are among the most popular.

Industry specific and clean, professional themes for Blogger seem to be in very low demand, though if you are looking for a challenge, try designing themes for “make money online” blogs, “Mommy” blogs and personal diarists, as these niche subjects have proved particularly popular among Blogger users.

Non-standard features are expected in premium Blogger themes

The default features offered by Blogger.com can go some way towards building a decent Blogger theme. However, the market for free Blogger templates is quite competitive: there are hundreds of free themes available which include non-standard features, for example:

  • Navigation links/menu
  • Stylized comments, and author comment highlighting
  • Links to related posts
  • Additional widgetized sections in the layout

In order to ensure your Blogger template is of a “premium” standard, you should be sure to include a few non-standard features in your themes, as well as a well-designed layout. Otherwise, there will be little to differentiate your theme from the hundreds of free templates offered for download :)

Useful resources for Blogger template designers

Here are some more useful links to help you design great themes for Blogger:

General Blogger Template Design Sites and Articles

Inspiration and free Blogger templates

Communities and forums

Final thoughts

In this article, I’ve touched only on the basics of designing themes for Blogger. It’s not difficult to begin designing Blogger templates, and as more web entrepeneurs turn their attention to this free blogging service, the demand for premium Blogger themes will certainly increase.

I hope this article has provided you with a handy overview to begin designing your own Blogger themes, and look forward to seeing more authors designing for this CMS on Theme Forest!


14

Comments