20 Tips and Tricks for Blogger Template Development

In this article, you will learn 20 unknown tips and tricks for blogger template development. These all tips are related to blogger templating language. After going through all the tips, your many questions will be solved that might be revolving in your mind while making or designing blogger templates.

So let's start learning all the tricks that will make you code efficiently.

Reverse the direction of a loop:

You can reverse loop by just adding reverse='true' in the loop tag.

<b:loop reverse='true' values='data:array' var='object'>

</b:loop>

Disable HTML Comment Rendering:

You can disable the rendering of HTML comments. The comments will only be visible in the blogger XML code but not in the rendered HTML code. To do so, you need to set render='false' to the comment tag.

<b:comment render='false'>
  Your comment
</b:comment>

Create custom Object and extract Value:

You can make or create your own custom object and extract values from it.

<b:with value='{item1: "Value", item2: "value"}' var='object'>
  <data:object.item1 />
  <data:object.item2 />
</b:with>

Hide an "active" gadget:

You can hide any widget on a webpage by just adding cond='false'.

<b:widget cond='false' id='HTML1' type='HTML'>

</b:widget>

Calculation of Mathematical Expressions:

You have the ability in blogger templating language to calculate mathematical values and display their result.

<b:eval expr='(10 + 3 ) * 2' />

Display Gadget only on Specific Page:

You can hide or show specific blogger widgets or gadgets on specific blogger pages.

<b:widget cond='data:view.isHomepage' id='HTML1' type='HTML'>

</b:widget>

isHomepage is for the home page you can read more about the page or view types in blogger here.

Length Reduction of character String:

You can reduce the length of any character string, especially when summarizing long text. You can generate short snippets from a long text by just providing a word limit.

<b:eval expr='data:post.body snippet { length: 250 }' />

In this case, we are extracting 250 words from the complete post body or post content.

Finding the length of the character string:

We can calculate the length of the character string in blogger templating language.

<b:eval expr='data:view.title.length' />

Rounding of Division results in unity:

Round off the result of a division to unity made simple using this trick.

<b:eval expr='(13 - (13 % 3)) / 3' />

Display Data Value in Comments:

It looks simple to display data value in comments but the point is, that you can use any other blogger XML tag inside the comment tag.

<b:comment render='true'>
  <data:view.title />
</b:comment>

Limiting Loop Sets:

You can limit the number of sets in a loop. In simple words, you can limit the number of results from the data set in a loop.

<b:loop values='data:array limit 4' var='object'>

</b:loop>

Inverting Boolean Value:

You can insert a boolean value in case you want to do.

<b:eval expr='not true' />

Change Date Display Format:

You can modify or change the date format using this trick.

<b:eval expr='format(data:post.date, "dd/MM/YYYY")' />

Resizing or Cropping Images:

You can resize or crop images delivered by the blogger server to your required dimensions.

<img expr:src='resizeImage(data:view.featuredImage, 600, "16:9")' />

Adding Parameter to URL:

You can add custom parameters to any link or URL.

<a expr:href='data:view.url params { hl: "en" }'>
  LINK
</a>

Display or Hide HTML Element based on Condition:

You can display or hide HTML elements based on conditions.

<b:tag cond='data:view.isPost' name='div' />

Making Dynamic Tags:

You can dynamically decide whether to add an HTML tag or not.

<b:tag expr:name='data:view.isSingleItem ? "h1" : "h2"' />

Defining default value if no Data exists:

You can define your own default value if there is no data in an object.

<b:eval expr='data:foo ?: "default value"' />

Extracting the first set from an Array without Using Loop:

If you want only the first set or element of an array then you don't need to use a loop.

<b:with value='data:posts first' var='post'>
  <data:post.title />
  <data:post.body />
</b:with>

Disable Auto Addition of Default Blogger scripts and stylesheets:

If blogger default scripts and stylesheets are making your website slow or are triggering any error you can remove them by adding b:css for CSS stylesheets and b:js for JavaScript files to the HTML tag.

<html b:css='false' b:js='false'>

</html>

That's it! I think these tips and tricks will help you to make a blogger template more efficiently.