Blogger Syntax

I made this because I got irritated while searching of blogger syntax.
Might be some empty documents.

Before we start

Square Brackets([]) are for explain. Not be contained in actuall code!

Explanation

Google Blogger has own HTML syntax. People who have clicked HTML edit for customization would know this. Tags start with '<b:'. Just use these like real tags.

Basic Forms

• <b:[name]></b:[name]>
• <b:[name]/>
• <data:[value]/>

Caution

• You have to close when you opened. There are some single tags like <br>, these should include /

  e.g.) <b:if> <b:else/> </b:if>

data:

You can use values that Blogger supports.

Form

Description

If you write in tag form, this will be replaced with value. For example, blog.title is blog name, if you write down <p><data:blog.title/></p> blog name will be in p tag.

But expr: is more important. If you add this in front of tag's attribute, you can use data:inside. For example, if you do <meta property='og:site_name' expr:content='data:blog.title'> you can input blog name automatically in meta tag. Syntax information about expr: is here.

Caution

In my guess usable position goes different by prefix. You can use everywhere when it starts by blog., can use only in post tag when it starts by post.. (Technically inside of <b:includable id='post' var='post'></b:includable>.)

List

Trivia

It's no lie to say that this document is made to organaize these things. There's no place that organize these well.

expr:

You can use Blogger variables when you use this in front of the attributes.

Form

Explanation

You can input variables and texts in [expression]. data:blog.title represents for blog name, if you want to write "~ blog" in meta tag just write down <meta property='og:site_name' expr:content='data:blog.title + " blog"'>. Just write variables, text in quotation marks, then link these with +. (If you want to know more about data:, go to here

Caution

• Some attributes inside of b: tags work like have expr: in front of it. You got error when you add expr:.

• You have to use different quotation marks between inside and outside. Not sure whether double quotation marks must be inside but I use that way.

<b:eval>

The tag prints result of a expr:.

Form

Explanation

Really just prints expr:. It is same with <data:> when you just put data:.

cond=' '

Use when you handle conditional statements. Mostly it is attribute of the conditional tags.

This also follows expr:'s rules.

Syntax

Using Tags

• <b:if>
• <b:include>

<b:if>

A if statement. Checks conditions in order.

Form

Explanation

Be executed when cond=' ' is true. You might be used to this if you've coded.

Who don't know can find basic informations by searching if statement.

<b:switch>

A swtich statement. You can set cases about a varable is specific value. Can say this is parallel conditional statement.

Form

Explanation

Statement that executes [detail1] when [variable] is same with [value1], executes [detail2] when [value2], executes [detail3] when there's no same thing. Follows the expr:'s rules.

Caution

This doesn't work with url. I don't know why. Please share if you know how to fix...

<b:loop>

A loop statement.

Form

<b:loop values='[set(variable/["detail", "detail", ...])]' var='[variable_name1]' index='[variable_name2]' reverse='[true/false]'>
  [detail(contains variable_name1, variable_name2)]
</b:loop>

Explanation

Repeats about amount of the values' details. You can use current "detail" with [variable_name1], can use loop count number with [variable_name2], reverses order to input true in reverse=""

You can express sets with square brackets.(This square brackets are not for explanation. This is real code.) ["Apple", "Pear", "Banana"] like this. Let's see example with this.

<ul>
  <b:loop values='["Apple", "Pear", "Banana"] var='fruit' index='number' reverse='true'>
    <li><eval expr='data:number + 1'/>th fruit is .</li>
  </b:loop>
</ul>

If you do this,

• 1th fruit is Banana.
• 2th fruit is Pear.
• 3th fruit is Apple.

you can make this.

Usable Set Variables Collection

You must add data: in front of these to use.

<b:comment>

Tag makes annotations.

Form

Explanation

Annotation. Though not displayed in HTML but can see only in Blogger dashboard. But if you input render='true' displayed as HTML annotations.

There's very useful purpose. You can use this like a console.log() of the Javascript. You can check variable with annotation.