Interchanging Templates and Layouts in Blogger.

The advent of the new version of Blogger introduced the term Layout instead of Template for the new blogs. If you had started a blog in the old Blogger then you had a template. The new version of Blogger migrated your blog while retaining the old template. You then had the option to upgrade to the new layouts or keep to the old template.


The new Layouts are responsible for the new features in Blogger and since they require dynamic publishing cannot be used on ftp blogs. Old timers prefer to stay with what they know best and can edit easily like the old HTML templates. Newbies on the other hand love the Labels and new Archives features of the Layouts which enable them to categorize posts easily. However those wishing to interchange easily between Templates and Layouts are stumped. Here are some diagrams to help these Blogger users..............



If you start a new blog now you automatically get a new Layout for your blog. Layout is a term used to refer to the Graphical User Interface Blogger has introduced to enable bloggers to edit the template using click and drag rather than making changes to the XHTML code of the template. Here is a Web definition for "Layouts" :

Put visual elements into a pleasing and readable arrangement.

To access this login to your Blogger dashboard and click on Layout link next to your blog name. This will open the Page Elements subtab of Template tab where you can see all the sections of your blog and can drag and drop widgets to wherever you want. You can also add other widgets to any section of your blog from this page.


However there are some who wish to use Classic Blogger (HTML) templates. These people have to first revert to classic template in their blog and then load the classic template they wish to use. To do this login to Dashboard and click on Layout. Then click on Edit Html subtab of Template tab. Scroll down to end of this page below the template box. There you will see a "Revert to Classic Template" link. Click that link and your blog will revert to classic template. See picture below
:

Follow the instruction on the left to revert to classic template. If you wish you can download this diagram and use it as a flash card to remind you of the method. Just right click the picture and choose 'Save Image as' to save it to your disk.



If you attempt to paste a HTML template into the new Blogger layout you will get an error message :

Your template could not be parsed as it is not well-formed. Please
make sure all XML elements are closed properly.

Error messages in Blogger Templates explains the error messages and their correction.

UPGRADE TO LAYOUTS

Those people who wish to take advantage of new Blogger features like Labels should upgrade from classic template. To do this login to Dashboard and click on Template for your blog. Then click on Customize Design subtab. This page contains the Upgrade link to upgrade blog to Layouts. See picture below :


Follow the route on the right to upgrade to layout. You can steal the above graphic to keep as a reference.



Remember the two : HTML templates and XHTML/XML layouts are incompatible with each other and do not try and paste one into another.

Template or Layout Which is Better?

There are many HTML templates for Classic Blogger on the Internet which the newbie blogger comes across while searching for new templates.


Unfortunately these are incompatible with the new Blogger layout templates and will give error when pasted in the template box.


This causes much confusion even for experienced bloggers who are used to switching their blog templates in the blink of an eye. Hence here are some tips and tricks to know the difference between templates and layouts and the pros and cons of choosing either..........

The new Blogger debuted with the layout templates which were designed to introduce dynamic publishing and Labels. These layout templates are in XHTML/XML which is different and less forgiving then HTML. If you have started blogging in the old blogger you are used to Classic templates in HTML. After migrating to the New Blogger you had the choice to upgrade to the new layouts template.

ADVANTAGES OF LAYOUTS :

1. No need for republishing. Everything published immediately.

2. Labels can be used to categorize your posts according to keywords.

3. Increased traffic due to use of Labels.

4. One click access to editing widgets.

5. WYSIWYG (GUI) layout interface to arrange/edit your widgets on the PAGE ELEMENTS subtab of Template tab.

6. One click access to Layout/Page element tab from Dashboard.

7. Navigation Links at the bottom of each post.

8. Subscribe to Posts Atom (feeds) link at the bottom.

9. Way of the future as the Web gravitates to XHTML/XML and widgets.

DISADVANTAGES OF LAYOUTS :

1. Learning Curve to master XHTML/XML.

2. XHTML/XML more strict and spews out more errors than HTML.

3. Data separate from template code.

