If You have enough knowledge of HTML , CSS and Java script , this tutorial is very useful for making your own Blogger Template within 24 Hours .
Lets understand the Template Design Structure .
In Blogger Template , there have 4 sections and that is Header , Main , Sidebar , Footer Section.
Base Template
It is a XML Template Format. Now you need to design the DIV section with CSS design in Body Tag.
Now you need to design the CSS code in the
The CSS code are in Below for Base Template layout.
Next Tutorial : Design the Header Widget in header div tag.
Lets understand the Template Design Structure .
In Blogger Template , there have 4 sections and that is Header , Main , Sidebar , Footer Section.
Base Template
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title> </title>
<b:skin> <![CDATA[/*
]]></b:skin>
<b:template-skin>
<![CDATA[/*
]]>
</b:template-skin>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
</body>
</html>
It is a XML Template Format. Now you need to design the DIV section with CSS design in Body Tag.
<div class = 'container'>
<div class = 'header'>
</div>
<div class = 'Main-container'>
</div>
<div class = 'Sidebar-right'>
</div>
<div class = 'footer'>
</div>
</div>
Now you need to design the CSS code in the
<b:skin> <![CDATA[/*
The CSS code here .
]]></b:skin>
The CSS code are in Below for Base Template layout.
<b:skin> <![CDATA[/*
.container { width = '100%'; background-color: #ffffff; }
.header { margin-left: 10%; Width: 80%;}
.Main-container { margin-left: 10%; Width: 60%;}
.sidebar-right { float : left ; width: 20%; }
.footer { margin-left: 10%; Width: 80%;}
]]></b:skin>
Next Tutorial : Design the Header Widget in header div tag.