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:
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
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:
Which when generated in an active page of the blog would produce the following in the source code:
font: normal normal 100% Arial, sans-serif;
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:
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:
Saving these changes to the font and color variables updates the code in Blogger template itself.
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:
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.
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'>
[some code and tags used to generate the blog title]
[some code and tags used to generate the blog description]
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:
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.
Here are some useful resources to help you learn more about the construction of Blogger templates:
- Editing the HTML code for your blog
- Page elements tags for Blogger
- Fonts and colors tags
- Widget template tags
- The skeleton of a Blogger template
- Using and manipulating the layout wireframe editor
- The Blogger Template Book (free PDF eBook)
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.
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:
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.
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’/>
- 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
Be sure to write a comprehensive help file which includes information about any externally hosted files used in your Blogger templates!
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.
- Quotation marks (“) are replaced with "
- Ampersands (&) are replaced with &
The contents of widgets are not carried over with the 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.
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
Free E-Book: The Blogger Template Book
- 40 Essential Resources for Google Blogger
- 7 Tips to Design a Professional Blog Layout using Blogger
- The Cheat’s Guide to Customizing Blogger Templates
- JackBook – Blogger Tutorials Section
- Blogger Hacks Wiki
- Blogger University
- Phydeaux3 (Some excellent Blogger tutorials here!)
- Blogger Buster (focused on all things “Blogger”!)
Inspiration and free Blogger templates
- Btemplates – the largest collection of free Blogger templates
- 125 Excellent Blogger templates
- 70 fresh and modern Blogger templates (Mashable)
- Blogger Showcase (Gallery of user-submitted designs)
- 54 Inspiring and Original Blogger templates
Communities and forums
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!