This is first part of series Create Your Own Blogger Template. In this part we learn structure of blogger template. So lets begun.
Our ordinary website template is used HTML language to design, but blogger template uses XML language to design. Structure of blogger template is same as structure of HTML file, which contains header ans body section which are enclosed into HTML under the XML tag.
Head section contains all the meta tag information, css and Blogger variable.
<?xml version="1.0" encoding="UTF-8" ?> <html> <head> .... <b:skin> <![CDATA[ ]]> </b:skin> .... </head> <body> .... </body> </html>
- Meta Tag : Meta tag information used for search engine optimization purpose, which include all title, description, keyword, author etc. included.
- CSS : CSS is used for designing purpose, changing to font style, size, color will be handled in this section. All the CSS code must be written between
Our blogger template is in XML format and css format is not in XML format, may be interrupt the parsing since css code enclosed into CDATA. When blogger template execute,
is converted into
converted into comments
- Blogger variable : Blogger variable is used for creating interface between our template and Blogger Template Designer. See Details into How to make Custom Template into Blogger Designer Friendly Template.
- Sidebar (left or right or both)
Syntax of section look like this
<b:section id='header' class='header' maxwidgets='1' showaddelement='no' growth='vertical'> </b:section>
idis required field, it is unique id provide to that section for identification, use alphanumeric for given id.
classis optional field, may be given an common name like header, main, sidebar and footer. You can given different name as you want.
maxwidgetsis optional field, specify that how many maximum widget are inside that section.
showaddelementis also optional field, which specify in layout management in blogger, there will be show an "Add a Gadget". yes or no value are specify for this attribute, yes is default value.
growthis also optional field, which indicate that if gadget is add, then sequence of adding gadget is vertical or horizontal. vertical is default value.
<b:widget id="header" type='Header' locked="yes" > </b:widget>
idis unique and alphanumeric, Once assign id can't be changed, until delete or add new one.
typeis also required field, which one of the following,
lockedspecify that, you can move widget using page element tab in blogger. If yes then can't move, that widget locked. If no then you can move this widget. Default value is no.
titleis specify name of that widget.
pageTypespecify that on which type of page this widget is display. It can be all, archive, main or item. all is default value.
mobileis indicate this widget is display in mobile view or not.