Page elements tags for layouts

The <body> section of a layout theme is made up of sections and widgets.

Sections are areas of your page, such as a sidebar, footer.
A widget is a page element such as a page, a blogroll, or anything else you can add from the “Page Elements” tab.

You can include any HTML you like around the sections in your theme.

Sections

A blogger template is divided into sections. The basic sections are: Header, Content, Footer, Sidebar. You will use the Widget element to define the content in a section. Note that you can’t use HTML within a section. But around a section, it’s permissible to use HTML.

The correct format of section will be

<b:section id=’ ‘ class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../>
</b:section>
While the below format, will be considered Wrong:
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<h1>Content heading</h>
<div>Content</div>
</b:section>

Section Attributes

You need to specify following attributes in a section. id is the only required attribute while others are optional.

id – It is the unique name of section specified in letters and numbers only.
class – Consists of common classes such as ‘navbar,’ ‘main,’ ”header,’ ‘footer, and ‘sidebar,’. If you change templates later, these will let you to decide whether transfer your content or not. You can also use other class names if you wish.
maxwidgets – It limits the maximum number of widgets that can be added in a section.
showaddelement – Consists of ‘yes’ or ‘no’ value. ‘Yes’ is the default. This establishes whether the Page Elements tab displays the ‘Add a Page Element’ link or not.
growth – It can be ‘horizontal’ or ‘vertical’. ‘vertical’ is the default. This determines whether widgets are arranged side-by-side or stacked within a section.

A section can only contain widgets. To insert extra code within a section, split the section into two or more new sections.

Syntax to Add Sections

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Section contents -->
</b:section>

Widgets

A widget is represented by a single tag, which is a placeholder to indicate how the widget should be handled in the Page Elements tab.

Some examples of widgets (one for a page header and one for a list) are:

<b:widget id="header" type='HeaderView' locked="yes"/>

<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>

<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>

A widget is the main part which displays real data for section. It works as a placeholder. Section only defines the layout elements. Some default widgets are available in blogger. However, you can also create your own custom widget.

Widget Attributes

Widget can have many attributes. Out of which, only id and type are required and others are optional.

id – (Required) May contain letters and numbers only, and each widget ID in your theme should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one.
type – (Required) Indicates the kind of widget and can have one of the valid widget types listed below.

BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar

locked – (Optional) Can be “yes” or “no,” with “no” as the default. A locked widget cannot be moved or deleted from the Page Elements tab.
title – (Optional) If no display title is specified, a default title such as “List1” will be used.
pageType – (Optional) Can be “all,” “archive,” “main,” or “item,” with “all” as the default. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of their pageType.)
mobile – (Optional) Can be “yes”, ”no,” or “only” with “default” as the default. This decides if the widget will be displayed on mobile or not. Only Header, Blog, Profile, PageList, AdSense, Attribution will be displayed on mobile when the mobile attribute is “default.”

Widget Syntax

Widgets are included within a section. The syntax to add a widget in a section will be somewhat like this

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section>

Note: In your published blog, all <b:section> and <b:widget> tags will be replaced with <div> tags, which will have the specified ID. This will allow you to refer to, for example, div#header or div#myList in your CSS.

Widget Tags for Layouts

When you're using the Layouts theme to create the body section of your blog, you can use widgets to add page elements like pictures and a blogroll.

Types of tags

This section describes the HTML you can use inside of the closing tags.

Includes (b:include)

Data Output (data:)

Loops (b:loop)

Switches (b:switch)

Attributes expression (expr:)

Evaluated Expressions (b:eval)

Variable alias (b:with)

Includes (b:include)

When to use includes

Includes are most useful if you have a section of code that you want to re-use in several different places, or only include in certain circumstances.

To do this, write the content inside a b:includable, then use b:include wherever you want it to appear.

Format

<b:includable id='main' var='thiswidget'>
  [insert whatever content you want here]
</b:includable>

Attributes

id (required): A unique identifier made up of letters and numbers. Each widget must have one includable with id='main'.
var (optional) An identifier made up of letters and numbers, for referencing data within this section.

If you make more includables with different IDs, they won't be displayed automatically. However, if you make an includable with id='new', then you can reference it in your main includable with <b:include name='new' /> and it will display that way.

The attributes for the b:include tag are as follows:

name (required): An identifier made up of letters and numbers. It must match the ID of an existing b:includable in the same widget.
data (optional): An expression or piece of data to pass on to the includable section. This will become the value of the var attribute in the includable.
cond (optional) An expression which causes the include to only execute when its result is true. This is the same as the cond attribute on a b:if.

