Las etiquetas condicionales para blogger

Page types

Conditional tags for different page types, which allows you to specify a part of your template code on specific types of pages or specific URLs.

Common

# Homepage
<b:if cond='data:view.isHomepage'>
  <!-- https://example.blogspot.com -->
</b:if>

# Post page
<b:if cond='data:view.isPost'>
  <!-- https://example.blogspot.com/<year>/<month>/<permalink>.html -->
</b:if>

# Static page
<b:if cond='data:view.isPage'>
  <!-- https://example.blogspot.com/p/<permalink>.html -->
</b:if>

# Search (label) page
<b:if cond='data:view.isLabelSearch'>
  <!-- 1. https://example.blogspot.com/search/label/<label-name> -->
  <!-- 2. https://example.blogspot.com/search?label=<label-name> -->
</b:if>

# Search (query) page
<b:if cond='data:view.search.query'>
  <!-- https://example.blogspot.com/search?q=<query> -->
</b:if>

# Search (default) page
<b:if cond='data:view.isSearch and !data:view.isLabelSearch and !data:view.search.query'>
  <!-- https://example.blogspot.com/search -->
</b:if>

# Archive page
<b:if cond='data:view.isArchive'>
  <!-- 1. https://example.blogspot.com/<year> -->
  <!-- 2. https://example.blogspot.com/<year>/<month> -->
  <!-- 3. https://example.blogspot.com/<year>_<month>_<day>_archive.html -->
</b:if>

# Error page
<b:if cond='data:view.isError'>
  <!-- https://example.blogspot.com/<404> -->
</b:if>

# Preview page
<b:if cond='data:view.isPreview'>
  <!-- Preview page -->
</b:if>

# Layout mode
<b:if cond='data:view.isLayoutMode'>
  <!-- https://www.blogger.com/blog/layout/<blogID> -->
</b:if>

Specific URLs

# Specific post page
<b:if cond='data:view.url == "https://example.blogspot.com/1945/08/wow.html"'>
  <!-- https://example.blogspot.com/1945/08/wow.html -->
</b:if>

# Specific static page
<b:if cond='data:view.url == "https://example.blogspot.com/p/wow.html"'>
  <!-- https://example.blogspot.com/p/wow.html -->
</b:if>

# Specific search (label) page
<b:if cond='data:view.search.label == "WOW"'>
  <!-- 1. https://example.blogspot.com/search/label/WOW -->
  <!-- 2. https://example.blogspot.com/search?label=WOW -->
</b:if>

# Specific search (query) page
<b:if cond='data:view.search.query == "wow"'>
  <!-- https://example.blogspot.com/search?q=wow -->
</b:if>

Author name

Name of the profile of the post author.

data:posts[i].author

Default

<!-- Author name -->
<b:if cond='data:post.author'>
  <data:post.author.name/>
</b:if>

Default with fallback

<!-- Author name -->
<b:eval expr='data:post.author ? data:post.author.name : "Anonymous"'/>

<!-- Author name -->
<b:if cond='data:post.author'>
  <data:post.author.name/>
<b:else/><!-- fallback -->
  Anonymous
</b:if>

Anchors

<!-- Author name -->
<b:if cond='data:post.author'>
  <b:if cond='data:post.author.profileUrl'>
    <a expr:href='data:post.author.profileUrl'>
      <data:post.author.name/>
    </a>
  <b:else/><!-- no profileUrl -->
    <data:post.author.name/>
  </b:if>
</b:if>

Anchors with fallback

<!-- Author name -->
<b:if cond='data:post.author.profileUrl'>
  <a expr:href='data:post.author.profileUrl'>
    <b:eval expr='data:post.author ? data:post.author.name : "Anonymous"'/>
  </a>
<b:else/><!-- no profileUrl -->
  <b:eval expr='data:post.author ? data:post.author.name : "Anonymous"'/>
</b:if>

<!-- Author name -->
<b:if cond='data:post.author'>
  <b:if cond='data:post.author.profileUrl'>
    <a expr:href='data:post.author.profileUrl'>
      <data:post.author.name/>
    </a>
  <b:else/><!-- no profileUrl -->
    <data:post.author.name/>
  </b:if>
<b:else/><!-- fallback -->
  Anonymous
</b:if>

Author photo

Photo of the profile of the post author.

data:posts[i].author.authorPhoto

img src options

• 128 is size
• 1:1 is aspect ratio
• calculation
  • width = size
    • width = 128
  • height = (size * ratio height) / ratio width
    • height = (128 * 1) / 1 = 128

