Blogger Template Development Using XHTML

Posted by Suraj Singh on December 18, 2018 · 14 mins read
Have You Ever Tried To Develop Your Own Blogger Template? if No, Then This Post is Completely Written For You.

Hi readers,

Today, In this post, I am going to Write About how We can Easily Develop Our Own Blogger Templates using Basic XHTML.

What I am Going To Cover Here.
So, Let's Start With Some Basic Information.

Q 1.  What is XHTML?

Ans. Actually, Blogger Platform Provides Many Built-in Functionalities To Do Blog Template Various Process Easily And To Do This, Blogger Use XML which is one kind of Data Transport And Management Based Language. XML stands for Extensible Markup Language. In Simple Words, Blogger Use XML to provide Programming like facilities to automate many internal process using various XML features.
 To design a basic layout of the template, you will use namespaces. A namespace (xmlns) is pre-defined to use with the Blogger by Google. 3 types of namespaces are basically used as follows

    xmlns:b – ‘b’ specifies that this namespace is used to access the blogger elements.
    xmlns:data – It is used to specify that from where the data of the blog comes.
    xmlns:expr – Calculates the expression for attributes.

HTML is for Graphic and Layout And XML is for Data Management. That's Why it is called XHTML.

Q 2. How Bloggers Template Works?

 Ans. Blogger Template is Like A Programming Script Written In XHTML, Where XML part is to manipulate Data, and HTML is to represent as Web pages.
So, In simple words, Blogger Can Easily Use These features To design Blog as there requirements.

Q 3. What is Section and Widgets?

Ans. Section is One Type of XML tag available in Blogger. This Tag is to represent Or mark out areas of Web Page. And Widgets Are Elements of Sections. In Simple Words, You Can Understand Section as A Containers Where, You can store various types of Product. Here, You can assume widgets as the product of these container. Why? We have to use Section? Because With the help of section tags, You can Easily Add Blogger Built features to Add Various Types of Widget. Simply. Actually, You Just Need To Declare a Section in XHTML codes. Then, From Blogger Interface You Can Easily Add Various Type of Widget Without Any Difficulties.


<b:section id='header' class='header' maxwidgets="1" showaddelement="no">


<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>

Section Supported Attributes

A tag can have the following attributes.

 id  RequiredA unique name, with letters and numbers only. An ID serves as the unique identifier for a section.

 class  OptionalCommon 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   OptionalThe maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.

 showaddelement   OptionalCan 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  OptionalCan be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.

Widget Supported Attributes

A widget may have the following attributes.
 Attribute Required? Description
 id  RequiredMay 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  RequiredShould be one of the valid widget types listed in the list below this table.
 locked  OptionalCan be 'yes' or 'no,' with 'no' as the default. A locked widget cannot be moved or deleted from the Page Elements tab.
 title  OptionalA display title for the widget. If none is specified, a default title such as 'List1' will be concocted for you.
 pageType   OptionalCan 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.

The basic sections are: Header, Content, Footer, Sidebar. You will use the Widget element to define the content in a section. Note that you can’t use HTML within a section. But around a section, it’s permissible to use HTML within includable tag.

Types Of Widgets Available (Or You Can Easily Add Widget Using blogger Interface)

  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar 

Q 4. What are meta Tags?

 Ans. Meta tags are snippets of text that describe a page's content. the meta tags don't appear on the page itself, but only in the page's code. We all know tags from blog culture, and meta tags are more or less the same thing, little content descriptors that help tell search engines what a web page is about. by the way, blogger also provide some in-built ways to automatically add these meta tags using include tags.

Q 5. What is Includable and Include Tags?

Ans. Actually, Includable Tags Are Very Interesting Concept in Blogger Platform. Basically, Includable Tags Help in Accessing Global Data of Blogger. Using User Can Also Perform Various other Type of functions Also.


<b:includable id='main' var='thiswidget'>
<!-- Contents of Includable -->


<b:include name='name-of-includable' />
<b:include name='name-of-includable' data='argument-of-includable'/>

 Attribute Required? Description
 id RequiredA identifier unique within the template consisting of letters and numbers.

Each widget must have one includable with id='main' as the entry point to perform the widget's task.

The main includable will usually contain most or all of the content that will display for this widget, and in many cases it will be all you need.
 var OptionalAn identifier made up of letters and numbers, for referencing data made available by Blogger through the data tag.

 Attribute Required? Description
 name RequiredID of the includable to call.
The includable must have been declared within the same widget.

 data OptionalAn argument to pass to the includable being called. This will become the value of the var attribute in the includable.

The argument may be an expression or data made available by Blogger through the data tag.

Q 6. Basic Skeleton of Blogger Template?


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html xmlns='' xmlns:b='' xmlns:data='' xmlns:expr=''>






Q 7. Other Useful Syntax, Condition Supports?


If/ Else

<b:if cond='condition'>
<!-- content to display if condition is true -->
<!-- content to display if condition is false -->

Examples of b:if condition:



<b:if cond='data:post.showBacklinks'> True if the current post is set to show backlinks.

<b:if cond='data:blog.pageType == "item"'> True if the current page is an item page (post page).

<b:if cond='data:displayname != "Fred"'> True if this is not Fred's display name.

<b:if cond='data:post.numComments > 1'> True if the current post has more than one comment.


<b:loop var='loop-variable' values='iteration-list'>
<!-- repeated content -->

 Attribute value
 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.

Data Type


Reference Site :
                 Click Here