Adding new expressions to Blogger templates

Blogger's template engine is powered by a flexible editing language, consisting of a set of Widget Tags which use expressions to conditionally change the output HTML for each post and page on your blog.

Using these expressions, you can customize the HTML output of your blog, to adjust the look and feel. You could, for example, show an image behind the header, but only on the homepage. Or add a flower icon, next to a post's title, if the post has the 'Flower' label.

You can customize your blog's template under Settings > Template > Edit HTML.

You can customize your template’s markup, to change the look and feel of your blog.

Previously, the expressions in Blogger's templates could

• Add or concatenate values with +
• Subtract values with -
• Check for equality with != and ==
• Compare values with <, >, <= and >=

Now, support has been added for many more expression operators, including:

• Inversion of true/false values with !/not e.g. <b:if cond='!data:post.allowComments'>...
• Picking between 2 values with ?: e.g. <a expr:class='data:post.allowComments ? "comments" : "no-comments"' ...
• Checking if a value is a member of a set or array, with in/contains e.g. <b:if cond='data:blog.pageType in {"index", "archive"}'>...
• Combining multiple conditions with and/or e.g. <b:if cond='data:blog.pageType == "index" and data:post.allowComments'>...
• Changing the order of operations with () e.g. <div expr:style='"max-width: " + (data:width + 10) + "px;"'>...

For a full specification of the new operators, see the help article.

Happy Templating!

Posted by Luke Bjerring, Software Engineer

SHARE THIS