The Beta Blogger Template consists of FIVE main parts..............
NOTE that this is the new beta template and you do not get it automatically on migrating to beta. BACK UP TEMPLATE using Download Full Template link in Edit Html subtab of Template tab.
After migrating go to Template---->Customize and there you will find a link to upgrade to the new template. Without this template you will not get all the new features of beta blogger like Layouts etc.
The FIRST PART of the template consists of the XML language declarations :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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'>
The first line is the XML declaration identifying the document as a XML document. The second line is the HTML declaration. The third line is the XHTML declaration which is the XML version of HTML.
The SECOND PART consists of the first part of the 'head', the title and the Metatags :
<head>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<META content='6UdGiVvyAoLArGpux3xzus9nP4VEkAdsnY8mgwQKg4g=' name='verify-v1'/>
<meta content='Bet Blogger for Dummies' name='Description'/>
<meta content='beta blogger,blogger,blog,hacks,hacking beta blogger template,template,beta blogger template, blogskin,Google blog, google blogger' name='keywords'/>
<meta content='index,follow' name='robots'/>
The Metatags inform the search engines of the subject of your blog and are necessary for indexing your site. For more information on Metatags go here.
The THIRD PART of the beta blogger template is where the 'Variable Definitions' are declared and is responsible for the 'Fonts and Colors' subtab under the Template tab : 
This is the code :
<b:skin><![CDATA[/*
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#0000ff">
............
Here CDATA section starts and it is used to insert an XML document within another XML document. CDATA sections start with <[CDATA] and end with ]]>. The XML processor ignores all markup except for ]]> (which means it is not possible to include a CDATA section in another CDATA section). Since there are XML-style declarations within the block. CDATA just tells XML not to parse the data within the block until it reaches the closing ]]>, when it resumes normal XML processing.
You can <![CDATA[]]> anywhere outside a tag in an XML document.
The FOURTH PART of the template is the CSS (Cascading Style Sheet) section :
/* Use this with templates/template-twocol.html */
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
.............
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>
</head>
Notice that CDATA section ends here with ]]>
The second, third and fourth parts of the template make up the 'head'.
The FIFTH PART of the template is the body :
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Beta Blogger For Dummies (Header)' type='Header'/>
<b:widget id='HTML6' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='HTML10' locked='false' title='CONTACT AUTHOR' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
<b:widget id='HTML4' locked='true' title='' type='HTML'/>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML5' locked='true' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML11' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
NOTE : SOME REPEATING ELEMENTS IN THE CODE HAVE NOT BEEN SHOWN ABOVE IN ORDER TO ACHIEVE BREVITY.
Technorati Tags:css, html, template parts, xml, xhtml
A widget corresponds to its real world alternative : gadget and has the same function. Each section and its corresponding widgets is included in the wrapper of that section. For example the sidebar wrapper contains the section 'Sidebar' which contains widgets/Page Elements like 'Profile', Links', 'Feed', 'Adsense Javascript', etc.