4. Widgets data not transferred along with widgets code when loading a new layout. After loading a new layout you have to enter widgets content separately.

5. At present not many XHTML/XML layouts are available free but many developers are coming out with new designs. Till then hack into your own layout to customize it.

6. No Previous Posts section. All posts in the Archives widget. Previous Posts section in sidebar can be added as a hack.

7. Many Javascript codes do not work here unless they are XHTML valid.

8. The expanded widget templates code is voluminous and difficult to navigate. This makes it more difficult to add a hack.

9. Difficult to add Adsense code within a post.

10. Many do not like/understand the Subscribe to Posts Atom link at the bottom.

11. Customizing each widget is more difficult. Though there is a Fonts and Colors tab it does not allow you to change colors of everything.

Only those variables described in the 'Variable Declarations' section at the top of the template can be changed. You can manually add more customization but that requires more knowledge of CSS and variables.

12. Cannot be edited in WYSIWYG web editors as it is in XHTML/XML.

13. Cannot be used on ftp blogs as they need to be hosted on Blogger servers.

ADVANTAGES OF HTML TEMPLATES :

1. Easier to learn.

2. Easier to change with less errors.

3. Data and template code loads in combination on loading a new template.

4. No need to backup widgets data separately.

5. Many ready made templates available on the Internet.

6. Previous Posts section present in the sidebar.

7. Javascript codes for adding the blings to your blog still work.

8. Adding a template hack is simpler.

9. Easier to add Adsense code within a post.

10. Customizing colors more simpler.

11. Can be edited in WYSIWYG web editors even by those having rudimentary HTML knowhow.

DISADVANTAGES OF HTML TEMPLATES :

1. Label links need to be added manually to sidebar like other links.

2. Labels below posts are present but cannot be customized.

3. Likely to be phased out in the future but not very soon.

4. Navigation links to Previous Post, Next post and Home have to be added via a hack.

5. Feed links have to be configured manually.

6. Cannot be ported to a Layout without a big headache. You have to load a similar looking layout and then hack it to resemble your old template.

HOW TO IDENTIFY YOUR TEMPLATE/LAYOUT?

If you create a new blog now it will have the layout template as default. You can know it is the Layout template when you load your blog in a browser and it shows :

1. An Archive widget in the sidebar with drop down arrows.

2. No Previous Posts section in sidebar.

3. Navigation links below the post on post pages.

4. Subscribe to Posts Atom link below the posts.

5. If you are logged in to Blogger you will see your email address in the Navbar at the top and the spanner-screwdriver quickedit icons at the corner of widgets. You will not see the address and editing icons when viewing other people's blogs.

6. When you go to Template----->Edit Html and look at the template code you will see tag at the top in a Layout template and <style type="text/css"> tag in a Classic HTML template. If you cannot see these tags just do a Select All in the Template box and then copy and paste the code in a Notepad file and use Ctrl+F to search for 'skin' or 'text/css'.


7. To check a template in another blog go to View------>Page Source when you are viewing the blog and then if you see the skin tag <style id='page-skin-1' type='text/css'>; then it is a Layout template. If you see <style type="text/css"> then it is a Classic HTML template.

8. After login to Blogger Dashboard if there is a 'Template' link next to your blog title then the blog has a Classic HTML template. If there is a 'Layout' link then it has a Layout template.

9. XHTML/XML layout template files usually have the .xml file extension. When you download your layout template using the Download Full Template link on the Template------>Edit Html page it is saved as a XML file on your PC. Though they can also be in a text file.

ERROR ON PASTING WRONG TEMPLATE :

If you paste a Classic HTML template into the template box of a blog with Layouts you will get this type of error :


We were unable to preview your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please
make sure all XML elements are closed properly.

See Error Messages in Blogger Templates for more error messages, what they mean and how they can be corrected.


Now that we have seen the pros and cons of each layout or template which do you like the best? Just take the poll at the bottom of my right sidebar. Your vote is important! It may just help to increase the life of the Classic template!

Blog Redirection.

