Up to now, I've written about Blogger blogs, and Classic vs Layouts templates, as if classic and layouts templates are two separate worlds.
Classic = HTML = old school. Layouts = XML = new and shiny.
Sometimes, you might want to blur the distinction between the two. Maybe you got a shiny HTML design for your blog, or you want to combine your blog with your web site. And, you want to use Layouts accessories, comments, and posts, written in XML.
Is it possible to have the best of both worlds? Use a Layouts Blogger blog, and base the template around HTML code? The answer is, yes. And, it's not all that difficult to do so.
Make a conversion plan, go one step at a time, and you can do it.
And as an overview, that's it. Details follow.
Well defined CSS / HTML is essential.
Raw HTML uses all style information in the HTML code. HTML with CSS uses CSS code defined in the template header, in both external and internal style sheets. CSS for the HTML can use all 3 definition techniques, just as CSS for XML in native Layouts Blogger blogs.
You'll define style rules - just as with any CSS based template, in external style sheets, and inline style sheets. And you'll use these rules in the body HTML, installed below.
You will have to know what style rules are essential in your template, and you will have to take careful precautions, and ensure that the rules are unique, and do not conflict with Blogger code. This has been the number one problem seen in using this technique, to date. Uniquely defined CSS references are essential.
Take a clean and up to date "Simple" template.
I use a "Simple" (ex "Minima") template, because it contains a minimum of decorations and style rules that might conflict with any HTML content. To properly display accessories, comments, posts, and other XML based content, I leave in all external and inline "Simple" style rules.
Add any CSS rules which your template requires.
If your HTML templates uses any inline CSS rules, you'll copy them as part of the body code, below. If your template uses an external or internal style sheet, copy the external reference and / or the internal style rules into the header of the new template, just as it is setup in the HTML of the existing template.
All style rule names must be distinct, and must not conflict with style rule names used in Blogger template "Simple" style rules. Best choice (my recommendation) would be to add a prefix to all style rules which are essential to your layout. Rules like "footer", "header", "main" (for instance), I would code as "nitecruzr_footer", "nitecruzr_header", "nitecruzr_main", etc.
Remove all code between "<body>" ... "</body>".
All containers and objects on the screen, with the exception of the main and sidebar containers (added next), will be HTML based. So, start by removing all body code from the new template.
Install the HTML template code between "<body>" ... "</body>".
The HTML template body code, from the existing template, replaces the body code, in the new template.
Remove all body code between the header and footer sections of the screen.
The header and footer will be HTML, but comments, posts, and sidebars will be XML. A possible enhancement of this procedure, coming next, would be to include the header and footer as XML. Right now, let's leave header and footer objects as HTML, and use them to define the upper and lower border of the contents.
Simply find the header and footer objects in the new template. Remove all code between the two objects.
Paste Main and Sidebar XML code between header and footer code.
In a Layouts Blogger blog, the accessories (in the sidebars), and the comments and posts (in the main container) are written as XML. With all native Blogger CSS rules provided complete and non conflicting, the main and sidebar containers will work as natively installed.
"Simple" templates use a container named "content wrapper", which contains a cross column wrapper at the top, the posts and sidebar(s), and a break at the bottom. This container is well outlined.
Here, for instance, is the Content wrapper, setup for a standard "Simple" 3 column template.
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main1-wrapper'>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' showaddelement='no'>
<b:widget id='Label1' locked='false' title='Tags' type='Label'/>
</b:section>
</div>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>
<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
Here, on the other hand, is the Content wrapper from this blog. This is a standard "Simple" 2 column template.
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Label1' locked='false' title='Tags' type='Label'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
When you insert code, count the <div> ... </div> pairs, with great care. Ensure that each <div> ... </div> is properly matched.
That's it. Really.
It's really simpler than it looks. Try it, and see.
Classic = HTML = old school. Layouts = XML = new and shiny.
Sometimes, you might want to blur the distinction between the two. Maybe you got a shiny HTML design for your blog, or you want to combine your blog with your web site. And, you want to use Layouts accessories, comments, and posts, written in XML.
Is it possible to have the best of both worlds? Use a Layouts Blogger blog, and base the template around HTML code? The answer is, yes. And, it's not all that difficult to do so.
Make a conversion plan, go one step at a time, and you can do it.
- Start with a clean and new Layouts "Simple" (ex "Minima") template.
- Remove the XML based body code.
- Replace the removed body code with the body code from a well defined HTML template.
- Take the XML based "Simple" Blogger code that defines the sidebars and posts area, and paste it into the middle of the body code, as just installed.
- Add any CSS rules required by the body HTML to the template header.
- Ensure that all added rules have unique names which will not conflict with existing Blogger "Simple" code.
And as an overview, that's it. Details follow.
Well defined CSS / HTML is essential.
Raw HTML uses all style information in the HTML code. HTML with CSS uses CSS code defined in the template header, in both external and internal style sheets. CSS for the HTML can use all 3 definition techniques, just as CSS for XML in native Layouts Blogger blogs.
You'll define style rules - just as with any CSS based template, in external style sheets, and inline style sheets. And you'll use these rules in the body HTML, installed below.
You will have to know what style rules are essential in your template, and you will have to take careful precautions, and ensure that the rules are unique, and do not conflict with Blogger code. This has been the number one problem seen in using this technique, to date. Uniquely defined CSS references are essential.
Take a clean and up to date "Simple" template.
I use a "Simple" (ex "Minima") template, because it contains a minimum of decorations and style rules that might conflict with any HTML content. To properly display accessories, comments, posts, and other XML based content, I leave in all external and inline "Simple" style rules.
Add any CSS rules which your template requires.
If your HTML templates uses any inline CSS rules, you'll copy them as part of the body code, below. If your template uses an external or internal style sheet, copy the external reference and / or the internal style rules into the header of the new template, just as it is setup in the HTML of the existing template.
All style rule names must be distinct, and must not conflict with style rule names used in Blogger template "Simple" style rules. Best choice (my recommendation) would be to add a prefix to all style rules which are essential to your layout. Rules like "footer", "header", "main" (for instance), I would code as "nitecruzr_footer", "nitecruzr_header", "nitecruzr_main", etc.
Remove all code between "<body>" ... "</body>".
All containers and objects on the screen, with the exception of the main and sidebar containers (added next), will be HTML based. So, start by removing all body code from the new template.
Install the HTML template code between "<body>" ... "</body>".
The HTML template body code, from the existing template, replaces the body code, in the new template.
Remove all body code between the header and footer sections of the screen.
The header and footer will be HTML, but comments, posts, and sidebars will be XML. A possible enhancement of this procedure, coming next, would be to include the header and footer as XML. Right now, let's leave header and footer objects as HTML, and use them to define the upper and lower border of the contents.
Simply find the header and footer objects in the new template. Remove all code between the two objects.
Paste Main and Sidebar XML code between header and footer code.
In a Layouts Blogger blog, the accessories (in the sidebars), and the comments and posts (in the main container) are written as XML. With all native Blogger CSS rules provided complete and non conflicting, the main and sidebar containers will work as natively installed.
"Simple" templates use a container named "content wrapper", which contains a cross column wrapper at the top, the posts and sidebar(s), and a break at the bottom. This container is well outlined.
Here, for instance, is the Content wrapper, setup for a standard "Simple" 3 column template.
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main1-wrapper'>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' showaddelement='no'>
<b:widget id='Label1' locked='false' title='Tags' type='Label'/>
</b:section>
</div>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>
<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
Here, on the other hand, is the Content wrapper from this blog. This is a standard "Simple" 2 column template.
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Label1' locked='false' title='Tags' type='Label'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
When you insert code, count the <div> ... </div> pairs, with great care. Ensure that each <div> ... </div> is properly matched.
That's it. Really.
It's really simpler than it looks. Try it, and see.
Comments
I added some illustration above, see if it helps.
If not, maybe you could post in BHF: How Do I?, or in Nitecruzr Dot Net - Blogging, where we can work on this easier.