Example

Here's an example that shows how to use b:includable and b:include.

The main thing to understand here is how the "main" section includes the "post" section within it. It passes along a post that it calls "p" and the included section references it as its var "post", then prints the title.

Note that the include only runs while the index is less than 10, so only a max of 10 posts would get rendered in this example (the index starts at 0).

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Title: <data:post.title/>
</b:includable>

Data Output (data:)


Examples


<data:title/> would print out the title of a widget


<data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> would print attributes of a photo component. A photo may have components such as url, height, and width. Using the "." notation indicates that we want the URL for this photo, rather than a URL from something else.



See more examples of Layouts Data Tags




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.









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.









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.


feedLinks: A list of feeds for this page. On the main page, this will contain the main blog feeds; on item pages, this will also contain comments feeds. Each item in this list contains the following:
url: The feed URL.
name: The feed name (i.e. 'Posts' or 'Comments').
feedType: The type of feed (Atom or RSS).
mimeType: The mime type of the feed.


olderPageUrl: If there are older posts than the ones on the current page, this is a URL to those posts. Context-sensitive for page type. (Not all pages will have this link.)
olderPageTitle: Title of the link to the older page of posts.
newerPageUrl: The newer equivalent of olderPageUrl.
newerPageTitle: The newer equivalent of olderPageTitle.
commentLabel: The phrase to use to show the number of comments, e.g. "comments."
authorLabel: The phrase to use to indicate who wrote the post, e.g. "posted by."
timestampLabel: The phrase to use to indicate when the post was written, e.g. "posted at."
postLabelsLabel: Phrase to introduce the list of post labels, e.g. "labels for this post."
backlinksLabel: Phrase to describe backlinks to this post, e.g. "links to this post."
posts: A list of all posts for this page. Each post contains the following:
dateHeader: The date of this post, only present if this is the first post in the list that was posted on this day.
id: The numeric post ID.
title: The post's title.
body: The content of the post.
author: The display name of the post author.
url: The permalink of this post.
timestamp: The post's timestamp. Unlike dateHeader, this exists for every post.
labels: The list of the post's labels. Each label contains the following:
name: The label text.
url: The URL of the page that lists all posts in this blog with this label.
isLast: True or false. Whether this label is the last one in the list (useful for placing commas).


