Blogger Template Design From Scratch - Part 2

In part one of Blogger Template design from Scratch, Section and Widget tags were explained. Part one provides only the basic usage of the inbuilt Widgets. This post will get deeper into how widget can be used to create custom template elements.

The basic <b:widget/> tag was explained in part one of Blogger Template Design from Scratch. In this post, there will be a detailed description of how widget tag can be used to have a fine grained control of what appears inside of the widget.

The basic form of the widget tag contains a self closing tag with the attributes related to it.

<b:widget [attributes...] />

You can consider these basic widget tags like function invocation, whereas the definition of the function is present in blogger.

Expand Widget Template

To view the contents of the default widgets, use the Jump to widget dropdown in Edit HTML page(Template -> Edit HTML). Choose any one of the widget. Once you reach the widget code, press the black triangle arrow in the line number aligned to the widget code to view the widget code.

Expand Widget
Expand widget

Creating Custom Widget

To create a custom widget, we need to make some changes to the widget tag.

First we need to have a opening and closing widget tag.

<b:widget [attributes...] >
</b:widget>

Most of the widget types specified in the previous post are defined by blogger. To create custom content in the widget, use the HTML type.

Example:

<b:widget id='HTML1' type='HTML'>
</b:widget>

Note: For the id of the widget, it’s best to provide the id of format - {type}{digit starting from 1 for each widget}. For example, if a custom contact and labels widget is created, their respective id’s would be HTML1 and HTML2 with type HTML.

<b:widget id='HTML1' type='HTML' locked='yes' title='Contact Us'>[Widget code here...]</b:widget>
<b:widget id='HTML2' type='HTML' locked='yes' title='Labels'>[Widget code here...]</b:widget>

Include and Includable

To define the content of the widget tag, we use a tag named “includable”. A expanded/custom widget tag must contain only includable tags inside it.

Includable has two parts,

  • include - is identical to a function name. When this is invoked, the particular includable will be called.
  • includable - is identical to a function definition i.e the body of the function.

Includable
Includable

Includable Syntax

<b:includable id='uniqueId' var='dataForWidget'>
    [Here we can place any piece of code]
</b:includable>

Includable Attributes

  • id (Required) - A unique identifier made up of letters and numbers.
  • var (Optional) - An identifier made up of letters and numbers, for referencing data within this section. This is how we pass data into the widget. This is also identical to a function.

Include

Includes are used if you have a section of code that you want to repeat multiple times in different places. When a include is used, that particular include is replaced with the contents of the includable.

Example

<b:includable id='main'>
   <b:loop var='i' values='posts'>
      <b:include name='post' data='i'/>
   </b:loop>
</b:includable>

<b:includable id='post' var='p'>
   Title: <data:p.title/>
</b:includable>

Include Syntax

<b:include name=’idOfTheIncludable’  data=’dataForIncludable’ />

Include Attributes

  • name (Required) - An identifier made up of letters and numbers. It must match the ID of an existing b:includable in the same widget.
  • data (Optional) - An expression or peice of data to pass on to the includable section. This will become the value of the var attribute in the includable.

Default Includable

Every custom widget must contain a includable with “id” equal to “main”(main includable). This main includable will contain the content for entire the widget. Infact, this is the only includable you need to specify the contents of the widget. If you need, you can define more includable’s inside the widget and outside the main includable, and include it inside the main includable using the “include” element.

Even if you have more includable’s with different id’s it will not be displayed automatically in the widget. You need to specify it inside the main includable using the “include” element with reference to the includable id.

Dodle: If you have experience in C Programming, there will be a main() function that will be called first for the start of the program execution. Consider the main includable(id=’main’) as the main() function in C Programming for the widget.

Widget
Widget

Example:

<b:widget id='HTML1' type='HTML' locked='yes' title='Labels'>
    <b:includable id='main'>
        <h3>Labels</h3>
        <b:include name='labels'></b:include>
    </b:includable>
    <b:includable id='labels'>
        <ul>
            <li><a href='#' title='PHP'>PHP</a></li>
            <li><a href='#' title='Java'>Java</a></li>
            <li><a href='#' title='CPP'>CPP</a></li>
        </ul>
    </b:includable>
</b:widget>

You can place the above widget code in your blogger template to view the output.