Summary of Blogger condition tags

Summary of Blogger condition tags
Summary of Blogger condition tags

Summary of Blogger condition tags

In this article, I would like to summarize the Blogger conditional tags commonly used in Blogspot interface design.

During the process of designing and using Blogger , I often use some tags for programming. Now, please allow me to summarize them in this article for you to refer to when necessary.

Basic types of Blogger tags


<b:if>The / tag <b:else/>is the most common basic condition tag in Bloger interface design. This tag is used to set execution conditions.

An example of the structure of an IF/ELSE tag is below:

<!--  structure of an IF/ELSE -->

<b:if cond='data:view.isPost'>

<b:elseif cond='data:view.isPage'/>



Loop tag

Tags <b:loop>in Blogger are used to perform loops. This tag is often used to extract data in an array.

<!-- Blogger are used to perform LOOP -->

<b:loop index='i' values='data:links' var='link'>

<a expr:title=''/>




In the example above, the function is <b:loop>used to extract data from the array data:links, the element variable is declared var='link'.

To extract the value in the function <b:loop>above, we use the structure: data:"phần tử"."thuộc tính". In the example above, the link element has two attributes targetand name.

Tag Tag

The tag <b:tag>is used to declare an HTML element in Blogger. The type of HTML element is specified by the name.

<!-- here is code sample <b:tag/> -->

<b:tag expr:href="data:blog.homepageUrl.canonical" name="a">



In the example above, we use a tag <b:tag>to declare an element <a>. Results below:

<!-- here is example <b:tag/> -->

<a href="">



Class Card

The <b:class> tag is used to add the class name to the parent element containing this tag. The class name is specified by the name.

<!-- code example <b:class/> -->

<div class="class1">

<b:class cond='data:view.isMultipleItems' name='index-post'/>



In the example above, the result below will be given if the cond='data:view.isMultipleItems'return condition is matched true.

<!-- example code <b:class/> -->

<div class="class1 index-post">



Thẻ Includable

Tag <b:includable>used to call a previously declared function. The called function is specified by the attribute name, and declared by the attribute id.

<!--Example of tag syntax <b:includable/> -->

<!--Declare content for the card <b:includable/> -->

<b:includable id='postMeta' var='post'>



<!-- Ví dụ về cách sử dụng thẻ <b:includable/>-->

<b:include data='post' name='postMeta'/>

Types of Blogger conditional tags

This section will describe the types of conditional tags that can be used in attributes cond. This condition attribute is used by tags: <b:if>, <b:tag>, <b:class>, <b:loop>, <b:includable>,…

Below is a summary of commonly used conditions in attributes cond:

Data structure data:view

data:view.isError : true if page not found. Used to design Error 404 page.

data:view.isHomepage : true if it is the homepage.

data:view.isLabelSearch : true if viewing the Label page.

data:view.isMobile : true if viewing in mobile mode.

data:view.isPage : true if viewing a Page.

data:view.isPost : true if viewing Post.

data:view.isSearch : true if viewing search results.

data:view.isSingleItem : true if viewing a single page: Page/Post

data:view.isMultipleItems : true if viewing multiple pages: HomePage/Search/Archive

data:view.isLayoutMode : true if viewing in Layout setting in Blogger dashboard.

See more:

Apply Lazy loading to Blogger

Instructions for changing Favicon for Blogger

Some examples of conditional tags

Extract data from attached link (enclosure link)

We can get data from the attached link using tags <b:loop>like the following example:

<!-- Example of data extraction from attached link-->

<b:loop index='i' values='data:post.enclosures' var='enclosure'>




In addition, we can also combine the <b:if> condition tag to pre-check the content of the attached link. In the example below, use the <b:if> tag to check that the attachment type exists audiobefore creating the download link.

<!-- Example of data extraction from attached link -->

<b:if cond="data:post.enclosures any (l => l.mimeType in {&quot;audio&quot;})">

   <b:loop index="i" values="data:post.enclosures" var="enclosure">

      <b:if cond="data:enclosure.mimeType == &quot;audio&quot;">

         <a expr:href="data:enclosure.url">Download</a>




Extract article content

To extract a short paragraph of an article, we can use the <b:eval> tag to extract content from data:post.snippets.

<!-- Example of extracting content from an article-->

<p class='entry-excerpt excerpt'>

   <b:eval expr='data:post.snippets.long snippet { length: 125 }'/>


In the sample snippet above, the article content is limited to 125 characters.

Hopefully this article brings some useful knowledge for you to refer to in the blogspot design process.

Post a Comment

Thank you for visiting our Blogger Store! We value your feedback and comments. Please feel free to share your thoughts, suggestions, or any questions you may have about our Blogger templates, themes, or services. We're here to help and look forward to hearing from you! 😊

Previous Post Next Post