Blogger expr: Attribute — Complete Guide & Examples

If you’ve ever hardcoded the same values across multiple widgets in a Blogger theme, you know how quickly things get messy. That’s exactly the problem the expr: attribute solves. Short for “expression,” expr: tells Blogger that an attribute’s value isn’t a static string—it’s a dynamic expression that can read data from the current view, run simple logic, chain operators, and return a clean, final value at render time. Used well, expr: turns a rigid template into a flexible, data-driven theme that’s easier to maintain and far more powerful.

This guide walks you through what the Blogger expression attribute is, how it’s structured, the kinds of data it can return, and how to use it safely in real templates. We’ll cover basic usage, step-by-step patterns, advanced tricks with <b:with>, and common pitfalls—plus plenty of copy-paste examples you can drop into your theme today.

What Is the Blogger Expression Attribute?

In Blogger templates, most HTML attributes accept plain strings. When you prefix an attribute with expr:—for example expr:class, expr:id, or expr:src—you’re telling the template engine: “evaluate the value as an expression, then write the result into the final HTML.” That expression can read built-in data:view.* variables, access post data, concatenate strings, use operators, or even compose new data using <b:with>.

<div expr:class='{EXPRESSION}' expr:id='{EXPRESSION}' expr:style='{EXPRESSION}'></div>

At render time, Blogger evaluates each expression and writes the computed value into the standard attribute. No heavy JavaScript needed—just clean, server-rendered HTML.

Why `expr:` Matters

Fewer manual edits: Pull values from the current view or post instead of typing them repeatedly.
Consistent design logic: Generate classes, IDs, and inline styles from a single source of truth.
Better performance: Expressions render on the server side; pages ship ready to paint.
Safer templates: Less ad-hoc JavaScript means fewer race conditions and fewer places for bugs to hide.

Expression Building Blocks

An expression can include three kinds of pieces:

Operators (e.g., formatters, image helpers)
Blogger data (e.g., data:view.title, data:post.url)
String literals (e.g., "Featured")

Expressions return values in different types. Common ones you’ll encounter include strings, booleans, numbers, URLs, images, dates, locales, messages, skin variables, objects, and arrays of those types. You don’t have to memorize them all—what matters is matching the type to the attribute you’re setting. For example, expr:href expects a URL, while expr:class expects a string.

Quick Syntax Tour

Use the expr: prefix on any standard HTML attribute when you want the value computed dynamically:

<div expr:class='data:view.search.label'
     expr:id='data:view.postId'></div>

Rendered HTML might look like:

<div class="Blog" id="123456789"></div>

Notice how the expression values are replaced with final strings during rendering. From there, the browser just sees normal HTML.

Step-by-Step: Using `expr:` in a Real Template

Identify the dynamic value. Do you need a per-post class, a conditional ID, or a dynamic image URL?
Find the data source. Browse available fields like data:post.* or data:view.* inside your <b:includable> block.
Convert to expression syntax. Replace class="..." with expr:class="..." and write an expression that concatenates or selects the value.
Test on multiple views. Some fields differ on index vs. item pages. Use data:view.isMultipleItems to branch if needed.
Harden the output. Provide sensible fallbacks so your UI doesn’t break if data is missing.

Example: Automatic Body Class per View

<body expr:class='"view-" + data:view.type'></body>

Outputs view-Blog on listing pages and view-Item on single posts—super handy for scoped CSS.

Example: Conditional Badge

<span expr:class='data:post.isPopular ? "badge badge-hot" : "badge"'>
  Hot
</span>

Uses a boolean to switch classes at render time. Clean and fast.

Digging Deeper: Common Data Types & Patterns

Below are frequent return types you’ll use in expressions, with quick notes on where they fit.

string — for class, title, aria-*, sizes.
boolean — to toggle classes or attributes via ternaries.
number — for numeric IDs or inline style math.
URL/image — for href, src, srcset.
date — for display and machine-readable meta (convert with operators when needed).
array/object — to feed loops (<b:loop>) or build srcset strings.

Dynamic Images with `expr:`