Lots of blogs are being redirected to other sites to attract traffic. These blogs usually have a title designed to attract attention and when viewers click on the blog link they are redirected to other sites.....

For example one blog was named "A Hot Girl's Page..." and was redirected to "Nancy Live on Cam". I was interested in this phenomenon and decided to investigate how it was done. I pasted the url for "A Hot Girl's Page..." in my browser and stopped the browser just before it redirected. I then looked at the page source for this blog by going to View----->Page Source in Firefox. This blog only had one post in it. I scrolled down the page source and came upon this code in the posts section :

<div class='post-body'>
<p><META HTTP-EQUIV="REFRESH" CONTENT="0; URL=LINK OF DESTINATION SITE"></p>

The single post in the blog had no content and this code was pasted within that post. Nothing showed up in the blog page because there was no other content. This code caused the browser to be redirected to the DESTINATION SITE without any delay.
Do not try to search for this blog since it has been deleted by Blogger.


The importance of redirection lies in the fact that your own blog may be hacked and all traffic redirected to other sites. To avoid this it is important to see the methods used for redirection.

HTML REDIRECTION

This is the method used in the above example. The following code is used :

<meta http-equiv="Refresh" content="0; url=http://site.com/page.html">

This code is pasted in the blog post or in the <head> section of the template. This causes the blog to redirect to http://site.com/page.html even when the browser has Javascript disabled. To delay the redirection a number is put after the "content=" like this :

<meta http-equiv="Refresh" content="5; url=http://www.mysite.com/mypage.html">

The delayed redirect has the advantage that you can place an extra message, such as “The page you are looking for changed location… You will be redirected automatically to the new location”

JAVASCRIPT REDIRECTION

This is the other method used. It does not work if Javascript is disabled in viewer's browser. The following code is pasted in the <head> section of the template.

<script>
window.location="http://www.mysite.com/mypage.html";
</script>

EXTERNAL JAVASCRIPT can also be used to redirect your blog. The way this works is that you may wish to incorporate a hack in your blog. You are then asked to paste this line above the </head> tag in your template :

<SCRIPT language="JavaScript" SRC="http://URL OF HACK SITE/jshack.js"></SCRIPT>

The jshack.js file is located at http://URL OF HACK SITE/ and contains the redirect code. You can see the full code when you type the whole address for the file in the address bar and press Enter.
To prevent this type of redirection do not add such codes in your template unless they come from a trusted site. You can also download the JS file and add the whole code instead of a link to the file.

JAVASCRIPT ALERT REDIRECTION

You can alert your viewers that they are being redirected using this Javascript code :

<script>
alert("This page has been moved to a new location... click OK to be redirected?");
location = "http://www.mysite.com/mypage.html";
</script>

To use a confirm dialog use this code :

<script>
if(confirm("This page has been moved to a new location... would you like to be redirected?"))
{
location = "http://www.mysite.com/mypage.html";
}
else
{
history.back();
}
</script>

FLASH REDIRECTION

Scripts embedded in Flash are also responsible for redirecting sites. Hence be careful when adding flash content to your sites. MySpace sites were redirected using Flash. Click here for more details.

PHP REDIRECTS

Though PHP is not used in Blogger for the sake of completion PHP redirects are done using this code :

<?php
header( 'Location: URL OF DESTINATION' ) ;
?>

SEARCH ENGINE OPTIMIZATION

All the above methods are used by hackers to redirect traffic from a blog with a high Page Rank to their site. These methods are recognized by search engines and can result in getting your site banned. Hence make sure to protect your blog by having strong passwords so that no one can hack into it and place these codes in your template. In case you do get complaints fro viewers that your blog is being redirected look for these codes and delete them from your template and change your passwords.

301 REDIRECT

This is the best method to prevent you from being penalized by the search engines. Unfortunately it cannot be used on Blogger. However, you can use it to redirect on ftp blogs. To do this locate your .htaccess file in the root directory of where all your web pages are stored. If there is no .htaccess file there, you can create one with Notepad or a similar application. Add the following lines after leaving a space after all the code :

