Friday, 19 December 2014

Understanding of Blogger Template


Blogger Template now a days has became the main problem for beginner bloggers. When ever they have to deal with Blogger template they feel difficulty and consult with Google but still some times cannot find their solution because they don't know about template. This article will provide you a comprehensive information for basics of template.First of all you should know the meaning of Template.

What is Blogger Template?

what is blogger template


A blogger Template is a pattern of the webpage on which different widgets are arranged in sequence according to our settings. It in fact is a whole structure of blog. It defines Writing style, Color scheme, Header, Side bar, footer etc. In short it is because of Template that you are able to see the blog with sequence and beauty.

Main Parts Of Template

A template has five main Parts
  • XML
  • CSS
  • HEAD
  • BODY
I will discuss every part in detail.


Blogger Template started with XML. Actually whole blogger template is based on HTML (Hyper Text Markup Language) which is the language of Internet. All other parts of template is closed in this XML part. Blogger Template begins with the following code
   <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html expr:dir='data:blog.languageDirection' xmlns='' xmlns:b='' xmlns:data='' xmlns:expr=''>
Now I will explain parts of this syntax one by one.

WHAT does "<?xml version="1.0" encoding="UTF-8" ?>" declares?

This part is processing instruction. It defines the type of language. As it is beginning with XML so it declarers that the document is XML.
Version declares the standard version which is being used.
Encoding="UTF-8" ? declares the name of coding used. It is the coding which now a days is using.

What is <!DOCTYPE> Part?

In <!DOCTYPE defines the type of document used in template. As template is based on HTML so doc type is html and is an international community which is used for standard scales. So further code defines that this is based according to rules of 1999. 

As I told you whole template is closed in HTML so at the end of template it is closed with the ending tag of </html>.

What is Head Part?

Head part begins with <head> tag and ends with closing tag </head> between this all blogger widgets are placed. Coding for widgets are placed after the head tag. It encloses titles for scripts, styles, meta information, document etc. Style may contains pixels, writing style of template etc.

What is Body Part?

Body part begins with tag <body> and ends at </body>. It contains all widgets of template like Recent posts, comment, poplar post etc. Main parts of body are Header, Side bars, Footer and content portion.

If you have to make amendments in widgets or want to show or hide widgets at specific page you will deal within the body part.

What Is CSS?

CSS stands for Cascading Style Sheets. This is the language used to give look to document written in HTML. CSS was introduced to solve the problems of HTML. It defines how to display HTML elements. It was first introduced for solving the problems of HTML 4.0. It is a set consists of two parts. 


It is that HTML part for which style is described.


It is the Style for HTML selector. It further consists of property and value.

 CSS can be used any where in template for giving style to document.

For example: You want to change the color of text. Then just insert <style> tag after that p {color:red;text-align: center;}  and close that with </style> tag and write what ever you want to write in starting and closing p tag i.e <p>This paragraph is styled with CSS.</p>. And you will show that text in red color.

Similarly you can give style to your widgets with CSS like hover, float etc.


Variables are unique the values which holds some other values in it. The name of variables should be unique. This unique name is called Identifier as variable is identified by this name. We assign some value to the variable and use it in the whole template where ever we want to use.

For Example

If we have two variables "x"and "y" and we want to assign the values 2 and 3 respectively then we will write
var x = 2
var y = 3
but we have to write this in script tag and before applying script tag we will some identity for that script and we will take the value of these variables any where in template by using that id which we have assigned.

Complete Syntax for Variables

<p id="assignedid"></p>

var x = 2;
var y = 3;
document.getElementById("assignedid").innerHTML = x + y;

In this example first we have assigned identity for variables i.e "assignedid" after that they are closed between script tag i.e <script> and </script> after that we assigned value to variables i.e 2, and 3 and finally we use these variables for sum purpose i.e x + y which will be equal to 5.

How variables Are Used In Templates?

In template mostly variables are used for color purpose so that color code may not be repeated again and again. We can also use it for other purposes according to wish.

Hope this article will help you!

Written by

Dawood Bukhari is a young blogger and passionate researcher. He writes articles on bloggging,SEO,Hacking and Computer Technology Follow him @ Twitter | Facebook


Post a Comment


© 2013 Grasp Info. All rights resevered. Designed by Graspinfo

Back To Top