Default

<!-- Author photo -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <img>
      <!-- class --><b:class name='class-name'/>
      <!-- src --><b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
      <!-- alt --><b:attr expr:value='data:post.author.name' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  </b:if>
</b:with>
</b:with>

Default with fallback

<!-- Author photo -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <img>
      <!-- class --><b:class name='class-name'/>
      <!-- src --><b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
      <!-- alt --><b:attr expr:value='data:post.author.name' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  <b:else/><!-- fallback -->
    <img>
      <!-- class --><b:class name='class-name'/>
      <!-- src --><b:attr name='src' value='https://via.placeholder.com/128x128/777/eee?text=No+Image'/>
      <!-- alt --><b:attr expr:value='data:messages.image' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  </b:if>
</b:with>
</b:with>

Anchors

<!-- Author photo -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <b:tag cond='data:post.author.profileUrl' expr:href='data:post.author.profileUrl' name='a'>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
        <!-- alt --><b:attr expr:value='data:post.author.name' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:tag>
  </b:if>
</b:with>
</b:with>

Anchors with fallback

<!-- Author photo -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <b:tag cond='data:post.author.profileUrl' expr:href='data:post.author.profileUrl' name='a'>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
        <!-- alt --><b:attr expr:value='data:post.author.name' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:tag>
  <b:else/><!-- fallback -->
    <b:tag cond='data:post.author.profileUrl' expr:href='data:post.author.profileUrl' name='a'>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr name='src' value='https://via.placeholder.com/128x128/777/eee?text=No+Image'/>
        <!-- alt --><b:attr expr:value='data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:tag>
  </b:if>
</b:with>
</b:with>

Body

The content of the post.

data:posts[i].body

<!-- Body -->
<data:post.body/>

Comments link

Link to the comments on the post.

data:posts[i].commentsUrl

Default

<!-- Comments link -->
<b:if cond='data:post.allowComments'>
  <a expr:href='data:post.commentsUrl'>
    <data:messages.comments/>
  </a>
</b:if>

Date

Date of the post.

data:posts[i].date

Default (published)

<!-- Date (published) -->
<time expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
  <data:post.date/>
</time>

Using custom format

<!-- Date (published) -->
<time expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
  <b:eval expr='format(data:post.date, "dd/MM/YYYY")'/>
</time>

Last updated

<!-- Date (updated) -->
<time expr:datetime='data:post.lastUpdated.iso8601' expr:title='data:post.lastUpdated.iso8601'>
  <data:post.lastUpdated/>
</time>

Using custom format

<!-- Date (updated) -->
<time expr:datetime='data:post.lastUpdated.iso8601' expr:title='data:post.lastUpdated.iso8601'>
  <b:eval expr='format(data:post.lastUpdated, "dd/MM/YYYY")'/>
</time>

Custom format

Period	Symbol	Example output	Description
Year	YY	17	Year, 2 digits
	YYYY	2017	Year, 4 digits
Month	M	1, 11	Month, minimum 1 digit
	MM	01, 11	Month, 2 digits
	MMM	Jan, Nov	Month, 3 Letters
	MMMM	January, November	Month, full name
	MMMMM	J, N	Month, 1st letter
Week	w	1, 11	Week of the year, minimum 1 digit
	ww	01, 11	Week of the year, 2 digits
	W	4	Week of the month, 1 digit
Day	d	1, 11	Day of the month, minimum 1 digit
	dd	01, 11	Day of the month, 2 digits
	D	1, 55, 362	Day of the year, minimum 1 digit
	DD	01, 55, 362	Day of the year, minimum 2 digits
	DDD	001, 055, 362	Day of the year, minimum 3 digits
	F	3	Xth day of the month. Example, the 3rd Tuesday of the month.
	E	M, T	Name of the day of the week. 1 letter
	EE	Mo, Tu	Name of the day of the week. 2 letters
	EEE	Mon, Tue	Name of the day of the week. 3 letters
	EEEE	Monday, Tuesday	Full name of the day of the week.
Time of day	aaaa	AM, PM	Names may vary depending on the region.
	bbbb	Morning, Afternoon, Evening
	BBBB
Hour	h	1, 11	Time [1-12], minimum 1 digit
	hh	01, 11	Time [1-12], 2 digits
	H	1, 21	Time [0-23], minimum 1 digit
	HH	01, 21	Time [0-23], 2 digits
Minute	m	1, 59	Minute, minimum 1 digit
	mm	01, 59	Minute, 2 digits

