Saturday, March 03, 2007

Creating a Blogger Template ...

... From scratch ...


As I wrote in the Wonderful Techniques post:
can be pottered easily in(to) ... .

Let's assume you have your own template: just a basic (x)html structure - created using a template generator or maybe you build it yourself or you probably borrowed it somewhere (in that case: be a sport and credit the original designer!).

It should look somewhat like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!-- some css styling here -->
</style>
</head>
<body>

<div id='container'>
<div id='header'> </div>
<div id='main'> </div>
<div id='sidebar1'> </div>
<div id='sidebar2'> </div>
<div id='footer'> </div>
</div>

</body>
</html>

That's a rudimentary, clean, uncluttered template. It can easily be transformed into a Blogger Template. Takes only two steps!

1) Make this a eXtensible Markup Language (XML) document!

Pick a Blogger Template (any!) and copy the necessary code, replacing the (X)HTML heading code with Blogger's XML heading code:

<?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'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/
<!-- some css styling here -->
]]></b:skin>
</head>
<body>

<div id='container'>
<div id='header'> </div>
<div id='main'> </div>
<div id='sidebar1'> </div>
<div id='sidebar2'> </div>
<div id='footer'> </div>
</div>

</body>
</html>

Notice

<style type="text/css">
<!-- some css styling here -->
</style>

is replaced by

<b:skin><![CDATA[/*
*/
<!-- some css styling here -->
]]></b:skin>

Yes, that's all. There you have it: a genuine XML Blogger Template ... .
But empty! So now you should ...

2) add the Blogger Widgets to the body!

As with the XML heading code you can copy the widgets (including the blogger section tags) from any default Blogger Template.

Please read my Save The Widgets !!!.
Make it a habit to comment your code!

<?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'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/
<!-- some css styling here -->
]]></b:skin>
</head>
<body>

<!-- begin container -->
<div id='container'>

<!-- begin header -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
<!-- end header -->

<!-- begin main -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<!-- end main -->

<!-- begin sidebar1 -->
<b:section class='sidebar' id='sidebar1'/>
<!-- end sidebar1 -->

<!-- begin sidebar2 -->
<b:section class='sidebar' id='sidebar2'/>
<!-- end sidebar2 -->

<!-- begin footer -->
<b:section class='footer' id='footer'/>
<!-- end footer -->

</div>
<!-- end container -->

</body>
</html>

Notice it is sufficient to add only

<b:section class='sidebar' id='sidebar1'/>
<b:section class='sidebar' id='sidebar2'/>
<b:section class='footer' id='footer'/>

Once uploaded you can start to Add Page Element(s) there!

This finished example really IS a WORKING Blogger Template - totally unformatted, of course - an adolescent, so to speak.
I just copied that exact code (no more, no less - this sample blog has no css styling at all!!!) in a new testblog. See? Works!

testblog8

Footer and both sidebars are not visible because no Page Elements were added ... but they are present!

testblog8 dashboard

That's how I pottered those Sample Techniques: n01, n16, n26 and n27! Borrowed some structures from Alessandro Fulciniti and made them into ready-to-use Blogger templates.

Like I said before: you probably won't need us anymore!

Posted by thur at 12:10 PM

Labels: , , ,

4 comments:

skl said...

Hello there,

I've been trying to adapt the code from your site

http://thurtest.blogspot.com/

to mine

http://musicplpt.blogspot.com

but I cannot make the body section work.

Both left and right sidebars seem to be ok but I have an issue with the main one, as none of the previous post appear when using this new template. Could you please help me somehow?

Take care.

Romeu

11/3/07 02:01
thur said...

I don't know what you mean with adapt the code!?!

You only have to download the DownRight v1.4 and upload the template in the Blogger Dashboard.

Or am I missing your point?

11/3/07 03:05
Steve said...

How do I create a new blogger template on an FTP blog? Or, does this only work for Blogspot blogs?

3/4/07 08:26
Anonymous said...

good work friend. everything works fine with my blogs.
Thanks

5/7/07 11:36

Post a Comment

Subscribe to: Post Comments (Atom)