When working with images, expr: pairs nicely with Blogger’s image operators. You can request specific widths, ratios, and even build responsive srcset values on the fly.

<img
  expr:src='resizeImage(data:post.firstPhoto, 800, "16:9")'
  expr:srcset='sourceSet(data:post.firstPhoto, [400,800,1200,1600], "16:9")'
  sizes='(max-width: 600px) 100vw, 600px'
  alt='Post cover' />

All this happens server-side. The browser receives a standard <img> with optimal URLs.

Working with `<b:with>` for Reusable Data

<b:with> lets you define local variables that you can reuse within a block—great for cleaning up expressions and avoiding repetition. You can nest <b:with> blocks and pass values into each other.

Example: Capture the View Type and Build a Data Reference

<b:with value='data:view.isMultipleItems ? &quot;view.type&quot; : &quot;view.type&quot;' var='dataName'>
  <b:with expr:value='&quot;data:&quot; + data:dataName' var='newData'>
    Hasilnya adalah data:<data:dataName /> : <data:newData />
  </b:with>
</b:with>

This pattern grabs a string key (e.g., view.type), then composes a new data:* reference from it. It’s especially useful when you’d otherwise duplicate the same markup just to switch a single data path.

Real-World Use Cases (Copy & Paste)

1) Dynamic IDs and ARIA Labels

<section
  expr:id='"post-" + data:post.id'
  expr:aria-label='"Article: " + data:post.title'>
</section>

2) Conditional Featured Ribbon

<div expr:class='(data:post.featured ? "ribbon show " : "ribbon ") + "ribbon-top-right"'>
  <span>Featured</span>
</div>

3) Search Page Hint

<p expr:class='data:view.isSearch ? "muted show" : "muted"'>
  Showing results for your query.
</p>

4) Locale-Aware Dates

<time expr:datetime='data:post.timestampISO'>
  <data:post.dateHeader/>
</time>

Use the ISO value for machine readability, while the content shows the localized date header.

5) Smart “Read More” URLs

<a expr:href='data:post.url' rel='bookmark'>Read more</a>

Advanced Patterns with Operators

Expressions get even more powerful when chained with operators. A few handy ideas:

Compose classes: expr:class='"card " + (data:post.hasImage ? "card-has-image" : "card-plain")'
Clamp inline styles: expr:style='"--clamp-lines:" + (data:post.title.length > 80 ? 2 : 3)'
Safe fallbacks: expr:alt='data:post.firstPhoto ? "Cover: " + data:post.title : "No image available"'

Best Practices

Keep expressions readable. If it’s getting long, store parts in <b:with> variables.
Match types to attributes. Don’t put a boolean into href. If needed, use a ternary to convert.
Prefer functional image syntax. resizeImage(img, 800, "16:9") is clearer than long operator chains.
Design for all views. Use data:view.isMultipleItems and data:view.isPage branches to keep layouts consistent.
Accessibility matters. Generate informative alt, aria-label, and visible focus states.

Extra Tips & Advanced Use Cases

1) Toggle Blocks with `<b:if>` + Expressions

<b:if cond='data:view.isSearch'>
  <p>Search results for: <data:view.search.query /></p>
</b:if>

Combine <b:if> with expr: inside attributes to keep logic declarative and maintainable.

2) Multiple Image Breakpoints in Lists

<b:loop values='data:posts' var='p'>
  <img
    expr:src='resizeImage(data:p.firstPhoto, 480, "4:3")'
    expr:srcset='sourceSet(data:p.firstPhoto, [240,480,720,960], "4:3")'
    sizes='(max-width: 768px) 50vw, 240px'
    expr:alt='"Thumbnail: " + data:p.title' />
</b:loop>

3) Compose Data Keys Dynamically

When you need to select keys by name (e.g., pick one of several fields), build the reference with <b:with> and then read the result once.

<b:with value='data:view.isMultipleItems ? "post.title" : "post.title"' var='k'>
  <b:with expr:value='"data:" + data:k' var='ref'>
    <h2><data:ref/></h2>
  </b:with>
