Blogger Template Design and Development with 20 Tips and Tricks

Hello friends, in this article I will share with you 20 Tips and Tricks for Everyone Designing and Developing Blogger Templates that I have known since making Blogspot for you to help you gain more knowledge. About Design and Development of Blogger interface or template. There are tips that very few people know or don't notice, but it helps a lot for you.

Let's start learning about 20 Tips and Tricks that I talk about that can help you!

Reverse 1 loop

You can reverse the order of a loop by adding reverse='true'in the loop tag as follows:

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

Disable display of HTML Comments

You can disable or disable the display of HTML comments. The comments will only show up in Blogger's XML editing interface but not in the HTML on the web page when you view the code. To do so, you need to add render='false'the following comment tags:

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

Create a custom Object and get its value

You can create a custom Object and get its values as follows:

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

Hide an active widget or widget.

You can hide any widget on your website by adding the cond='false'following:

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

Calculate math expressions

You can also perform value calculations in math and display their results as follows:

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

Show Widgets on a Specific Page:

You can hide or show certain blogger widgets on specific blogger pages. Eg:

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

is Homepage means that the widget will only be displayed on the homepage, you can read more, Learn about conditional tags and synthesize the latest blogger/blogspot conditional tags .

Limit the length of a character string

You can limit the length of any character string, especially when you are summarizing a long text. You can create short snippets by limiting the number of characters as follows:

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

In this case, we limit to 250 words from the post content.

See the length of a character string

We can calculate the length of the character string in blogger as follows:

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

Round the result of division

We can use a simple trick like this to do in a division in blogger.

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

Display 1 value of data in HTML Comment

Seems simple but you can use any blogger XML tag inside comment tag.

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

Limit the number of loops in the loop . tag

You can limit the number of iterations in a loop. Simply put, you can limit the number of results of a loop.

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

Invert the value of Boolean

You can invert the value of the boolean in case you want.

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

Change the display format of the date

You can modify or change the format of the date with the following trick:

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

Resize or crop the image

You can resize or crop the blogger's default image to your required size as follows:

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

Add parameters to the URL path

You can add custom parameters to any link or URL like this:/p>

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

Show or Hide HTML Element Conditionally

You can show or hide HTML elements based on conditions.

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

Create a dynamic tag

Dynamic tag here means that the tag will change when displayed on different condition pages. You can decide for yourself whether to add that HTML tag or not.

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

Define default value if data does not exist

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

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

Get the first property from an Array without using a Loop

If you just want to get the first property or element of an array, you don't need to use loops.

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

Disable or remove Blogger default CSS and JS

If Blogger's default CSS or JavaScript makes your website slow to load or it causes conflicts when you design the template, you can remove it using the following b:cssCSS and b:jsJavaScript properties:

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

Epilogue

That's all, I think these tips and tricks will help you to create a more professional and effective blogger template. If you have any problems, don't hesitate to comment below, I will answer as quickly as possible.

Thanks for reading: Blogger Template Design and Development with 20 Tips and Tricks,Dont Forget to Book Mark The Blooger-store.com

Blogger store

Blogger Template Design and Development with 20 Tips and Tricks