As mentioned in the Widget Tags for Layouts article, there are many different tags you can use to include specific pieces of data in your template. They will all be formatted as <data:name/> or <data:name1.name2/>, where name is the name of the particular piece of data you want to use. In the name1.name2 example, name2 is a particular item within a set of data called name1, e.g. photo.url.

This is a master list of all such available data. It is divided into sections by page element, because different types of widgets use different data.

• Globally Available Data
• Page Header
• Blog Posts
• Blog Archives
• Profile
• Text / HTML / JavaScript
• Feed
• Picture
• Labels
• List
• Link List
• Logo

Globally Available Data

This information applies to the entire page, so you can use it anywhere, unlike other data which can only be used in a specific widget. These should be referenced as part of the overall "blog" data, e.g. as <data:blog.title/>, etc.

• title: The blog's title.
• pageType: The type of the current page. One of 'item', 'archive', or 'index'.
• url: The URL of the current page.
• homepageUrl: The homepage of the blog.
• pageTitle: The title of the current page. This is often the blog title, but may contain additional information on archive or post pages.
• encoding: The encoding to use for the blog, e.g. UTF-8.
• languageDirection: Either "ltr" or "rtl" for left-to-right and right-to-left languages, respectively.
• feedLinks: The autodiscovery feed links for the page header.

Back to the top.

Page Header

This is a simple widget with just two pieces of data. They can be referenced simply as <data:title/> and <data:description/>.

• title: The blog's title.
• description: The blog's description.

Back to the top.

Blog Posts

This is the central part of any blog, and the most complex. You should definitely consider simply making modifications to one of the default templates before writing a blog posts widget from scratch. But however you want to do it, here's all the data available in this widget.

The basic <b:widget> tags for creating widgets are described in Page Element Tags for Layouts. If you just want to use the Page Elements tab to work with everything, then that's all you need to know. However, if you want more fine-grained control, this article describes what you can put inside a widget, if you're working in the "Expand Widget Templates" mode of the Edit HTML page.
The first thing to do is to add a closing tag. So this:

<b:widget [...attributes...] />


becomes this:


<b:widget [...attributes...]>

</b:widget>
Now with that out of the way, let's talk about what you can put between those tags.

Includes

Widget content is contained in "includable" sections, which have this format:

<b:includable id='main' var='thiswidget'>

    [insert whatever content you want here]

</b:includable>

The attributes are as follows:

• id: (Required) A unique identifier made up of letters and numbers.
• var: (Optional) An identifier made up of letters and numbers, for referencing data within this section. (See the data section below.)

Each widget must have one includable with id='main'. This will usually

You can change almost any aspect of your blog's appearance just by changing the style sheet in your template. Some of the most common things to do are listed here. For more in-depth tutorials and examples, please see W3 Schools CSS Examples and The W3C Introduction to CSS.
Our default templates have all the CSS information towards the top, between <style></style> tags. You'll see a bunch of lines there that look like this:


The highlighted line shows the style that is applied to every <h3> tag in your blog. What we're going to describe here are some options for how to style it. Any of the pieces of code below can be inserted between the { curly brackets } in the style sheet.

Code	Examples
Colors
color:blue;	This text is blue.
background:yellow;	This has a yellow background.
You can insert the names of many common colors here (e.g. red, green, yellow) or you can use hexadecimal codes for a greater range of colors (e.g. #0033AA). For more information on color, please see the Web Color Reference.
Borders
border:solid 1px red;	This has a red border.
A border can be solid, dotted or dashed. The width here is specified in pixels (px). Colors can be names or hexadecimal codes. To only do a border on one side, use border-top, border-bottom, border-right, or border-left.