Tuesday, November 14, 2006

Beta Blogger Template Simplified in Five Parts.

The Beta Blogger Template can be simplified into five main parts......

The new Beta Blogger template is the foundation behind the new features and user friendliness of Beta Blogging. It uses XML so that Blogger Blogs are now 'dynamic' and do not require republishing after any small change to the posts or the template. Previously Blogger would create static HTML files on your Blog*Spot account every time you published, and those files would remain there unchanged until your next update. In the new Beta version, adding a new post simply updates your information in the database. Then, when someone wants to see any of the pages on your blog, those pages are created for them dynamically, on the fly. This makes the process of updating your blog much simpler and faster. You don't have to remember to republish anymore, or decide whether to do a "republish index only" or "republish all." The instant you save a new post, template design, or settings change, your blog is updated. No more waiting for what many experienced bloggers call "the spin of death" when the icon would continue to spin endlessly.

Once you have logged in you can edit any post with one click on the web page itself. The post opens up for editing without you having to navigate through the Dashboard to the Post Editor. After making the changes you want it is saved and published in one step after clicking on Publish. You can then view it immediately with just one more click!

The new template is also responsible for creating Layouts where the blog is divided into Page Elements which can then be arranged by a simple click-and-drag method on a WYSIWYG or graphical interface. Thus you can customize your blog just by rearranging the Page Elements in a different order.

One of the biggest lacunae in the old Blogger was the absence of Categories. This delighted the hackers no end who then set about devising hacks for implementing them. The average blogger was left to decide for himself which was the simplest hack to implement and spent days implementing them often with doubtful results. Beta Blogger has taken care of this through 'Labels'. You can add Labels to each post when creating it and then add a Labels Section to the sidebar where all of them are displayed along with the number of posts they are appearing in. The reader can then click on the Label he is intrested in to immediately display all the posts with that Label in them.

The start of the Beta Blogger Template with all these impressive features - drum rolls please - is deceptive. However, it has to bow to conventions and web standards and hence starts with the 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. XML stands for eXtensible Markup Language. It is a new markup language, developed by the W3C (World Wide Web Consortium) mainly to overcome limitations in HTML. The second line is the HTML declaration. The third line is the XHTML declaration which is the XML version of HTML. The rest define XML namespaces which are used to identify XML elements.

When you download a Beta Blogger Template using the download link under the Template tab it is saved as a file with an XML extension to your hard drive. You cannot copy and paste Classic Blogger Templates into the new Beta Blogger because they are HTML templates.

The Second Part of the Beta Blogger template is similar to the old Blogger template and consists of the opening Head tag, the Title tags and the Metatags. The Metatags and the title tags have the same function as in the old Blogger templates viz informing the search engines about the subject of your blog and getting it indexed by them :

<head>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<meta content='BLOG DESCRIPTION' name='Description'/>
<meta content='BLOG KEYWORDS' name='keywords'/>
<meta content='index,follow' name='robots'/>

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 part of the template is responsible for giving the user multiple choices regarding the Fonts and Colors in his blog. He can use this feature through a WYSIWYG or graphical interface to change the sizes of fonts and the colors in his blog. Thus unlike in old Blogger where the average Joe Blogger had to wade through ankle-deep template code - always fearing the template sinking beneath his feet - to change his blog colors, the new beta blogger simply points-and-clicks to choose his fonts and colors. This can be done any time you are tired of your blog colors and want it to have some brand new clothes. This section starts with :

