Skip to main content

Blogger Template Development Using XHTML

Have You Ever Tried To Develop Your Own Blogger Template? if No, Then This Post is Completely Written For You.

Hi Friends,

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.

Attribute Required?
 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.

Widget Supported Attributes

A widget may have the following attributes.
 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.

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  Required A 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  Optional An identifier made up of letters and numbers, for referencing data made available by Blogger through the data tag.

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

 data  Optional An 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=''>


  <!-- SKIN CONTENTS -->


  <!-- BODY CONTENTS -->


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

Related Post

Top Visited

Big List Of Google Dorks For Sqli Injection

List of Keyboard Shortcuts Keys for GNOME Desktop (Kali linux / Linux / Ubuntu/*nix )

Create Simple Packet Sniffer Using Python

how to install burp suite in Linux/Ubuntu 16.04

How to create Phishing Page Using Kali Linux | Webpage Page Cloning Using Kali Linux Social Engineering Toolkit

Best 1000 User-agents List For Web Scraping

How To Install GDB Peda?

Latest Google Dorks List

2 Easiest Way To Enable Monitor Mode in Kali Linux | Airmon-ng | Iwconfig

How To Create Snake Game Using Python And Tkinter - Simple python games