PASSING PARAMETER BY REFERENCE

1. Blogger HTML Implementation

How It Works

• Declaration (yMeter): Set to 0.022 (meters) using Blogger's tag.
• Passing Parameter / Value: Evaluates data:yMeter * 100 dynamically to output 2.2, resulting in line-height: var(--y); where --y: 2.2cm.

A*

To implement this in Blogger HTML using b:with to handle the calculations and passing parameters:

1. Blogger HTML Implementation

<!-- Declare Y as 0.022 meters in Blogger markup -->

<b:with value='0.022' var='yMeter'>

  <!-- Multiply Y by 100 to get centimeters (2.2cm) and pass as parameter/inline variable -->

  <div expr:style='"--y: " + (data:yMeter * 100) + "cm; line-height: var(--y);"'>

  </div>

</b:with>

How It Works

 * Declaration (yMeter): Set to 0.022 (meters) using Blogger's <b:with> tag.

 * Passing Parameter / Value: Evaluates data:yMeter * 100 dynamically to output 2.2, resulting in line-height: var(--y); where --y: 2.2cm.

B8

To wrap this calculation into a reusable Blogger <b:includable> template, define the component with <b:template> or directly inside your widget scope, passing yMeter as a variable argument using <b:include>:

<!-- 1. Define the reusable template -->

<b:includable id='yLineHeightBox' var='params'>

  <!-- Default yMeter to params.yMeter, or fall back to 0.022 -->

  <b:with value='data:params.yMeter ? data:params.yMeter : 0.022' var='yMeter'>

    <div expr:style='"--y: " + (data:yMeter * 100) + "cm; line-height: var(--y);"'>

      <!-- Optional slot for nested content -->

      <b:if cond='data:params.content'>

        <b:eval expr='data:params.content'/>

      </b:if>

    </div>

  </b:with>

</b:includable>

Passing Parameters (<b:include>)

Call the template anywhere inside the same widget, passing different values for yMeter:

<!-- Pass yMeter = 0.022 meters (outputs --y: 2.2cm) -->

<b:include name='yLineHeightBox' data='{ yMeter: 0.022 }'/>

<!-- Pass custom yMeter = 0.05 meters (outputs --y: 5cm) -->

<b:include name='yLineHeightBox' data='{ yMeter: 0.05 }'/>