Featured image

The featured image for the post.

data:posts[i].featuredImage

img src options

• 800 is size
• 16:9 is aspect ratio
• calculation
  • width = size
    • width = 800
  • height = (size * ratio height) / ratio width
    • height = (800 * 9) / 16 = 450

Default

<!-- Featured image -->
<b:with value='800' var='size'>
<b:with value='"16:9"' var='ratio'>
  <b:if cond='data:post.featuredImage'>
    <b:if cond='data:post.featuredImage.isYoutube'>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='src'/>
        <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    <b:else/>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage' name='src'/>
        <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:if>
  </b:if>
</b:with>
</b:with>

Default with fallback

<!-- Featured image -->
<b:with value='800' var='size'>
<b:with value='"16:9"' var='ratio'>
  <b:if cond='data:post.featuredImage'>
    <b:if cond='data:post.featuredImage.isYoutube'>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='src'/>
        <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    <b:else/>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage' name='src'/>
        <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:if>
  <b:else/><!-- fallback -->
    <img>
      <!-- class --><b:class name='class-name'/>
      <!-- src --><b:attr expr:value='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvqvsIC2dBqeL95c166Y_w45mgqz3WxITzKG375pUb3-tASFY1G-3NwRzzEouGKci5yFbvk-uICjFrVzS_xPPKU6Ti0V7OU1HX5IQIWo0Q0YrgIOfMWP3JVr9NYbjdtiHdyxPek0f3nE/w1920-h1080-rw-no/", data:size, data:ratio)' name='src'/>
      <!-- alt --><b:attr expr:value='data:messages.image' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  </b:if>
</b:with>
</b:with>

Responsive images

<!-- Featured image -->
<b:with value='800' var='size'>
<b:with value='"16:9"' var='ratio'>
  <b:if cond='data:post.featuredImage'>
    <b:if cond='data:post.featuredImage.isYoutube'>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='src'/>
        <!-- srcset --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, [200,400,800,1200,1600], data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='srcset'/>
        <!-- sizes --><b:attr name='sizes' value='100vw'/>
        <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    <b:else/>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage' name='src'/>
        <!-- srcset --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, [200,400,800,1200,1600], data:ratio) : data:post.featuredImage' name='srcset'/>
        <!-- sizes --><b:attr name='sizes' value='100vw'/>
        <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:if>
  </b:if>
</b:with>
</b:with>

Responsive images with fallback

<!-- Featured image -->
<b:with value='800' var='size'>
<b:with value='"16:9"' var='ratio'>
  <b:if cond='data:post.featuredImage'>
    <b:if cond='data:post.featuredImage.isYoutube'>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='src'/>
        <!-- srcset --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, [200,400,800,1200,1600], data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='srcset'/>
        <!-- sizes --><b:attr name='sizes' value='100vw'/>
        <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    <b:else/>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage' name='src'/>
        <!-- srcset --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, [200,400,800,1200,1600], data:ratio) : data:post.featuredImage' name='srcset'/>
        <!-- sizes --><b:attr name='sizes' value='100vw'/>
        <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:if>
  <b:else/><!-- fallback -->
    <img>
      <!-- class --><b:class name='class-name'/>
      <!-- src --><b:attr expr:value='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvqvsIC2dBqeL95c166Y_w45mgqz3WxITzKG375pUb3-tASFY1G-3NwRzzEouGKci5yFbvk-uICjFrVzS_xPPKU6Ti0V7OU1HX5IQIWo0Q0YrgIOfMWP3JVr9NYbjdtiHdyxPek0f3nE/w1920-h1080-rw-no/", data:size, data:ratio)' name='src'/>
      <!-- srcset --><b:attr expr:value='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvqvsIC2dBqeL95c166Y_w45mgqz3WxITzKG375pUb3-tASFY1G-3NwRzzEouGKci5yFbvk-uICjFrVzS_xPPKU6Ti0V7OU1HX5IQIWo0Q0YrgIOfMWP3JVr9NYbjdtiHdyxPek0f3nE/w1920-h1080-rw-no/", [200,400,800,1200,1600], data:ratio)' name='srcset'/>
      <!-- sizes --><b:attr name='sizes' value='100vw'/>
      <!-- alt --><b:attr expr:value='data:messages.image' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  </b:if>
</b:with>
</b:with>

Anchors

