How to Create Dynamic Widgets

Learn the foundational principles of creating widgets that are customizable and context-aware.

Dynamic widgets are the cornerstone of a professional Blogger theme. They allow users to customize their site from the Layout dashboard and display different content based on the context (e.g., showing a welcome message only on the homepage). This lesson covers the core concepts.

The Anatomy of a Dynamic Widget

A dynamic widget relies on three key Blogger features working together:

  • `<b:section>`: The container in your theme that allows users to add/move widgets in the Layout editor.
  • `<b:widget>`: The widget itself. Its settings (like the title) can be edited by the user.
  • Conditional Tags (`<b:if>`) and Data Tags (`data:...`): The logic inside the widget that changes what is displayed based on the current page or other conditions.

Making Widgets Context-Aware

The most common way to make a widget dynamic is to wrap its content in a conditional `b:if` tag. You can check the page type, whether the user is on the homepage, or if a post has certain features.

Code Examples

xmlWidget Showing Different Titles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- This widget is placed in a section, e.g., the sidebar -->
<b:widget id='HTML10' type='HTML' title='Welcome'>
  <b:includable id='main'>
    <b:if cond='data:view.isHomepage'>
      <!-- On the homepage, show the user-configured widget title -->
      <h2><data:widget.title/></h2>
      <div class='widget-content'>
        Welcome to our blog! Check out our latest posts.
      </div>
    <b:elseif cond='data:view.isPost'/>
       <!-- On a post page, show a different title -->
      <h2>About this Post</h2>
       <div class='widget-content'>
        Thanks for reading! Share this post if you liked it.
      </div>
    </b:if>
  </b:includable>
</b:widget>

Pro Tip

Always give your sections and widgets clear, unique IDs. This prevents conflicts and makes your Layout editor easier for users to understand.

Was this lesson helpful?

Have feedback, found an issue, or have a suggestion? Let us know!

Send Feedback