redirect 301 /folder/page1.htm http://www.newsite.com/folder/newpage.htm

where /folder/page1.htm represents the original page and http://www.newsite.com/folder/newpage.htm represents the destination page. Leave the spaces as they are after 301 and before destination site URL. The 301 redirect is the safest way to preserve your rankings. On the next indexing, the search engine robot will obey the rule indicated in your .htaccess file and index the new page name every time a link or its internal database tries to access the old page. If your site is hosted on a Microsoft IIS server then do this: In internet services manager, right click on the file or folder you wish to redirect. Select the radio titled “a redirection to a URL”. Enter the redirection page, check “The exact url entered above” and the “A permanent redirection for this resource”. Click “Apply”.

Technorati Tags:blog redirection, html, javascript, seo,

XHTML Tips and Tricks for Bloggers.

The new blogger uses XHTML templates which are based on XML. Hence it is important for old bloggers switching to the new bloggers to see how different the new language is.......

TO CONVERT HTML TO XHTML you can use Tidy a utility from

http://sourceforge.net/projects/tidy

NOTE : When you download Full Template using the Download Full Template link under the Edit Html subtab of the Template tab it is saved to your PC as a XML file.

COMPARISON OF HTML AND XHTML

Came first	Developed later (ver2.0 July2006) and will replace HTML in the future.
Offers limited set of document-creation primitives	Backwardly compliant with HTML Future compliant with XML
Incapable of handling non-traditional content like chemical formulae. musical notation etc	One of the reasons why XHTML based on XML was developed. XML has a large vocabulary to describe any kind of data.
Does not support new media like handhelds and mobliles. Majority of HTML is completely compatible with XHTML	Future Proof with XML Backwardly compliant with HTML.
End Tags may be left out in 4.01 Standard	Every tag must have a corresponding end tag. OR include a slash before closing bracket of tag to indicate its ending. Example <br />
Does not enforce strict nesting of elements.	Strict Nesting of elements. Close the tags in the order they are opened.
Not case sensitive.	Case Sensitive for all tag and attribute names. Example <a> and <A> are different tags. This is because XML is also case sensitive.
	The Strict definition excludes all deprecated elements in HTML4.01 The Transitional definition includes the deprecated features of HTML and thus you can stay current while also being XML compliant. The frames definition is similar to the Transitional and also includes frame elements.
	Documents must be well formed. Requires more attention in writing.
Enclose stylesheets/scripts in <style> </style>	Enclose stylesheets/scripts in CDATA sections like this <script language="javascript"> <![CDATA[...Javascript here...]]> </script>
Single quotes will do : <table rows='2'>	Every attribute value should be enclosed in double quotes : <table rows="2">
Some attributes have no values : ismap	Every attribute must have a value. Those without values must use their own names. Thus ismap="ismap"
Majority of HTML is completely compatible with XHTML	Backwardly compliant with HTML
	The Strict definition excludes all deprecated elements in HTML4.01 The Transitional definition includes the deprecated features of HTML and thus you can stay current while also being XML compliant. The frames definition is similar to the Transitional and also includes frame elements. Requires more attention in writing.
End Tags may be left out in 4.01 Standard	Documents must be well formed.
<img src=seasonings.gif alt="Salt & pepper"> is valid HTML	Ampersand within an attribute value should always be written using "& a m p ;" and not simply an & character <img src="seasonings.gif" alt="salt &a m p ; pepper" /> is valid XHTML
	All XHTML elements must be nested within the root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element.

What is XML, XHTML?

XML and XHTML are two new terms popping up into the beta bloggers' lexicon and we consider them here.....

First came SGML. Standard Generalized Markup Language (SGML) is a metalanguage in which one can define markup languages for documents. SGML is a descendant of IBM's Generalized Markup Language (GML), developed in the 1960s by Charles Goldfarb, Edward Mosher and Raymond Lorie (whose surname initials also happen to be GML). In logic and linguistics, a metalanguage is a language used to make statements about other languages (object languages).