<!-- Featured image -->
<b:with value='800' var='size'>
<b:with value='"16:9"' var='ratio'>
  <b:if cond='data:post.featuredImage'>
    <b:if cond='data:post.featuredImage.isYoutube'>
      <a expr:href='data:post.link ?: data:post.url'>
        <img>
          <!-- class --><b:class name='class-name'/>
          <!-- src --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='src'/>
          <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
          <b:attr name='b:whitespace' value='remove'/>
        </img>
      </a>
    <b:else/>
      <a expr:href='data:post.link ?: data:post.url'>
        <img>
          <!-- class --><b:class name='class-name'/>
          <!-- src --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage' name='src'/>
          <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
          <b:attr name='b:whitespace' value='remove'/>
        </img>
      </a>
    </b:if>
  </b:if>
</b:with>
</b:with>

Anchors with fallback

<!-- Featured image -->
<b:with value='800' var='size'>
<b:with value='"16:9"' var='ratio'>
  <b:if cond='data:post.featuredImage'>
    <b:if cond='data:post.featuredImage.isYoutube'>
      <a expr:href='data:post.link ?: data:post.url'>
        <img>
          <!-- class --><b:class name='class-name'/>
          <!-- src --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='src'/>
          <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
          <b:attr name='b:whitespace' value='remove'/>
        </img>
      </a>
    <b:else/>
      <a expr:href='data:post.link ?: data:post.url'>
        <img>
          <!-- class --><b:class name='class-name'/>
          <!-- src --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage' name='src'/>
          <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
          <b:attr name='b:whitespace' value='remove'/>
        </img>
      </a>
    </b:if>
  <b:else/><!-- fallback -->
    <a expr:href='data:post.link ?: data:post.url'>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvqvsIC2dBqeL95c166Y_w45mgqz3WxITzKG375pUb3-tASFY1G-3NwRzzEouGKci5yFbvk-uICjFrVzS_xPPKU6Ti0V7OU1HX5IQIWo0Q0YrgIOfMWP3JVr9NYbjdtiHdyxPek0f3nE/w1920-h1080-rw-no/", data:size, data:ratio)' name='src'/>
        <!-- alt --><b:attr expr:value='data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </a>
  </b:if>
</b:with>
</b:with>

Anchors with responsive images

<!-- Featured image -->
<b:with value='800' var='size'>
<b:with value='"16:9"' var='ratio'>
  <b:if cond='data:post.featuredImage'>
    <b:if cond='data:post.featuredImage.isYoutube'>
      <a expr:href='data:post.link ?: data:post.url'>
        <img>
          <!-- class --><b:class name='class-name'/>
          <!-- src --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='src'/>
          <!-- srcset --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, [200,400,800,1200,1600], data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='srcset'/>
          <!-- sizes --><b:attr name='sizes' value='100vw'/>
          <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
          <b:attr name='b:whitespace' value='remove'/>
        </img>
      </a>
    <b:else/>
      <a expr:href='data:post.link ?: data:post.url'>
        <img>
          <!-- class --><b:class name='class-name'/>
          <!-- src --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage' name='src'/>
          <!-- srcset --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, [200,400,800,1200,1600], data:ratio) : data:post.featuredImage' name='srcset'/>
          <!-- sizes --><b:attr name='sizes' value='100vw'/>
          <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
          <b:attr name='b:whitespace' value='remove'/>
        </img>
      </a>
    </b:if>
  </b:if>
</b:with>
</b:with>

Anchors with responsive images and fallback