allowComments: 'True' if this post allows comments.
numComments: The number of comments on this post.
showBacklinks: Whether to show backlinks for this post.
numBacklinks: Number of backlinks for this post.
addCommentUrl: The URL of the 'add a comment' form for this post.
emailPostUrl: The URL of the 'email this post' form for this post.
editUrl: The URL of the edit form for this post.
feedLinks: A list of feeds specific to this post. (This is different from the overall blog feedLinks, as it may contain a feed for the post's comments, for instance.) Each contains the following:
url: The feed URL.
name: The feed name (e.g. 'Posts' or 'Comments').
feedType: The type of feed (Atom or RSS).
mimeType: The mime type of the feed.


comments: A list of all comments for this post (on item pages only). Each contains the following:
id: The numeric ID of the comment.
body: The body of the comment.
timestamp: The time the comment was created.
author: The display name of the comment's author, or 'Anonymous'.
authorUrl: URL of the comment author's profile, if the comment is not anonymous.
deleteUrl: The URL for deleting this comment.
isDeleted: Whether this comment has been deleted. (The text of deleted comments is replaced with a placeholder.)













Blog Archives

The different styles provided here are for the different default options on the Page Elements tab. If you're designing a new version, it's easiest to use 'FLAT' as the style, and then manipulate the rest of the data as desired.


title: The title of the widget.
style: One of 'MENU', 'FLAT', or 'HIERARCHY'.
data: A list of each archive unit, each of which contains:
name: The name of this archive interval, e.g. "August 2006."
url: The link to the page containing posts from this interval.
post-count: How many posts there are in this interval.











Profile Widget

For a blog with a single author, the profile widget contains the following information. Note that to access different parts of the photo data, you'll use notation such as <data:photo.url/>.


title: The title of the widget.
userUrl: The author's profile URL.
location: The location from the author's profile.
aboutme: The "About Me" information from the profile.
displayname: The author's display name.
photo: The user's profile photo, made up of the following:
url: The photo URL.
width: The photo's width, in pixels.
height: The photo's height, in pixels.
alt: The "alt" text for the photo.





On team blogs, the profile widget contains less information about more authors, as follows.


title: The title of the widget.
authors: The list of all authors, each of which contains the following:
displayname: The author's display name.
userURL: The author's profile URL.





If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. E.g. <b:if cond='data:team=="true"'> (display multiple authors) </b:if>







Text / HTML / JavaScript Widget


The Text widget and the HTML/JavaScript widget work the same way and have the same two pieces of data.



title: The widget's title.
content: The content of the widget.









Feed Widget

A feed widget's content is dynamically loaded using Google AJAX API after blog is rendered in a browser. It can be styled only using CSS.


title: The widget's title.
feedUrl: The URL of the feed.









Picture Widget

A picture widget contains a single image, and provides all the relevant data for that image.


title: The title of the widget.
sourceUrl: The URL of the image.
width: The image's width, in pixels.
height: The image's height, in pixels.
caption: The image caption.









Labels Widget

The labels widget includes a list of all labels that are in use on the blog.


title: The widget title.
labels: The list of labels, each of which contains:
name: The text of the label.
count: How many posts have this label.
url: A link to a page displaying posts with this label.











List Widget


The simplest form of a list. Each item is just a single piece of text, without any different types of data within it.



title: The widget title.
items: The list of items.









Link List Widget

A slightly fancier list, where each item has two parts to it: the text and the link.


title: The widget title.
links: The list of links, each of which contains:
name: The link's text.
target: The link's URL.











Logo Widget

It doesn't get any simpler than this one. Just one piece of data here.

fullButton: The URL of the Blogger button you've selected.












Loops (b:loop)





When to use b:loop

The b:loop tag lets you repeat a section of content multiple times. This is most commonly used for printing out each post in a list of posts for a given page, or each comment, or each label, etc.

Format


The general format for using loops is this:


<b:loop var='identifier' values='set-of-data'>
  [repeated content goes here]
</b:loop>



The 'identifier' (i) part can be any name you choose, and will be used to stand in for each new item in the list, each time through the loop. The set of data you specify for the values can be any piece of data described in the data tags article as being a list of items.



For example, in the blog posts widget, posts is a list. Code like the following will loop through each post, printing out the title for each one, with header tags around it.


<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>



Notice how "i" takes on the value of each post in turn, so you can get the title from each one.


Number Range


A loop tag allows you to iterate across an inclusive number range, such as ‘1 to 3', ‘-3 to -9', where the value of the variable takes the number's value. The following example would create an unordered list of 1, 2 and 3.


<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>


Index Attribute


Loop tags also have an optional index attribute, which gives the zero-based index of the current iteration through the loop.


<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>



This example would create an unordered list of:

Index: 0, Number: 9
Index: 1, Number: 8
Index: 2, Number: 7

If, elseif & else (b:if)


When to use if, elseif, or else

You can use the b:if, b:elseif and b:else tags to display certain content in particular cases, and other content in other cases. For example, you might only want to show certain text on the homepage, but different text when looking at individual posts.

Format

<b:if cond='condition'>
  [content to display if condition is true]
<b:elseif cond='another condition'/>
  [content to display if no previous if or elseif conditions have been true, and this elseif condition is true]
<b:else/>
  [content to display if no if or elseif conditions are met]
</b:if>



The b:elseif and b:else tags are optional. Without them, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.



For "condition" you can put in anything that evaluates to either true or false. Some data tags are simply true/false values on their own, e.g. allowComments on a post. With other pieces of data, you can compare them with specific values to get a true or false. Here are some examples:

<b:if cond='data:post.showBacklinks'>
True if the current post is set to show backlinks.
<b:if cond='data:blog.pageType == "item"'>
True if the current page is an item page (post page).
<b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
True if the current page is an item page (post page) and the current post is set to show backlinks.
<b:if cond='data:displayname != "Fred"'>
True if this is not Fred's display name.
<b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
True if Fred is the display name, or the current page is a static page (not a post page).
<b:if cond='data:post.numComments > 1'>
True if the current post has more than one comment.
<b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
True if the current page is a specific post, or a page.












Switches (b:switch)





When to use a Switch


You can use b:switch tag much like you would use a b:if tag that has several b:elseif tags. The advantage of a switch branch is that you don’t need to repeat the variable name. You can easily read them to see what defines each case, and what the default case is.


Format



<b:switch var='[Data expression]'>
<b:case value="[Value 1]" />
 [Output if evaluation of var is equal to Value 1]
<b:case value="[Value 2]" />
 [Output if evaluation of var is equal to Value 2]
[… any other values]
<b:default />
 [Output if evaluation of var is not equal to any other stated b:case]
</b:switch>



Example



This example shows how to output a different header, depending on what type of page is being rendered.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Page</h1>
<b:case value="item" />
  <h1>Post</h1>
<b:default />
  <h2>Blog Posts</h2>
</b:switch>







Attributes expression (expr:)



When to use Expressions



You can use the expr attribute to set attribute values based on values in the data dictionary. 



Examples



<a expr:href='data:blog.homepageUrl'>Home</a>
A home link with the blog's homepage url.
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
A link with the blog's post RSS feed url. The ‘+' operator concatenates the two strings.
<a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
A link with the class "comment" when comments are allowed, and "no-comment" when they are not. The ternary operator (?:) takes the given boolean value and picks the first value (after the ?) if the boolean is true, or the second value (after the :) if the boolean is false.








Evaluated Expressions (b:eval)



When to use an Evaluated Expression



You can use b:eval tag to evaluate a more complicated expression than a standard data tag.



Format




<b:eval expr='[Expression]' />




Examples



min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
Output a calculated relative height, based on a new width value.
<b:eval expr="data:post.labels[0].url" />
Output the url of the first post label.
<b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
Output “Comment” when comments are allowed, and “Comments Disabled” when they are not. Note that this expression makes use of the ternary operator.





Variable alias (b:with)






When to use a variable alias



You can use b:with tag to temporarily store the value of a computed expression and avoid complicated inline expressions.



Format




<b:with var='myComputedValue' value='[Data expression]' />




Examples




For a complicated style attribute based on data variables, you can compute it before the rest of the HTML output, so that the nested HTML is easier to read.
<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>My Header</h1>
   </div>
 </div>
</b:with>

Note that the variable will only exist for the child nodes of the b:with tag.











See an example





See an example of how all of these tags are used in the HTML for a PageList widget in your blog.

In this widget, you can see example usages of the b:widget, b:includable (and b:include), b:if (and b:else), and b:loop tags.



<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
          <b:loop values='data:links' var='link'>
            <b:if cond='data:link.isCurrentPage'>
              <option expr:value='data:link.href' selected='selected'>
                <data:link.title/>  
              </option>
              <b:else/>
              <option expr:value='data:link.href'><data:link.title/>
              </option> 
            </b:if>
          </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
          <b:loop values='data:links' var='link'>
            <b:if cond='data:link.isCurrentPage'>
             <li class='selected'>
                <a expr:href='data:link.href'><data:link.title/></a>
              </li>
            <b:else/>
              <li>
                <a expr:href='data:link.href'><data:link.title/></a>
              </li>
            </b:if>
          </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Recent Posts

Labels

Understanding Blogger Tags for Layouts and manual template creation from scratch

Page elements tags for layouts

Widget Tags for Layouts

Types of tags

When to use includes

Format

Attributes

Example

Examples

See more examples of Layouts Data Tags

Globally Available Data

Page Header

Blog Posts

Blog Archives

Profile Widget

Text / HTML / JavaScript Widget

Feed Widget

Picture Widget

Labels Widget

List Widget

Link List Widget

Logo Widget

When to use b:loop

Format

Number Range

Index Attribute

When to use if, elseif, or else

Format

When to use a Switch

You can use b:switch tag much like you would use a b:if tag that has several b:elseif tags. The advantage of a switch branch is that you don’t need to repeat the variable name. You can easily read them to see what defines each case, and what the default case is.

Format

Example

This example shows how to output a different header, depending on what type of page is being rendered. <b:switch var='data:blog.pageType'> <b:case value="static_page" /> <h1>Page</h1> <b:case value="item" /> <h1>Post</h1> <b:default /> <h2>Blog Posts</h2> </b:switch> Attributes expression (expr:)

When to use Expressions

You can use the expr attribute to set attribute values based on values in the data dictionary.

Examples

When to use an Evaluated Expression

You can use b:eval tag to evaluate a more complicated expression than a standard data tag.

Format

<b:eval expr='[Expression]' />

Examples

When to use a variable alias

You can use b:with tag to temporarily store the value of a computed expression and avoid complicated inline expressions.

Format

<b:with var='myComputedValue' value='[Data expression]' />

Examples

See an example

No comments:

Post a Comment

Trending

Social Media

You can use `b:switch` tag much like you would use a `b:if` tag that has several `b:elseif` tags. The advantage of a switch branch is that you don’t need to repeat the variable name. You can easily read them to see what defines each case, and what the default case is.

You can use `b:eval` tag to evaluate a more complicated expression than a standard data tag.

`<b:eval expr='[Expression]' />`

You can use `b:with` tag to temporarily store the value of a computed expression and avoid complicated inline expressions.

`<b:with var='myComputedValue' value='[Data expression]' />`