A markup language combines text and extra information about the text. The extra information, for example about the text's structure or presentation, is expressed using markup, which is intermingled with the primary text. The best-known markup language in modern use is HTML (HyperText Markup Language), one of the foundations of the World Wide Web.

Next came HTML. In computing, HyperText Markup Language (HTML) is a predominant markup language for the creation of web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax. HTML templates can begin with this line :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

or this line :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Strict.dtd declares the document to be HTML 4.01 Strict. HTML 4.01 Strict is a trimmed down version of HTML 4.01 that emphasizes structure over presentation. Deprecated elements and attributes (including most presentational attributes), frames, and link targets are not allowed in HTML 4 Strict. By writing to HTML 4 Strict, authors can achieve accessible, structurally rich documents that easily adapt to style sheets and different browsing situations.

Transitional declares the document to be HTML 4.01 Transitional. HTML 4 Transitional includes all elements and attributes of HTML 4 Strict but adds presentational attributes, deprecated elements, and link targets.


Then came XML. Extensible Markup Language (XML) is a W3C-recommended general-purpose markup language that supports a wide variety of applications. XML is a simplified subset of Standard Generalized Markup Language (SGML). Its primary purpose is to facilitate the sharing of data across different information systems, particularly systems connected via the Internet. The first line in a XML template for beta blogger is :

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



And Finally we have XHTML. XHTML is the next generation of HTML and is a hybrid between HTML and XML. XML was designed to describe data. HTML was designed to display data. XHTML is much stricter than HTML. Not all browers support XML so XHTML provides an intermediary soluton and can be interpreted by XML and HTML browsers. XHTML templates begin with this line :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(source : Wikipedia)

XML and XHTML in BETA BLOGGER.
HTML and XHTML files can be opened in NOTEPAD and edited in it. XML files require special software like :

XML Notepad 2006
Microsoft XML Notepad
Stylus Studio XML Pro
XML Fox XML&XSD Editor

to open and edit them. When you download template in Beta Blogger using its new 'Download Full Template' feature (see picture alongside) the template is downloaded with the file extension XML.

Another way of backing up your template in Beta Blogger is to check the Expand Widget Templates box on top of the Edit Template text box, select all in the edit template text box and copy and paste it to a text file in Notepad.

You can upload text template files to beta blogger using Upload a template from a file on your hard drive feature just below the 'Download Full Template' link. Using the Download Template feature downloads XML template files to your PC.

Technorati Tags:html, sgml, template, xml xhtml

How to HTML in Beta Blogger.

How to code HTML in a Beta Blogger Template.......

The Beta Blogger Template consists of the five main parts outlined in Parts of the Template. Of these the first part is where the HTML is declared. The second part consists of the title and the metatags. The third part is peculiar to the beta template and is where the Variable Definitions are defined. The fourth part is where the style of the web page is defined using CSS. The fifth and last part consists of the 'Body' of the web page and it is where HTML plays a major role. The fifth part lies between the <body> and </body> tags.

This is the part where the Sections of a Blog are defined. These Sections are Header, Main, LeftSidebar, RightSidebar and Footer. The Header section is contained in the 'header-wrapper'. Similarly the Footer Section is contained in the 'Footer-wrapper'.
The 'content-wrapper' contains the three sections in the middle : Main, LeftSidebar and RightSidebar. For a diagrammatic representation see : Beta Blogger Template Structure Schematics


Each Section can contain one or many Widgets. For detailed explanation of widgets see The Widgets of Beta Blogger. Each Section is coded like this :

<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>

The first line shows the name of the Section, its id and whether it should show an 'Add Page Element link in the Page Elements subtab under the Template tab. The second, third and fourth lines show the contracted widget code for each widget. If you put a check box in the Expand Widget Templates box at the top of the Template text box then these lines are further expanded into full widget code. The last line of code closes the Section.

All the above five lines of code are included between these two lines :

<div id='main-wrapper'>


</div>

which represent the main-wrapper.

Technorati Tags:html, sections, widgets

Parts of the Template.

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