<!-- Featured image -->
<b:with value='800' var='size'>
<b:with value='"16:9"' var='ratio'>
  <b:if cond='data:post.featuredImage'>
    <b:if cond='data:post.featuredImage.isYoutube'>
      <a expr:href='data:post.link ?: data:post.url'>
        <img>
          <!-- class --><b:class name='class-name'/>
          <!-- src --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='src'/>
          <!-- srcset --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, [200,400,800,1200,1600], data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='srcset'/>
          <!-- sizes --><b:attr name='sizes' value='100vw'/>
          <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
          <b:attr name='b:whitespace' value='remove'/>
        </img>
      </a>
    <b:else/>
      <a expr:href='data:post.link ?: data:post.url'>
        <img>
          <!-- class --><b:class name='class-name'/>
          <!-- src --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage' name='src'/>
          <!-- srcset --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, [200,400,800,1200,1600], data:ratio) : data:post.featuredImage' name='srcset'/>
          <!-- sizes --><b:attr name='sizes' value='100vw'/>
          <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
          <b:attr name='b:whitespace' value='remove'/>
        </img>
      </a>
    </b:if>
  <b:else/><!-- fallback -->
    <a expr:href='data:post.link ?: data:post.url'>
      <img>
        <!-- class --><b:class name='class-name'/>
        <!-- src --><b:attr expr:value='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvqvsIC2dBqeL95c166Y_w45mgqz3WxITzKG375pUb3-tASFY1G-3NwRzzEouGKci5yFbvk-uICjFrVzS_xPPKU6Ti0V7OU1HX5IQIWo0Q0YrgIOfMWP3JVr9NYbjdtiHdyxPek0f3nE/w1920-h1080-rw-no/", data:size, data:ratio)' name='src'/>
        <!-- srcset --><b:attr expr:value='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvqvsIC2dBqeL95c166Y_w45mgqz3WxITzKG375pUb3-tASFY1G-3NwRzzEouGKci5yFbvk-uICjFrVzS_xPPKU6Ti0V7OU1HX5IQIWo0Q0YrgIOfMWP3JVr9NYbjdtiHdyxPek0f3nE/w1920-h1080-rw-no/", [200,400,800,1200,1600], data:ratio)' name='srcset'/>
        <!-- sizes --><b:attr name='sizes' value='100vw'/>
        <!-- alt --><b:attr expr:value='data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </a>
  </b:if>
</b:with>
</b:with>

CSS background-image

<!-- Featured image -->
<b:with value='800' var='size'>
<b:with value='"16:9"' var='ratio'>
  <b:if cond='data:post.featuredImage'>
    <div class='class-name'><!-- target -->
      <b:if cond='data:post.featuredImage.isYoutube'>
        <!-- style --><b:attr expr:value='"background-image: url(" + (data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl) + ");"' name='style'/>
      <b:else/>
        <!-- style --><b:attr expr:value='"background-image: url(" + (data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage) + ");"' name='style'/>
      </b:if>
    </div>
  </b:if>
</b:with>
</b:with>

CSS background-image with fallback

<!-- Featured image -->
<b:with value='800' var='size'>
<b:with value='"16:9"' var='ratio'>
  <div class='class-name'><!-- target -->
    <b:if cond='data:post.featuredImage'>
      <b:if cond='data:post.featuredImage.isYoutube'>
        <!-- style --><b:attr expr:value='"background-image: url(" + (data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl) + ");"' name='style'/>
      <b:else/>
        <!-- style --><b:attr expr:value='"background-image: url(" + (data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage) + ");"' name='style'/>
      </b:if>
    <b:else/><!-- fallback -->
      <!-- style --><b:attr expr:value='"background-image: url(" + resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvqvsIC2dBqeL95c166Y_w45mgqz3WxITzKG375pUb3-tASFY1G-3NwRzzEouGKci5yFbvk-uICjFrVzS_xPPKU6Ti0V7OU1HX5IQIWo0Q0YrgIOfMWP3JVr9NYbjdtiHdyxPek0f3nE/w1920-h1080-rw-no/", data:size, data:ratio) + ");"' name='style'/>
    </b:if>
  </div>
</b:with>
</b:with>

Labels

Labels of the post.

data:posts[i].labels

Link options

• 12 is maximum number of posts in label page

Default

<!-- Labels -->
<b:if cond='data:post.labels'>
  <b:loop index='i' values='data:post.labels' var='label'>
    <a expr:href='params(data:label.url, { max-results: "12" })'>
      <data:label.name/>
    </a>
  </b:loop>
</b:if>

Default with fallback

<!-- Labels -->
<b:if cond='data:post.labels'>
  <b:loop index='i' values='data:post.labels' var='label'>
    <a expr:href='params(data:label.url, { max-results: "12" })'>
      <data:label.name/>
    </a>
  </b:loop>
<b:else/><!-- fallback -->
  Unlabelled
</b:if>

Comma

<!-- Labels -->
<b:if cond='data:post.labels'>
  <b:loop index='i' values='data:post.labels' var='label'>
    <a expr:href='params(data:label.url, { max-results: "12" })'>
      <data:label.name/>
    </a><b:if cond='data:i != (data:post.labels.size - 1)'>,</b:if>
  </b:loop>
</b:if>

Comma with fallback

<!-- Labels -->
<b:if cond='data:post.labels'>
  <b:loop index='i' values='data:post.labels' var='label'>
    <a expr:href='params(data:label.url, { max-results: "12" })'>
      <data:label.name/>
    </a><b:if cond='data:i != (data:post.labels.size - 1)'>,</b:if>
  </b:loop>
<b:else/><!-- fallback -->
  Unlabelled
