Skip to main content

Using An HTML Template With Layouts Blogger

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.
  1. Start with a clean and new Layouts "Simple" (ex "Minima") template.
  2. Remove the XML based body code.
  3. Replace the removed body code with the body code from a well defined HTML template.
  4. 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.
  5. Add any CSS rules required by the body HTML to the template header.
  6. 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 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'/>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>

<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>

<!-- 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 id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

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

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


Floyd said…
I am doing something wrong I tried this but must have gotten something wrong? So the HTML code goes between body and /body and put the sidebar XML between the head and footer ? Is this correct?
Chuck said…

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.

Popular posts from this blog

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.

Help! I Can't See My Blog!

I just posted to my blog, so I know that it's there. I can tell others are looking at it. But I can't see it.

Well, the good news is you don't have a blog hijack or other calamity. Your blog is not gone.

Apparently, some ISPs are blocking *, or maybe have network configuration or infrastructure problems. You can access or you can access, but you can't access, or

You can't access them directly, that is. If you can access any free, anonymous proxy servers, though, you may be able to access your blog.

Note: You can use PKBlogs with the URL pre packaged. Here is the address of this post (with gratuitous line breaks to prevent the old post sidebar alignment problem):

And an additional URL, to provide to those suffering from this problem, would be the WordPress version of this post: