In part two of the Blogger Template Design from Scratch, widget tag were explained in depth. In this part, an important component of the blogger template design, the data tag will be explained along with looping and conditional tags.
This is similar to the if/else statement in other programming languages. This can be used to display some components or data based on a condition.
<b:if cond='condition'> [content to display if condition is true] <b:else/> [content to display if condition is false] </b:if>
b:else part is optional. If there is no else, the result will be the content inside the
b:if tag when the condition results to true.
For the condition, you must place something that results in either true or false(like a boolean type). You can directly include a value from data which is itself either true or false, like
data:post.allowComments. allowComments is true if comments are allowed for that post, false otherwise.
<b:if cond='data:post.numComments > 1'>- True if the current post has more than one comment.
<b:if cond='data:blog.pageType == "item"'>- True if the current page is an item page (post page).
Or you can compare two values that might result in either true or false.
<b:if cond='data:post.numComments > 1'> [Comments are available] <b:else/> [Comments are not available] </b:if>
b:loop tag allows you to repeat a particular section multiple times. This is useful to display list/set of data elements like labels in a post, comments for a post and posts.
<b:loop var='identifier' values='set-of-data'> [content that will be repeated] </b:loop>
The values attribute is where the actual data list will be passed. Then each of the data item in the list will be looped through the content inside the loop. Inside the loop that data item will identified using the identifier provided to the var attribute.
<b:loop var='post' values='data:posts'> <h2><data:post.title/></h2> </b:loop>
The above will loop through each post available and will display the title for the post.
data: is one of the most important element for the blog. This is where all the content of a blog comes from. Contents like title, url, posts(collection of post) and every bit of information displayed in the blog.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <data:title/> </b:widget>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false'> <b:includable id='main'> <h3><data:title/></h3> </b:includable> </b:widget> <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <h3><data:title/></h3> </b:includable> </b:widget>
In the above example, both the widget has
<data:title/> dispalyed in it. But the title that is displayed will be different for the both widgets(though the title is the one provided in the "title" attribute of the widget, but it is stored in the data tag). Try putting this code in your test blog and view the output.
In blogger we would write the above as,
<b:if cond='data:blog.pageType != "item"'> <data:blog.title/> <b:else/> <data:blog.pageName/> </b:if>
In blogger the blog part of the data is already filled with data for the particular blog.
expr is used to compute expressions and assign values for attribute in tags. This can be used to assign values to attributes from the
<b:includable id="nextPrevLink"> <div style="display: inline"> <strong> <a expr:href="data:olderPageUrl" expr:title="data:olderPageTitle">Older Posts</a> </strong> <strong> <a expr:href="data:newerPageUrl" expr:title="data:newerPageTitle">New Posts</a> </strong> </div> </b:includable>
The above example shows how expr can be used to set the values of href and title attribute of the a tag from the data tag. Using the same way we could compute conditionals to set values for attributes.
I'm Tamil Selvan, a Passionate Programmer, Web Designer/Developer, Blogger and Gamer. I love Designing and Creating new things that helps and inspires users. Living in Chennai, India.