</b:if>

Read more

Link to the full post.

<!-- Read more -->
<b:if cond='data:post.hasJumpLink'>
  <a expr:href='fragment(data:post.url, "more")'>
    <b:attr expr:value='data:post.title ? data:post.title : ""' name='title'/>
    <data:blog.jumpLinkMessage/>
  </a>
<b:else/>
  <b:if cond='data:post.snippets'>
    <a expr:href='data:post.url' role='button'>
      <b:attr expr:value='data:post.title ? data:post.title : ""' name='title'/>
      <data:messages.keepReading/>
    </a>
  </b:if>
</b:if>

Sharing

The share buttons for the post.

data:posts[i].shareUrl

Default

<!-- Sharing -->
<a expr:href='params(data:post.shareUrl, { target: "twitter" })' target='_blank'>
  Twitter
</a>
<a expr:href='params(data:post.shareUrl, { target: "facebook" })' target='_blank'>
  Facebook
</a>
<a expr:href='params(data:post.shareUrl, { target: "pinterest" })' target='_blank'>
  Pinterest
</a>
<a expr:href='params(data:post.shareUrl, { target: "email" })' target='_blank'>
  Email
</a>
<a expr:href='params(data:post.shareUrl, { target: "blog" })' target='_blank'>
  BlogThis!
</a>

Dropdown example

<!-- Sharing -->
<div class='dropdown'>
  <a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' expr:title='data:messages.share' href='#'>
    <data:messages.share/>
  </a>
  <div class='dropdown-menu'>
    <a class='dropdown-item' expr:href='params(data:post.shareUrl, { target: "twitter" })' target='_blank'>
      Twitter
    </a>
    <a class='dropdown-item' expr:href='params(data:post.shareUrl, { target: "facebook" })' target='_blank'>
      Facebook
    </a>
    <a class='dropdown-item' expr:href='params(data:post.shareUrl, { target: "pinterest" })' target='_blank'>
      Pinterest
    </a>
    <a class='dropdown-item' expr:href='params(data:post.shareUrl, { target: "email" })' target='_blank'>
      Email
    </a>
    <a class='dropdown-item' expr:href='params(data:post.shareUrl, { target: "blog" })' target='_blank'>
      BlogThis!
    </a>
  </div>
</div>

Snippet

Snippet of the post's content.

data:posts[i].snippets

Short

<!-- Snippet -->
<data:post.snippets.short/>

Support for jump break:

<!-- Snippet -->
<b:if cond='data:post.hasJumpLink'>
  <data:post.body/>
<b:else/>
  <data:post.snippets.short/>
</b:if>

Long

<!-- Snippet -->
<data:post.snippets.long/>

Support for jump break:

<!-- Snippet -->
<b:if cond='data:post.hasJumpLink'>
  <data:post.body/>
<b:else/>
  <data:post.snippets.long/>
</b:if>

Custom

<!-- Snippet -->
<b:eval expr='snippet(data:post.snippets.long, { length: 150, links: false, linebreaks: false, ellipsis: true })'/>

Support for jump break:

<!-- Snippet -->
<b:if cond='data:post.hasJumpLink'>
  <data:post.body/>
<b:else/>
  <b:eval expr='snippet(data:post.snippets.long, { length: 150, links: false, linebreaks: false, ellipsis: true })'/>
</b:if>

Title

Title of the post.

data:posts[i].title

Default

<!-- Title -->
<b:if cond='data:post.title'>
  <data:post.title/>
</b:if>

Default with fallback

<!-- Title -->
<b:eval expr='data:post.title ? data:post.title : data:messages.noTitle'/>

<!-- Title -->
<b:if cond='data:post.title'>
  <data:post.title/>
<b:else/><!-- fallback -->
  <data:messages.noTitle/>
</b:if>

Anchors

<!-- Title -->
<b:if cond='data:post.title'>
  <a expr:href='data:post.link ?: data:post.url'>
    <data:post.title/>
  </a>
</b:if>

Anchors with fallback

<!-- Title -->
<a expr:href='data:post.link ?: data:post.url'>
  <b:eval expr='data:post.title ? data:post.title : data:messages.noTitle'/>
</a>

<!-- Title -->
<b:if cond='data:post.title'>
  <a expr:href='data:post.link ?: data:post.url'>
    <data:post.title/>
  </a>
<b:else/><!-- fallback -->
  <a expr:href='data:post.link ?: data:post.url'>
    <data:messages.noTitle/>
  </a>
</b:if>