<b:skin><![CDATA[/*
/* Variable definitions
====================

Here CDATA section starts and is used to denote to the XML parser to ignore this section as it includes XML tags and not to parse the data within it until it comes to the closing of CDATA denoted by ]]> where it should resume parsing. The <b:skin> tag signifies the beginning of the CSS section which in old Blogger was denoted by <style type="text/css">.


The FOURTH PART of the template is the CSS (CASCADING STYLE SHEET) section which is also similar to the old blogger template except for new divisions. The body remains the same but inside it is the Outer Wrapper which contains the Header, Main Column, Sidebars and the Footer. This part ends with the following tags :

]]></b:skin>
</head>

The ]]> tag ends the CDATA section which means the XML parser can now start parsing. Then the </b:skin> tags signify the ending of the CSS section. In the old Blogger this was denoted by </style>.
Finally this is the end of the head section which started after the language declarations and is denoted by </head>.


The FIFTH and final part of the template starts here and consists of the body of the page in HTML. This is denoted by the starting <body> tag at the beginning :

<body>

Inside the body is the outer wrapper defined by :

<div id='outer-wrapper'>

Inside the Outer Wrapper are :

1. The Header Wrapper containing the Header.
2. The Content Wrapper containing the Main and the Sidebar Wrappers containing their respective sections.
3. The Footer Wrapper containing the Footer.

This final part of the template ends with closing the Outer Wrapper division, then the closing body tag </body> and finally the page ends by closing the html tags as such : .


Inside each Header and Footer Wrappers are the respective header and footer Sections containing a number of various Widgets or Page Elements. The Content Wrapper contains the main and sidebar sections also similarly containing a number of various Widgets or Page Elements.

Thus we arrive at the heart of the Beta Blogger Template, its kernel as it were, consisting of the humble Widget. It is this Widget - short for Web Gadget - which does all the blogging functions carrying data to and fro from the database. Each Widget is called a Page Element in WYSIWYG view and there are twelve types of widgets as of date. Twelve types of widgets carry twelve types of data and can be used to add the following to your blog : List, Links, Picture, Text, HTML/Javascript, Adesnse, Feed, Labels, Logo, Profile, Blog Archives and Page Header. Each widget is defined by tags like this:

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>


</b:widget>

Inside these are the includable tags and inside them you can place your code. This feature is unique to the Beta blogger template and enables you to add code to make your own widget. Widgets can also be customized by defining their characteristics in the CSS.

Hence the new Beta blogger Template not only adds more functionality to the old Blogger but also hikes up the mark on user friendliness and finally has room aplenty to add more and more features by both bloggers and developers.

Posted by vin at 11:06 AM

Labels:

The Beta Blogger Template can be simplified into five main parts......

The new Beta Blogger template is the foundation behind the new features and user friendliness of Beta Blogging. It uses XML so that Blogger Blogs are now 'dynamic' and do not require republishing after any small change to the posts or the template. Previously Blogger would create static HTML files on your Blog*Spot account every time you published, and those files would remain there unchanged until your next update. In the new Beta version, adding a new post simply updates your information in the database. Then, when someone wants to see any of the pages on your blog, those pages are created for them dynamically, on the fly. This makes the process of updating your blog much simpler and faster. You don't have to remember to republish anymore, or decide whether to do a "republish index only" or "republish all." The instant you save a new post, template design, or settings change, your blog is updated. No more waiting for what many experienced bloggers call "the spin of death" when the icon would continue to spin endlessly.

Once you have logged in you can edit any post with one click on the web page itself. The post opens up for editing without you having to navigate through the Dashboard to the Post Editor. After making the changes you want it is saved and published in one step after clicking on Publish. You can then view it immediately with just one more click!

The new template is also responsible for creating Layouts where the blog is divided into Page Elements which can then be arranged by a simple click-and-drag method on a WYSIWYG or graphical interface. Thus you can customize your blog just by rearranging the Page Elements in a different order.

One of the biggest lacunae in the old Blogger was the absence of Categories. This delighted the hackers no end who then set about devising hacks for implementing them. The average blogger was left to decide for himself which was the simplest hack to implement and spent days implementing them often with doubtful results. Beta Blogger has taken care of this through 'Labels'. You can add Labels to each post when creating it and then add a Labels Section to the sidebar where all of them are displayed along with the number of posts they are appearing in. The reader can then click on the Label he is intrested in to immediately display all the posts with that Label in them.

The start of the Beta Blogger Template with all these impressive features - drum rolls please - is deceptive. However, it has to bow to conventions and web standards and hence starts with the 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. XML stands for eXtensible Markup Language. It is a new markup language, developed by the W3C (World Wide Web Consortium) mainly to overcome limitations in HTML. The second line is the HTML declaration. The third line is the XHTML declaration which is the XML version of HTML. The rest define XML namespaces which are used to identify XML elements.

When you download a Beta Blogger Template using the download link under the Template tab it is saved as a file with an XML extension to your hard drive. You cannot copy and paste Classic Blogger Templates into the new Beta Blogger because they are HTML templates.

The Second Part of the Beta Blogger template is similar to the old Blogger template and consists of the opening Head tag, the Title tags and the Metatags. The Metatags and the title tags have the same function as in the old Blogger templates viz informing the search engines about the subject of your blog and getting it indexed by them :

<head>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<meta content='BLOG DESCRIPTION' name='Description'/>
<meta content='BLOG KEYWORDS' name='keywords'/>
<meta content='index,follow' name='robots'/>

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 part of the template is responsible for giving the user multiple choices regarding the Fonts and Colors in his blog. He can use this feature through a WYSIWYG or graphical interface to change the sizes of fonts and the colors in his blog. Thus unlike in old Blogger where the average Joe Blogger had to wade through ankle-deep template code - always fearing the template sinking beneath his feet - to change his blog colors, the new beta blogger simply points-and-clicks to choose his fonts and colors. This can be done any time you are tired of your blog colors and want it to have some brand new clothes. This section starts with :

<b:skin><![CDATA[/*
/* Variable definitions
====================

Here CDATA section starts and is used to denote to the XML parser to ignore this section as it includes XML tags and not to parse the data within it until it comes to the closing of CDATA denoted by ]]> where it should resume parsing. The <b:skin> tag signifies the beginning of the CSS section which in old Blogger was denoted by <style type="text/css">.


The FOURTH PART of the template is the CSS (CASCADING STYLE SHEET) section which is also similar to the old blogger template except for new divisions. The body remains the same but inside it is the Outer Wrapper which contains the Header, Main Column, Sidebars and the Footer. This part ends with the following tags :

]]></b:skin>
</head>

The ]]> tag ends the CDATA section which means the XML parser can now start parsing. Then the </b:skin> tags signify the ending of the CSS section. In the old Blogger this was denoted by </style>.
Finally this is the end of the head section which started after the language declarations and is denoted by </head>.


The FIFTH and final part of the template starts here and consists of the body of the page in HTML. This is denoted by the starting <body> tag at the beginning :

<body>

Inside the body is the outer wrapper defined by :

<div id='outer-wrapper'>

Inside the Outer Wrapper are :

1. The Header Wrapper containing the Header.
2. The Content Wrapper containing the Main and the Sidebar Wrappers containing their respective sections.
3. The Footer Wrapper containing the Footer.

This final part of the template ends with closing the Outer Wrapper division, then the closing body tag </body> and finally the page ends by closing the html tags as such : .


Inside each Header and Footer Wrappers are the respective header and footer Sections containing a number of various Widgets or Page Elements. The Content Wrapper contains the main and sidebar sections also similarly containing a number of various Widgets or Page Elements.

Thus we arrive at the heart of the Beta Blogger Template, its kernel as it were, consisting of the humble Widget. It is this Widget - short for Web Gadget - which does all the blogging functions carrying data to and fro from the database. Each Widget is called a Page Element in WYSIWYG view and there are twelve types of widgets as of date. Twelve types of widgets carry twelve types of data and can be used to add the following to your blog : List, Links, Picture, Text, HTML/Javascript, Adesnse, Feed, Labels, Logo, Profile, Blog Archives and Page Header. Each widget is defined by tags like this:

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>


</b:widget>

Inside these are the includable tags and inside them you can place your code. This feature is unique to the Beta blogger template and enables you to add code to make your own widget. Widgets can also be customized by defining their characteristics in the CSS.

Hence the new Beta blogger Template not only adds more functionality to the old Blogger but also hikes up the mark on user friendliness and finally has room aplenty to add more and more features by both bloggers and developers.

The Beta Blogger Template can be simplified into five main parts......

The new Beta Blogger template is the foundation behind the new features and user friendliness of Beta Blogging. It uses XML so that Blogger Blogs are now 'dynamic' and do not require republishing after any small change to the posts or the template. Previously Blogger would create static HTML files on your Blog*Spot account every time you published, and those files would remain there unchanged until your next update. In the new Beta version, adding a new post simply updates your information in the database. Then, when someone wants to see any of the pages on your blog, those pages are created for them dynamically, on the fly. This makes the process of updating your blog much simpler and faster. You don't have to remember to republish anymore, or decide whether to do a "republish index only" or "republish all." The instant you save a new post, template design, or settings change, your blog is updated. No more waiting for what many experienced bloggers call "the spin of death" when the icon would continue to spin endlessly.

Once you have logged in you can edit any post with one click on the web page itself. The post opens up for editing without you having to navigate through the Dashboard to the Post Editor. After making the changes you want it is saved and published in one step after clicking on Publish. You can then view it immediately with just one more click!

The new template is also responsible for creating Layouts where the blog is divided into Page Elements which can then be arranged by a simple click-and-drag method on a WYSIWYG or graphical interface. Thus you can customize your blog just by rearranging the Page Elements in a different order.

One of the biggest lacunae in the old Blogger was the absence of Categories. This delighted the hackers no end who then set about devising hacks for implementing them. The average blogger was left to decide for himself which was the simplest hack to implement and spent days implementing them often with doubtful results. Beta Blogger has taken care of this through 'Labels'. You can add Labels to each post when creating it and then add a Labels Section to the sidebar where all of them are displayed along with the number of posts they are appearing in. The reader can then click on the Label he is intrested in to immediately display all the posts with that Label in them.

The start of the Beta Blogger Template with all these impressive features - drum rolls please - is deceptive. However, it has to bow to conventions and web standards and hence starts with the 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. XML stands for eXtensible Markup Language. It is a new markup language, developed by the W3C (World Wide Web Consortium) mainly to overcome limitations in HTML. The second line is the HTML declaration. The third line is the XHTML declaration which is the XML version of HTML. The rest define XML namespaces which are used to identify XML elements.

When you download a Beta Blogger Template using the download link under the Template tab it is saved as a file with an XML extension to your hard drive. You cannot copy and paste Classic Blogger Templates into the new Beta Blogger because they are HTML templates.

The Second Part of the Beta Blogger template is similar to the old Blogger template and consists of the opening Head tag, the Title tags and the Metatags. The Metatags and the title tags have the same function as in the old Blogger templates viz informing the search engines about the subject of your blog and getting it indexed by them :

<head>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<meta content='BLOG DESCRIPTION' name='Description'/>
<meta content='BLOG KEYWORDS' name='keywords'/>
<meta content='index,follow' name='robots'/>

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 part of the template is responsible for giving the user multiple choices regarding the Fonts and Colors in his blog. He can use this feature through a WYSIWYG or graphical interface to change the sizes of fonts and the colors in his blog. Thus unlike in old Blogger where the average Joe Blogger had to wade through ankle-deep template code - always fearing the template sinking beneath his feet - to change his blog colors, the new beta blogger simply points-and-clicks to choose his fonts and colors. This can be done any time you are tired of your blog colors and want it to have some brand new clothes. This section starts with :

<b:skin><![CDATA[/*
/* Variable definitions
====================

Here CDATA section starts and is used to denote to the XML parser to ignore this section as it includes XML tags and not to parse the data within it until it comes to the closing of CDATA denoted by ]]> where it should resume parsing. The <b:skin> tag signifies the beginning of the CSS section which in old Blogger was denoted by <style type="text/css">.


The FOURTH PART of the template is the CSS (CASCADING STYLE SHEET) section which is also similar to the old blogger template except for new divisions. The body remains the same but inside it is the Outer Wrapper which contains the Header, Main Column, Sidebars and the Footer. This part ends with the following tags :

]]></b:skin>
</head>

The ]]> tag ends the CDATA section which means the XML parser can now start parsing. Then the </b:skin> tags signify the ending of the CSS section. In the old Blogger this was denoted by </style>.
Finally this is the end of the head section which started after the language declarations and is denoted by </head>.


The FIFTH and final part of the template starts here and consists of the body of the page in HTML. This is denoted by the starting <body> tag at the beginning :

<body>

Inside the body is the outer wrapper defined by :

<div id='outer-wrapper'>

Inside the Outer Wrapper are :

1. The Header Wrapper containing the Header.
2. The Content Wrapper containing the Main and the Sidebar Wrappers containing their respective sections.
3. The Footer Wrapper containing the Footer.

This final part of the template ends with closing the Outer Wrapper division, then the closing body tag </body> and finally the page ends by closing the html tags as such : .


Inside each Header and Footer Wrappers are the respective header and footer Sections containing a number of various Widgets or Page Elements. The Content Wrapper contains the main and sidebar sections also similarly containing a number of various Widgets or Page Elements.

Thus we arrive at the heart of the Beta Blogger Template, its kernel as it were, consisting of the humble Widget. It is this Widget - short for Web Gadget - which does all the blogging functions carrying data to and fro from the database. Each Widget is called a Page Element in WYSIWYG view and there are twelve types of widgets as of date. Twelve types of widgets carry twelve types of data and can be used to add the following to your blog : List, Links, Picture, Text, HTML/Javascript, Adesnse, Feed, Labels, Logo, Profile, Blog Archives and Page Header. Each widget is defined by tags like this:

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>


</b:widget>

Inside these are the includable tags and inside them you can place your code. This feature is unique to the Beta blogger template and enables you to add code to make your own widget. Widgets can also be customized by defining their characteristics in the CSS.

Hence the new Beta blogger Template not only adds more functionality to the old Blogger but also hikes up the mark on user friendliness and finally has room aplenty to add more and more features by both bloggers and developers.

The Beta Blogger Template can be simplified into five main parts......

The new Beta Blogger template is the foundation behind the new features and user friendliness of Beta Blogging. It uses XML so that Blogger Blogs are now 'dynamic' and do not require republishing after any small change to the posts or the template. Previously Blogger would create static HTML files on your Blog*Spot account every time you published, and those files would remain there unchanged until your next update. In the new Beta version, adding a new post simply updates your information in the database. Then, when someone wants to see any of the pages on your blog, those pages are created for them dynamically, on the fly. This makes the process of updating your blog much simpler and faster. You don't have to remember to republish anymore, or decide whether to do a "republish index only" or "republish all." The instant you save a new post, template design, or settings change, your blog is updated. No more waiting for what many experienced bloggers call "the spin of death" when the icon would continue to spin endlessly.

Once you have logged in you can edit any post with one click on the web page itself. The post opens up for editing without you having to navigate through the Dashboard to the Post Editor. After making the changes you want it is saved and published in one step after clicking on Publish. You can then view it immediately with just one more click!

The new template is also responsible for creating Layouts where the blog is divided into Page Elements which can then be arranged by a simple click-and-drag method on a WYSIWYG or graphical interface. Thus you can customize your blog just by rearranging the Page Elements in a different order.

One of the biggest lacunae in the old Blogger was the absence of Categories. This delighted the hackers no end who then set about devising hacks for implementing them. The average blogger was left to decide for himself which was the simplest hack to implement and spent days implementing them often with doubtful results. Beta Blogger has taken care of this through 'Labels'. You can add Labels to each post when creating it and then add a Labels Section to the sidebar where all of them are displayed along with the number of posts they are appearing in. The reader can then click on the Label he is intrested in to immediately display all the posts with that Label in them.

The start of the Beta Blogger Template with all these impressive features - drum rolls please - is deceptive. However, it has to bow to conventions and web standards and hence starts with the 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. XML stands for eXtensible Markup Language. It is a new markup language, developed by the W3C (World Wide Web Consortium) mainly to overcome limitations in HTML. The second line is the HTML declaration. The third line is the XHTML declaration which is the XML version of HTML. The rest define XML namespaces which are used to identify XML elements.

When you download a Beta Blogger Template using the download link under the Template tab it is saved as a file with an XML extension to your hard drive. You cannot copy and paste Classic Blogger Templates into the new Beta Blogger because they are HTML templates.

The Second Part of the Beta Blogger template is similar to the old Blogger template and consists of the opening Head tag, the Title tags and the Metatags. The Metatags and the title tags have the same function as in the old Blogger templates viz informing the search engines about the subject of your blog and getting it indexed by them :

<head>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<meta content='BLOG DESCRIPTION' name='Description'/>
<meta content='BLOG KEYWORDS' name='keywords'/>
<meta content='index,follow' name='robots'/>

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 part of the template is responsible for giving the user multiple choices regarding the Fonts and Colors in his blog. He can use this feature through a WYSIWYG or graphical interface to change the sizes of fonts and the colors in his blog. Thus unlike in old Blogger where the average Joe Blogger had to wade through ankle-deep template code - always fearing the template sinking beneath his feet - to change his blog colors, the new beta blogger simply points-and-clicks to choose his fonts and colors. This can be done any time you are tired of your blog colors and want it to have some brand new clothes. This section starts with :

<b:skin><![CDATA[/*
/* Variable definitions
====================

Here CDATA section starts and is used to denote to the XML parser to ignore this section as it includes XML tags and not to parse the data within it until it comes to the closing of CDATA denoted by ]]> where it should resume parsing. The <b:skin> tag signifies the beginning of the CSS section which in old Blogger was denoted by <style type="text/css">.


The FOURTH PART of the template is the CSS (CASCADING STYLE SHEET) section which is also similar to the old blogger template except for new divisions. The body remains the same but inside it is the Outer Wrapper which contains the Header, Main Column, Sidebars and the Footer. This part ends with the following tags :

]]></b:skin>
</head>

The ]]> tag ends the CDATA section which means the XML parser can now start parsing. Then the </b:skin> tags signify the ending of the CSS section. In the old Blogger this was denoted by </style>.
Finally this is the end of the head section which started after the language declarations and is denoted by </head>.


The FIFTH and final part of the template starts here and consists of the body of the page in HTML. This is denoted by the starting <body> tag at the beginning :

<body>

Inside the body is the outer wrapper defined by :

<div id='outer-wrapper'>

Inside the Outer Wrapper are :

1. The Header Wrapper containing the Header.
2. The Content Wrapper containing the Main and the Sidebar Wrappers containing their respective sections.
3. The Footer Wrapper containing the Footer.

This final part of the template ends with closing the Outer Wrapper division, then the closing body tag </body> and finally the page ends by closing the html tags as such : .


Inside each Header and Footer Wrappers are the respective header and footer Sections containing a number of various Widgets or Page Elements. The Content Wrapper contains the main and sidebar sections also similarly containing a number of various Widgets or Page Elements.

Thus we arrive at the heart of the Beta Blogger Template, its kernel as it were, consisting of the humble Widget. It is this Widget - short for Web Gadget - which does all the blogging functions carrying data to and fro from the database. Each Widget is called a Page Element in WYSIWYG view and there are twelve types of widgets as of date. Twelve types of widgets carry twelve types of data and can be used to add the following to your blog : List, Links, Picture, Text, HTML/Javascript, Adesnse, Feed, Labels, Logo, Profile, Blog Archives and Page Header. Each widget is defined by tags like this:

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>


</b:widget>

Inside these are the includable tags and inside them you can place your code. This feature is unique to the Beta blogger template and enables you to add code to make your own widget. Widgets can also be customized by defining their characteristics in the CSS.

Hence the new Beta blogger Template not only adds more functionality to the old Blogger but also hikes up the mark on user friendliness and finally has room aplenty to add more and more features by both bloggers and developers.

The Beta Blogger Template can be simplified into five main parts......

The new Beta Blogger template is the foundation behind the new features and user friendliness of Beta Blogging. It uses XML so that Blogger Blogs are now 'dynamic' and do not require republishing after any small change to the posts or the template. Previously Blogger would create static HTML files on your Blog*Spot account every time you published, and those files would remain there unchanged until your next update. In the new Beta version, adding a new post simply updates your information in the database. Then, when someone wants to see any of the pages on your blog, those pages are created for them dynamically, on the fly. This makes the process of updating your blog much simpler and faster. You don't have to remember to republish anymore, or decide whether to do a "republish index only" or "republish all." The instant you save a new post, template design, or settings change, your blog is updated. No more waiting for what many experienced bloggers call "the spin of death" when the icon would continue to spin endlessly.

Once you have logged in you can edit any post with one click on the web page itself. The post opens up for editing without you having to navigate through the Dashboard to the Post Editor. After making the changes you want it is saved and published in one step after clicking on Publish. You can then view it immediately with just one more click!

The new template is also responsible for creating Layouts where the blog is divided into Page Elements which can then be arranged by a simple click-and-drag method on a WYSIWYG or graphical interface. Thus you can customize your blog just by rearranging the Page Elements in a different order.

One of the biggest lacunae in the old Blogger was the absence of Categories. This delighted the hackers no end who then set about devising hacks for implementing them. The average blogger was left to decide for himself which was the simplest hack to implement and spent days implementing them often with doubtful results. Beta Blogger has taken care of this through 'Labels'. You can add Labels to each post when creating it and then add a Labels Section to the sidebar where all of them are displayed along with the number of posts they are appearing in. The reader can then click on the Label he is intrested in to immediately display all the posts with that Label in them.

The start of the Beta Blogger Template with all these impressive features - drum rolls please - is deceptive. However, it has to bow to conventions and web standards and hence starts with the 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. XML stands for eXtensible Markup Language. It is a new markup language, developed by the W3C (World Wide Web Consortium) mainly to overcome limitations in HTML. The second line is the HTML declaration. The third line is the XHTML declaration which is the XML version of HTML. The rest define XML namespaces which are used to identify XML elements.

When you download a Beta Blogger Template using the download link under the Template tab it is saved as a file with an XML extension to your hard drive. You cannot copy and paste Classic Blogger Templates into the new Beta Blogger because they are HTML templates.

The Second Part of the Beta Blogger template is similar to the old Blogger template and consists of the opening Head tag, the Title tags and the Metatags. The Metatags and the title tags have the same function as in the old Blogger templates viz informing the search engines about the subject of your blog and getting it indexed by them :

<head>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<meta content='BLOG DESCRIPTION' name='Description'/>
<meta content='BLOG KEYWORDS' name='keywords'/>
<meta content='index,follow' name='robots'/>

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 part of the template is responsible for giving the user multiple choices regarding the Fonts and Colors in his blog. He can use this feature through a WYSIWYG or graphical interface to change the sizes of fonts and the colors in his blog. Thus unlike in old Blogger where the average Joe Blogger had to wade through ankle-deep template code - always fearing the template sinking beneath his feet - to change his blog colors, the new beta blogger simply points-and-clicks to choose his fonts and colors. This can be done any time you are tired of your blog colors and want it to have some brand new clothes. This section starts with :

<b:skin><![CDATA[/*
/* Variable definitions
====================

Here CDATA section starts and is used to denote to the XML parser to ignore this section as it includes XML tags and not to parse the data within it until it comes to the closing of CDATA denoted by ]]> where it should resume parsing. The <b:skin> tag signifies the beginning of the CSS section which in old Blogger was denoted by <style type="text/css">.


The FOURTH PART of the template is the CSS (CASCADING STYLE SHEET) section which is also similar to the old blogger template except for new divisions. The body remains the same but inside it is the Outer Wrapper which contains the Header, Main Column, Sidebars and the Footer. This part ends with the following tags :

]]></b:skin>
</head>

The ]]> tag ends the CDATA section which means the XML parser can now start parsing. Then the </b:skin> tags signify the ending of the CSS section. In the old Blogger this was denoted by </style>.
Finally this is the end of the head section which started after the language declarations and is denoted by </head>.


The FIFTH and final part of the template starts here and consists of the body of the page in HTML. This is denoted by the starting <body> tag at the beginning :

<body>

Inside the body is the outer wrapper defined by :

<div id='outer-wrapper'>

Inside the Outer Wrapper are :

1. The Header Wrapper containing the Header.
2. The Content Wrapper containing the Main and the Sidebar Wrappers containing their respective sections.
3. The Footer Wrapper containing the Footer.

This final part of the template ends with closing the Outer Wrapper division, then the closing body tag </body> and finally the page ends by closing the html tags as such : .


Inside each Header and Footer Wrappers are the respective header and footer Sections containing a number of various Widgets or Page Elements. The Content Wrapper contains the main and sidebar sections also similarly containing a number of various Widgets or Page Elements.

Thus we arrive at the heart of the Beta Blogger Template, its kernel as it were, consisting of the humble Widget. It is this Widget - short for Web Gadget - which does all the blogging functions carrying data to and fro from the database. Each Widget is called a Page Element in WYSIWYG view and there are twelve types of widgets as of date. Twelve types of widgets carry twelve types of data and can be used to add the following to your blog : List, Links, Picture, Text, HTML/Javascript, Adesnse, Feed, Labels, Logo, Profile, Blog Archives and Page Header. Each widget is defined by tags like this:

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>


</b:widget>

Inside these are the includable tags and inside them you can place your code. This feature is unique to the Beta blogger template and enables you to add code to make your own widget. Widgets can also be customized by defining their characteristics in the CSS.

Hence the new Beta blogger Template not only adds more functionality to the old Blogger but also hikes up the mark on user friendliness and finally has room aplenty to add more and more features by both bloggers and developers.

10 comments:

Elai Cruz said...

Hi! Thanks so much for your help. (You replied to my posted problem on the forums.) Would have replied there except that I had trouble accessing the reply page. Local server problem, more like it. Thanks again!

12/04/2006 10:11 AM
Resources Unlimited said...

Any advice on embedding Google Calendar? I followed the instructions, but it's not working. Thanks!

1/31/2007 11:14 PM
vin said...

Resources Unlimited

Take a look at

Google Calendar for Bloggers


Dummies Guide to Google Blogger Beta

2/02/2007 11:00 AM
Admin said...

thanks for give html link at forum but i dont know how to make it?i try put the html for link but isn't to be?so what i must do?

4/19/2007 11:16 PM
vin said...

Yiesmart,
I need more details about your problem. Please email me. The address is in left column at :
Dummies Guide to Google Blogger Beta

4/20/2007 7:56 AM
(((*.*))) said...

i got a right to left ld html template which i didnt writemeself

however its publishers have not released a version fo the xml blogger of it.

so im stuck with the old one
and dont know how to convert the fabulous all right to left html to xml
:(

5/27/2007 4:02 AM
Alopix said...

Nice post, very helpful!

Stavros

6/19/2007 2:20 PM
Anonymous said...

OK. Useful post- at a high level. But I still haven't figured out what I can and can not change when I want to customize the danged widgets. I want to keep them. (Not necessarily hack the hell out of them...) But change them...

6/21/2007 6:10 AM
Anonymous said...

plz tell me read more and collapse widget.

Hariharakumar
hariharakumar-blog.blogspot.com

7/08/2007 10:56 AM
vin said...

Anonymous/Hariharakumar,

Have a look at :

http://betabloggerfordummies.blogspot.com/2007/02/expandable-post-summaries.html

7/08/2007 12:13 PM

Post a Comment