When you're editing a Blogger template, you’ll often come across attributes like expr:href
or expr:class
. If you're new to XML-based templates, this might seem confusing at first — but once you understand it, it opens up a whole new level of flexibility in your design.
In this post, I’ll guide you through:
- What the
expr:
attribute means - How it works in Blogger templates
- How to use it correctly with practical examples
๐ What is expr:
in Blogger?
Blogger templates are written in XML, not plain HTML. To allow logic or dynamic values, Blogger uses the expr:
prefix before an attribute name (like href
or src
).
This lets you bind an expression — typically a variable from Blogger’s data:
object — to the attribute dynamically.
Example: Instead of hardcoding a post link, you can write:
<a expr:href='data:post.url'>Read more</a>
This means the link will change automatically for each post.
๐ง Syntax of expr:
<element expr-attribute='expression'>Content</element>
Parts:
- expr-attribute: The attribute you want to make dynamic (like
href
,src
,class
, etc.) - expression: Usually uses Blogger’s built-in
data:
object (likedata:post.title
ordata:blog.url
)
๐งช Common expr:
Expressions in Blogger
data:post.title
— Post titledata:post.url
— Full post URLdata:post.thumbnailUrl
— Post imagedata:blog.pageTitle
— Current page titledata:blog.language
— Blog's languagedata:blog.mobile
— Boolean for mobile view
✅ Practical Examples of expr:
Use
1. Dynamic Post Link
<a expr:href='data:post.url'>Read more</a>
2. Post Image Thumbnail
<img expr:src='data:post.thumbnailUrl' alt='Post image' />
3. Fallback Thumbnail with Ternary
<img expr:src='data:post.thumbnailUrl ? data:post.thumbnailUrl : "/images/default.png"' />
4. Add Class Based on View Type
<div expr:class='data:blog.mobile ? "mobile" : "desktop"'>
5. Page Title in <meta> Tag
<meta expr:content='data:blog.pageTitle' name='title' />
๐ Where Can You Use expr:
in a Blogger Template?
Anywhere that you want a dynamic value inside:
<a>
– for dynamic links<img>
– for post thumbnails<meta>
– for SEO metadata<div>
,<section>
– to switch class/style dynamically- Inside widgets and
<b:includable>
blocks
It's especially useful when building custom templates or optimizing how your blog handles data per post, page, or layout.
๐ฌ Final Thoughts
Understanding the expr:
attribute gives you dynamic control in your Blogger templates. You no longer need to repeat code or hardcode values — instead, you can let Blogger handle the logic based on its built-in variables.
Now that you know how expr:
works, go ahead and explore your template. You’ll start noticing where you can replace static code with smarter, dynamic expressions.
Need help editing your Blogger template?
Drop a comment below or explore more tutorials on atfreecode.blogspot.com — we simplify Blogger, one tag at a time. ๐