</b:with>

FAQ

Do I need `expr:` on every attribute?

No. Use it when a value must be computed from data or logic. Static strings are fine as regular attributes.

What happens if an expression fails?

Usually the attribute renders empty or not at all. In extreme cases, a malformed expression can break a block. Test incrementally and keep expressions simple.

Can I chain multiple operators?

Yes. You can chain them (e.g., image helpers), or use functional syntax for clarity. If a chain is unreadable, refactor with <b:with>.

Is this the same as JavaScript?

No. Expressions are evaluated by Blogger’s template engine during render. The browser gets plain HTML—faster and less fragile than client-side hacks.

Can I access custom JSON data?

You can’t import arbitrary JSON into expressions, but you can leverage Blogger’s provided data objects and operators. For external data, use server-side tools or client JS.

Troubleshooting

Nothing renders: Check that your attribute is prefixed with expr: and that quotes are balanced. Nested quotes often cause silent failures.
Wrong value on some pages: You may be reading a field that only exists on item pages. Branch on data:view.isMultipleItems or guard with a ternary.
Broken images: Confirm the source is a Google-hosted URL if you’re using image operators. External hosts won’t honor those parameters.
Layout shifts: For images, set predictable aspect ratios and declare width/height or use CSS to reserve space.
Hard-to-read expressions: Move parts into <b:with> variables and reuse them. Future you will thank you.

Copy-Ready Snippets (Plug & Play)

Dynamic Card Class by Label

<article
  expr:class='"card " + (data:post.labels.any ? "card-labeled" : "card-plain")'>
  <h2 class='card-title'><data:post.title /></h2>
</article>

Accessible Thumb with Fallback

<img
  expr:src='data:post.firstPhoto ?: "https://via.placeholder.com/800x450"'
  expr:alt='data:post.firstPhoto ? "Cover: " + data:post.title : "Placeholder image"' />

Per-View Navigation State

<nav expr:class='"nav " + (data:view.type == "Item" ? "nav-article" : "nav-list")'></nav>

Inline Style with Calculated Custom Property

<div expr:style='"--thumb-ratio:" + (data:view.isMultipleItems ? "56.25%" : "66.66%")'></div>

Putting It All Together: Mini Template Fragment

&lt;article
  expr:id='"post-" + data:post.id'
  expr:class='"post-card view-" + data:view.type'&gt;

<header class='post-card__head'>
<h2 class='post-card__title'>
<a expr:href='data:post.url' rel='bookmark'><data:post.title /></a>
</h2>
</header>

<figure class='post-card__media'>
<img
expr:src='resizeImage(data:post.firstPhoto, 720, "16:9")'
expr:srcset='sourceSet(data:post.firstPhoto, [360,720,1080,1440], "16:9")'
sizes='(max-width: 640px) 100vw, 640px'
expr:alt='"Thumbnail: " + data:post.title' />
</figure>

<p class='post-card__excerpt'><data:post.snippet /></p>

<footer class='post-card__meta'>
<time expr:datetime='data:post.timestampISO'><data:post.dateHeader /></time>
</footer>

</article>

Conclusion

The expr: attribute is a small prefix with big impact. It lets your Blogger theme adapt to context, pull in the right data, and render clean, efficient HTML—all without fragile client-side hacks. Start by converting repeated strings into expressions, then layer in conditional classes, image operators, and <b:with> variables to keep everything readable. With a few well-placed expressions, your template becomes simpler to maintain, faster to load, and easier to evolve.

Was this helpful? If you learned something new, please bookmark this guide, share it with a friend who builds on Blogger, and subscribe so you don’t miss the next deep-dive tutorial.

Comment Guidelines

Please keep your comments relevant to the topic (Blogger, SEO, coding, etc.).

Be respectful — no spam, offensive language, or personal attacks.

You may share suggestions, bug reports, or tutorial requests.

External links are allowed only if they are truly helpful and not for promotion.

Feedback will be reviewed, and I will try to reply as soon as possible.

By commenting here, you help improve KodeRian and keep the discussion useful for everyone.