Lesson 6: An understanding of the Blogger specific tags.
This tutorial is a request from one of the reader of my blog by name Mahroof.
Previously, we saw how to customize the simple Blogger template we had created. Today, I’ve given a break to that tutorial and breaking the flow of the tutorial. But, we will be learning which is/may be important to certain set of audience. This tutorial can also help us to better understand how Blogger codes are programmed and designed. It can help us to tweak the codes better.
PREVIOUS MISSION – Mission 5- Five Customization of Simple Blogger Template.
NEXT MISSION – Mission 7: Create a 3 column Blogger Template.
Mission 6 Objectives:
1) Understanding the basics of Blogger specific codes as seen in MISSION 4.
2) Understanding <b:section> tag.
3) Understanding <b:widget> tag.
4) Understanding <b:includable> tag.
5) Understanding <b:include> tag.
6) Understanding data: tag.
7) Understanding <b:loop> tag.
8) Understanding <b:if> and <b:else> tags.
Explanation:
I. <b:section> tag in Blogger
How to find this tag?
Go to Blogger Dashboard > Select Blog > Template > Edit HTML > Expand Widget Templates > Find(Ctrl+F for <b:section )
What is the need of this tag?
Every widget/gadget in Blogger layout needs a section tag to be wrapped around for it work. So a widget code in Blogger would always have a section tag starting with <b:section> and it ends with a closing tag </b:section>.
For example, a section code for main area would be <b:section class=”main”>, or the section code for header would be <b:section class=”header”> and similarly for footer and sidebar would be <b:section class=”footer”> and <b:section class=”sidebar”> respectively.
–> You can find them all in your Blogger template or in the Simple template we created.
Attributes of <b:section> tag
The <b:section> tag of Blogger not only take the class attribute as seen in the above examples. It can also take other attributes.
| Attribute | Required? | Description |
| id | Required | A unique name, with letters and numbers only. An ID serves as the unique identifier for a section. |
| class | Optional | Common class names are ‘navbar,’ ‘header,’ ‘main,’ ‘sidebar,’ and ‘footer.’ If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like. |
| maxwidgets | Optional | The maximum number of widgets to allow in this section. If you don’t specify a limit, there won’t be one. |
| showaddelement | Optional | Can be ‘yes’ or ‘no,’ with ‘yes’ as the default. This determines whether the Page Elements tab will show the ‘Add a Page Element’ link in this section. |
| growth | Optional | Can be ‘horizontal’ or ‘vertical,’ with ‘vertical’ as the default. This determines whether widgets within this section are arranged side-by-side or stacked. |
Table Source: Blogger Help << Learn more from this link
This is how the code for <b:section> tags would look like:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>
To display “Add a Gadget Element” in Blogger
Let’s say you want in the header, then the code would be:
<b:section class='header' id='header2' preferred='yes'/>
Notice the front slash(/) in the section code ending within the single section tag. Place the above code in your header area.
Let’s say you already have a header code you want an extra gadget in the same place then the code would be:
<b:section id='header' class='header' maxwidgets="2" showaddelement="no">
Change the maxwidgets to 2 or 3.
II. <b:widget> tag in Blogger [ Also covers <b:includable> tag and <b:include> tag ]
What is the need of the <b:widget> tag?
In the most simplest term, a widget tag is a single tag which can hold the code for the widgets to be displayed. The code is stored in the Blogger database, and the code is displayed to the users only when the particular gadget or widget is added to Blogger. A <b:widget> tag is wrapped by the <b:section> and </b:section> tags always. A Widget tag also has an ending tag </b:widget>.
Attributes of <b:widget> tag
| Attribute | Required? | Description |
| id | Required | May contain letters and numbers only, and each widget ID in your template should be unique.
A widget’s ID cannot be changed without deleting the widget and creating a new one. |
| type | Required | Should be one of the valid widget types listed in the list below this table. |
| locked | Optional | Can be ‘yes’ or ‘no,’ with ‘no’ as the default. A locked widget cannot be moved or deleted from the Page Elements tab. |
| title | Optional | A display title for the widget. If none is specified, a default title such as ‘List1’ will be concocted for you. |
| pageType | Optional | Can be ‘all,’ ‘archive,’ ‘main,’ or ‘item,’ with ‘all’ as the default.
The widget will display only on the designated pages of your blog. All widgets display on the Page Elements tab, regardless of their pageType. |
source: Blogger help << Learn more from here
Note: If you need to insert extra code between or around certain widgets within a section, you’ll need to split the section into two or more new sections.
<b:widget [...attributes...]>
</b:widget>
The <b:includable> tag
| Attribute | Required? | Description |
| 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. |
<b:widget [...attributes...]> <b:includable id='main' var='thiswidget'>
[insert whatever content you want here] << The Widget Code
</b:includable> </b:widget>
The <b:include> tag
| Attribute | Required? | Description |
| 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. |
Syntax of <b:include> tag:<b:include name='post' data='i'/>
III. The data: tag
What is the need for data: tag?
<data:title/>
or
<data:photo.url/>
You can find the huge list here.
IV. The Loop Tags <b:loop>
What is the need of <b:loop> tag?
Syntax of <b:loop> tag:
<b:loop var='loop_variable' values='iteration_list'>
[repeated content goes here]
</b:loop>
| Attribute vaules | Required? | Description |
| loop_variable | Required | Can be any alphanumeric name. It will be used as the handle to each member of the iteration list. |
| iteration_list | Required | The handle to data containing multiple members over which the loop is to iterate.
Any of the data handles in the list of data handles provided in the next page may be used as the iteration list as long as the data has members. |
V. The if/else tags <b:if> and <b:else>
What is the need of if/else tags?
Syntax of if/else
<b:if cond='condition'>
[content to display if condition is true]
<b:else/>
[content to display if condition is false]
</b:if>
— to be continued —
The post Understanding Blogger Specific Tags | Mission 6 appeared first on iTechColumn.