The Blogger WorkShop

Hello again!

2007-10-06T15:54:00.000+02:00

Hmmm ... that looked like a sabbatical indeed. Last time I posted here was somewhere april. I had and have my reasons, off course.

When I returned, so to speak, there were about 70 comments, waiting for approval. I do apologize to all, but I hope you can understand I am not going to catch up!

And I noticed this blog was bloody flagged (by someone or something) and instantly abducted by a crawler! The site was gone (like a Norwegian Blue Dead Parrot) and the original address is gone. A bloody mess, yes. Well, I mailed the team and redirected the original blog to this domain. (I strongly suspect that 'mailing the team' triggers an automatic unmark!) Done!

So the URL has changed and therefore some/many referrals in this place will be dead. I'll try to find all them buggers ... ultimately.

I started working on my personal page first. Upgrading to WordPress 2.3 made me decide to make a real fresh start: dropped all tables, switched to WP 2.3 and created a new theme ...

... 'The Fat Trimmed Out' Wordpress Theme (Published 2.0.1).

And I am running warm again: today I even added Adsense code to both my WP page and this Workshop. Only because it looks nice, I guess. And that green? Is does stand out, but this place starts to get really Tinky Winky.

DownRight v3.0

2007-04-19T21:39:00.000+02:00

After the last tribulation (a not working DownRight v2.1 - in MIE5/6, that is!) here is a new DownRight (fixed 960px width) v3.0.

Hmmm ... right! ... the main column does not load first.

Apart from that this one is healthy!

[ click image to view DownRight v3.0 page ]

At work The White Knight Is Talking Backwards ... so I cannot find the serenity to tackle the little v2.1 bugger.

I'll visit my cherished Skiermûntseach first (a tranquil Week Off: strolling the beach - enjoying my company - reading Pratchett - flying my kites) ... !

DownRight v2.1

2007-03-24T17:25:00.000+01:00

March 29:

I was told (and I have noticed) this new DownRight v2.1 Theme doesn't work correctly in MIE < 7!
So the template is down for now.
And I will fix this, of course.

I do apologize to the folks who have tried this v2.1!

Hi Thur,

I use your Downright v1.4 on my blog Bonnie Writes.

I would like to make the whole thing fixed, like you use here on the Blogger Workshop, rather than the fluid that it is now.

Can you tell me what to do to change that please. Because of SEO, I want to have the main load first, [...] .

Thank you for your help, in advance!

Hi Bonnie,

[ status: completed! ]

[ click image to view DownRight v1.4 page ]

[ click image to view DownRight v2.1 page ]

As promised I have copied the original DownRight v1.4, and made some alterations using negative margins, any order columns and opposite floats
(as I gratefully learned from Alessandro Fulciniti)!

Resulting in a DownRight v2.1 Blogger Theme featuring:

3-column
fixed 960px width
Main column loads first

Here is the xml MarkUp:

<div id='content_wrap'>


   <div id='header_wrap'> </div>



   <div id='main_wrap'> </div>



   <div id='leftbar_wrap'> </div>



   <div id='rightbar_wrap'> </div>



   <div id='footer_wrap'> lt;/div>


   </div>

I have tested the v2.1 in MIE 5/6/7, FireFox and Opera (not in Safari!!!).

Notice:

Because the margin settings are very very strict one should not set any border-width to 0px. Alter the border-color to match the page-background-color instead!

Due to those negative margins the Layout in the Blogger Dashboard looks a bit silly. Works though!

LightBox Photo Cloud

2007-03-18T15:34:00.000+01:00

Using about the same Photo Cloud from my the fat trimmed out ...
I just wanna share that fair and fancy LightBox JS v2.0 with you!

Please click any image:

Hovering over every image in the Lightbox triggers a Next or Prev button, where the whole image works as a map. Neat! Simply pressing n or p for navigating to Next or Previous image (and x to close the box) works too.

Please follow that LightBox link for clear instructions and downloads.

Notice:
The viewer must have JavaScript enabled.
When your WeBlog is published on BlogSpot, you must find yourself a shelter to store all LightBox files (js, css and images)!

The LightBox for WordPress:

WordPress (org) on Lightbox JS
WP lightbox JS WordPress plugin

2.0 needs Rounded Shapes

2007-03-17T15:33:00.000+01:00

Web 2.0 needs Rounded Corners?

Sure! Yes Sir/M'am, indeed! But how?

You can use background images (Dan Cederholm) but there are 'rounded corners without images' (Alessandro Fulciniti) techniques as well!

BIG advantage: can easily be implemented in flexible designs.

I took the page from the Creating a Blogger Template (3) - a fluid design thread and embedded the post in a box. To be found here ... have a look and resize your browser window once you are there!

Pretty much all links pointing towards this subject:

Web 2.0 Workgroup: rounded corners!

(Here is a nice one, for example! Airtight Corners: 'Use the offset filter to shift the image 15 pixels in both directions with Wrap Around selected.')

Creating a Blogger Template (4)

2007-03-06T16:47:00.000+01:00

... Variables ...

This is the fourth part of the Creating A Blogger Template series:

Creating a Blogger Template (1) - from scratch
Creating a Blogger Template (2) - the layout
Creating a Blogger Template (3) - a fluid design
Creating a Blogger Template (4) - variables

Hmmm ... this is (on my account) a rather superfluous thread. All I have to do is point to Google Help > Blogger Help > Working with Blogger > Layouts > Fonts and Colors Tags for Layouts, but this one makes the CaBT tutorials a circle!

A big advantage of the Blogger Layout Feature is the use of (though limited to only fonts and colors) Variables.
(The other one: the Page Element Drag-and-Drop feature - limited within each Blogger Section.)

As explained in the first CaBT:

Notice

<style type="text/css">

</style>

is replaced by

<b:skin><![CDATA[/*
*/

]]></b:skin>

The variables are added, embedded between the comment tags /* */, like this:

<b:skin><![CDATA[/*

Variable definitions
====================

<Variable name="" description="" type="" default="" value="">

*/

]]></b:skin>

As you can see each Variable has a few obliged attributes:

name: a (technical) unique ID;

description: the (logical) descriptive name - as it will appear in the Fonts and Colors tab;

type: 'color' or 'font' - no more, alas!;

default: the default value *;

value: the new value - can be initially left blank;

*) Attribute default explained: can be a color (a hexadecimal color code) or a font (font-style font-weight font-size font-family) value!!!

Two examples (one for each type):

<b:skin><![CDATA[/*

Variable definitions
====================

<Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#cccccc">

<Variable name="bodyfont" description="Body Font"
type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">

*/

]]></b:skin>

So-uhh, what's the catch?

For each font or color in your CSS code you can use a pre-defined Variable!

Two examples (one for each type):

Instead of

body {
     color: #CCC;
     font: italic bold x-small 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;
     }

one can write

body {
     color: $textcolor;
     font: $bodyfont;
     }

So you can define separate colors for fonts, links, hovers, backgrounds, borders, et cetera ... and separate fonts for posts, comments, links, sidebars, headers, et cetera, et cetera.

And you don't have to dive into the xml template every time you feel the urge to change a font or a color. You can control all these in the Fonts and Colors tab on the Dashboard!

Very neat. It really is a pity this handy gimmick is limited to only two types!

What's left, I guess, is learning and understanding CSS.
There are plenty of fine css-link-lists out there!

Some reading:

CSS Beginner Tutorial | HTML Dog
CSS Intermediate Tutorial | HTML Dog
CSS Advanced Tutorial | HTML Dog
CSS Tutorial | W3Schools
Newly Supported CSS Selectors in IE7
Floatutorial | Max Design
A List Apart (hearty recommended!!!)

and so on and so forth

Creating a Blogger Template (3)

2007-03-05T19:56:00.000+01:00

... a fluid design ...

This is the third part of the Creating A Blogger Template series:

Creating a Blogger Template (1) - from scratch
Creating a Blogger Template (2) - the layout
Creating a Blogger Template (3) - a fluid design
Creating a Blogger Template (4) - variables

"Yeah, right, of course ..." (you tell me) "That's all really nice and all ... but where is my flexible layout? I want it fluid ... fluid ... fluid ... ."

Let's use that last Main - Column - Column page:

[ click image to view page ]

The following layout styling was implemented:
( see Creating a Blogger Template (2) )

body {
     margin: 0px;
     padding: 0px;
     }

#container {
     width: 960px;
     margin: 10px auto;
     padding: 0 10px;
     }

#header {
     padding: 10px;
     }

#main {
     width: 560px;
     float: left;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     margin-left: 10px;
     }

#footer {
     padding: 10px;
     clear: both;
     }

To change this fixed layout into a flexible one (all columns fluid) only 3 attributes have to be altered:

body {
     margin: 0px;
     padding: 0px;
     }

#container {
     width: 96%;
     margin: 10px auto;
     padding: 0 10px;
     }

#header {
     padding: 10px;
     }

#main {
     width: 48%;
     float: left;
     }

#sidebar1, #sidebar2 {
     width: 24%;
     float: left;
     margin-left: 10px;
     }

#footer {
     padding: 10px;
     clear: both;
     }

Thus: Main - Column - Column all flexible page !!!

[ click image to view page ]

Again this is merely to show how it's done.
Once the structure is created the fun part begins ... .
Remember: all examples in the last 3 posts are (apart from the layout CSS as added in CaBT 2 & 3) still not styled at all.
Everything is pure Browser Default!

Creating a Blogger Template (2)

2007-03-04T13:26:00.000+01:00

... the layout ...

This is the second part of the Creating A Blogger Template series:

Creating a Blogger Template (1) - from scratch
Creating a Blogger Template (2) - the layout
Creating a Blogger Template (3) - a fluid design
Creating a Blogger Template (4) - variables

Let's introduce some basic CSS to give this rough and unformatted page a respectable and decent look!

[ click image to view page ]

First set the body margin and padding to zero:

body {
     margin: 0px;
     padding: 0px;
     }

Use a width (here 960px, so this layout works in a 1024 resolution minimum) and center the content (using margin-left and margin-right = auto):

#container {
     width: 960px;
     margin: 10px auto;
     padding: 0 10px;
     }

Give the header some inner space:

#header {
padding: 10px;
}

The important part!
For positioning one can use floating divs here.
Give main and sidebars their widths and add the floats and some margins:

#main {
     width: 560px;
     float: left;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     margin-left: 10px;
     }

(Notice both sidebars are styled the same, so we can use a shorthand here!)

Some space inside the footer too, and a clear to make the footer the last one in the page flow:

#footer {
     padding: 10px;
     clear: both;
     }

This resulting in a clean Main - Column - Column page:

[ click image to view page ]

Changing the above into a Column - Main - Column layout is really simple.
Introducing one negative margin and one new margin:

#main {
     width: 560px;
     float: left;
     margin-left: 200px;
     }

#sidebar1 {
     margin-left: -760px;
     }

#sidebar2 {
     margin-left: 10px;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     }

These minor alterations (only two margin settings and necessarily changing the one sidebar shorthand) is all it takes to create the following Column - Main - Column skeleton:

[ click image to view page ]

Here in the rear I give you the Complete and Unabridged Template for this last layout.
This is the one I used, so now naturally sidebars and footer do have some Page Elements included:

<?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[/*
*/

/***************************/
/* Thur Broeders */
/* march 2007 */
/* From Scratch v0.1 */
/* */
/* http://www.thurboeders.nl/ */
/* postmaster (at) thurbroeders (dot) nl */
/***************************/

body {
     margin: 0px;
     padding: 0px;
     }

#container {
     width: 960px;
     margin: 10px auto;
     padding: 0 10px;
     }

#header {
     padding: 10px;
     }

#main {
     width: 560px;
     float: left;
     margin-left: 200px;
     }

#sidebar1 {
     margin-left: -760px;
     }

#sidebar2 {
     margin-left: 10px;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     }

#footer {
     padding: 10px;
     clear: both;
     }

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


<div id='container'>


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



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



<b:section class='sidebar' id='sidebar1'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>



<b:section class='sidebar' id='sidebar2'>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>



<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>


</div>


</body>
</html>

This all is not a True Guide nor a profound How-To!
It is merely about the indispensable basics!!
But it shows those basics are essentially all you need!!!

Creating a Blogger Template ...

2007-03-03T12:10:00.000+01:00

... From scratch ...

This is the first part of the Creating A Blogger Template series:

Creating a Blogger Template (1) - from scratch
Creating a Blogger Template (2) - the layout
Creating a Blogger Template (3) - a fluid design
Creating a Blogger Template (4) - variables

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

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

Notice

<style type="text/css">

</style>

is replaced by

<b:skin><![CDATA[/*
*/

]]></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!

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!

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

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!

translatio imitatio aemulatio

2007-03-02T21:24:00.000+01:00

I added the following to this (MY OWN) template:

PLEASE DO NOT USE THIS TEMPLATE OR CSS
YOU ARE MOST WELCOME TO DOWNLOAD AND PUBLISH THE DOWNRIGHT V1.4
DO WITH IT WHATEVER YOU WANT
BUT TRY TO BE ORIGINAL
STEALING MY CSS IS NOT!!!

I have noticed the DownRight v1.4 is finding it's way through the blogosphere. Which is a very good thing.

But (only a matter of time) people are starting to use this (the WorkShop's) styling ... my private alterations (the blue and orange h2 boxed titles, the minimal borders, the min- & max-width).

I thought my Terms of Use and Terms of Abuse were pretty clear (and obvious!!!).

( Obviously they never are ... ! )

Thank you for being civilized.

Sample Techniques

2007-02-28T21:53:00.000+01:00

Here we go: all layouts fluid (or partly, in case of n16):

The html structure is the same in all 4 pages - hence: any order columns!!!

There are only some differences (margin and width) in each layout's identifiers content, column1, column2 and footer.

Works like a charm in MIE6/MIE7 and Firefox - almost perfect (good enough) in Opera. I haven't loaded them in Safari!

And before I forget: here is a link to Alessandro Fulciniti's great page: Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!.

Err .. I guess you do not need me anymore :-)

Wonderful Techniques

2007-02-25T10:47:00.000+01:00

Right, so we (I) just talked about fixed vs. fluid. Regardless of my personal taste many blogmasters are on the lookout for flexible layouts.
+
Recently discovered a great page where this guy presents 40 CSS layouts based on negative margins, any order columns and opposite floats.

Last weekend I ported one layout to Blogger:

Can be pottered easily in(to) ... 1-column, 2-column, 3-column, columns horizontally or vertically arranged, all columns fluid, all columns flexible, et cetera (and every other possible combination) ... whatever!

Fixed vs. Fluid (reprise)

2007-02-24T13:12:00.000+01:00

On the last thread Prasad Ranatunga commented: "There few problems I see in this test. The Width of the blog is limited, unlike the ones U made in earlier version, which is width of the browser."

True, though I do not see this as a problem!

I am not going to explain (or comment on) the pro's and con's of fluid and fixed layouts here. (You may want to follow the links provided in the rear.)

(Me, Myself and) I prefer a fixed layout. Has among others something to do with readability and pleasing the eye.
That's why I made those Minima Clones fixed. And because the original Minima has all columns fixed!

Here in the WorkShop I am using my own DownRight v1.4 theme, which has - there you go - a fluid main column. The only small addition I implemented here is styling the content_wrap identifier with min-width: 760px and max-width: 960px. (That last attribute will probably not work in some older browsers. Alas!)

Recommended reading:

456 berea st: The Great Fixed vs Fluid Debate
htmldog: Fixed vs. Fluid
StopDesign: On Fixed vs. Liquid Design
ST: max-width in Internet Explorer - a nice one on 'readability and line lengths'

Minima 3-column (new) Blogger Clone

2007-02-21T00:43:00.000+01:00

[ click images to view a live example ]

Clone: new Minima 3-column - width: 760px.
Status: published.

[ black ] [ blue ] [ ochre ] [ white ]

Clone: new Minima 3-column - width: 960px.
Status: published.

[ black ] [ blue ] [ ochre ] [ white ]

Clone: new Minima (Blue) main-side-side w960.
Status: published.

[ black ] [ blue ] [ ochre ] [ white ]

LikeWise v1.1

2007-02-18T09:56:00.000+01:00

A new (stable) release of LikeWise (v1.1) is available in the left sidebar.

A second row of three columns is added to the footer:

Here's an example!

The Blogger Add and Arrange Page Elements Dashboard:

Note:

In the example images the second row is filled with Page Elements. In the template these second row columns are initially left empty.

Of course Page Elements can be added to each column in the first row too. Using the second row only creates a neatly horizontally aligned new row with Page Elements.

One can simply add more (and more) rows by copying and pasting the first row code - add a row between two existing rows!


<div id='container2'>

<div id='column'>
<b:section class='column7' id='column7' preferred='yes'>
</b:section>
</div>

<div id='column'>
<b:section class='column8' id='column8' preferred='yes'>
</b:section>
</div>

<div id='column'>
<b:section class='column9' id='column9' preferred='yes'>
</b:section>
</div>

</div>


Be sure to name each column unique (otherwise the Dashboard will tell you so ...) and add each new column-name as a selector to the following specification (in the template style section)

#column1, #column2, #column3, #column4, #column5, #column6, #column7, #column8, #column9, #main {
padding: 10px;
}

to allow every single column its needed 'air'!

LikeWise

2007-02-15T20:38:00.000+01:00

Meet LikeWise ...
Status: published v1.0.

The idea was to create an unlike Blogger Templates Blogger Theme!
Like they were getting more and more popular last year: layout with several columns in the footer - no sidebar.
And introducing the Blogger colors #004276, #2b9cce and #f67c2a.

The Blogger Add and Arrange Page Elements Dashboard:

The following Variables are present:

Page Background Color
Footer Background Color
Text Color
Footer Text Color
Link Color
Hover Color
Column Link Color
Column Visited Color
Column Hover Color
Header Border Color
Body Font
Comment Footer Font
Post Footer Font

This one is mainly intended for those rare webloggers who just want to write and publish their posts ... not intending to show/use all them stupid stupid stupid Ads, Shout-boxes, Hit-counters, Paris Hilton Pictures, et cetera ... (err ... did I mention Ads ???)

Download available on the left sidebar.

Save The Widgets !!!

2007-02-03T21:00:00.000+01:00

Yes, it's a gas! When (1) you are already using ~~BETA~~ Blogger and (2) you have (maybe a painstaking process) installed some Page Elements (Widgets) then (3) installing a new Template probably will scare the crap out of you:

Widgets are about to be deleted CONFIRM & SAVE CANCEL

Ohhhhh bloody bloody no no NOOOOO (you shout) ...

and totally panicked you press the CANCEL button!

There is an easy way to save your current widgets.

The first thing to comprehend is the way the template can be presented: with Expanded or Collapsed Widget code!

Above the Edit Template Window you will find a Checkbox Expand Widget Templates.

Unchecked (thus widget code collapsed) a widget looks like:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Checked (thus widget code expanded) that same widget looks like (may look like - depends on the inserted code, of course):

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'> <data:label.name/> </a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

It is important to remember that, expanded or collapsed, the Widget Configuration Data is stored for you on the Blogger Server. Always!

The process ...

Saving your current template

Dashboard > Template > Edit HTML > Expand Widget Templates UNCHECKED

Do not use Download Full Template!

Copy the code from the Edit Template Window:
Select All (Ctrl+A) + Copy (Ctrl+C)

Create an empty textfile on your disk (do not use Word or whatever, use Notepad - make sure you create a mytemplate.TXT file!!!) and save the template code here:
Paste (Ctrl+V)

Preparing the new template

Download the new template to your disk (again: save as a textfile!!!)

Open the file and look for the place to add your widgets.
(Whether the new template offers its code expanded or not is of no importance.)

An example (this is the DownRight default left Sidebar code):


<div id='leftbar_wrap'>
<div class='side'>
<b:section class='sidebar' id='leftbar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='Link List' type='LinkList'/>
<b:widget id='Text1' locked='false' title='Text' type='Text'/>
</b:section>
</div>
</div>


Notice there are two default widgets here: a LinkList and a Text Page Element!

When the template is offered with expanded code the Widgets are a bit more difficult to identify.
One expanded widget is everything between (and including)

<b:widget id='...' locked='false' title='.' type='.'/>

and

</b:widget>!

Let's replace them by your own saved Widgets:


<div id='leftbar_wrap'>
<div class='side'>
<b:section class='sidebar' id='leftbar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>
</div>


Right, the default ones are replaced by your own Profile, Label, Blog Archive and BloggerButton Page Elements.

Installing the new template

Dashboard > Template > Edit HTML > Upload a template from a file on your hard drive:

Browse ...

Upload

SAVE TEMPLATE

Done. That is: if you added all your existing Widgets you will not be bothered by this miserable Please confirm that the following widgets should be deleted. All the widgets' configuration data will be lost.!

And if so:

press CANCEL

... have a drink ... play with the dog ... love your partner ... have a cigar ... love the one you're with ...

and START AGAIN

Epilogue:

Save your Widgets with collapsed code!
Easy to handle, easy to recognize!

IMPORTANT: every collapsed widget is no more then
<b:widget id='...' locked='false' title='...' type='...'/>
All widget code with this particular id='...' is stored for you on the Blogger Server!!!

Uploading a template where the code is partly collapsed and parly expanded can/will be handled correctly by your Dashboard.

So even when that new template has its main code expanded you can insert your one-liners (collapsed Widgets) and Upload/Save the (mixed) template! No problem.

Those Blogger boys and girls did a great job !!!

IconArt

2007-02-03T11:02:00.000+01:00

Having the lightest toolbox possible is a good thing, I think.
I only use Dreamweaver, Corel Paint Shop Pro Photo XI, XAMPP for maintaining WordPress locally, NotePad (of course) and ... this smart little bugger: IconArt.

I especially like this feature: Extract icons from .exe and .dll files.

Just a tip.

Mea Culpa,

2007-01-28T22:51:00.000+01:00

mea culpa, mea maxima culpa.

More eager then inspired I published today successively a DownRight Theme version 1, version 1.0 and version 1.1.
I know I have at least frustrated one person extremely ... I am so sorry Unscathed.
What I did: publishing this Theme with the Widgets NOT expanded .. permitting the Blogger Engine to use defaults (thus losing my code changes)! I'm an OAF!

Said again:

Confiteor Deo omnipotenti,
beatæ Mariæ semper Virgini,
beato Michæli Archangelo,
beato Ioanni Baptistæ,
sanctis Apostolis Petro et Paulo,
omnibus Sanctis, et vobis, fratres (et tibi pater),
quia peccavi
nimis cogitatione, verbo et opere:
mea culpa,
mea culpa,
mea maxima culpa.
Ideo precor beatam Mariam
semper Virginem,
beatum Michælem Archangelum,
beatum Ioannem Baptistam,
sanctos Apostolos Petrum et Paulum,
omnes Sanctos, et vos, fratres (et te, pater),
orare pro me ad Dominum Deum nostrum.
Amen.

I have corrected my errors ... confessed my sins :-(
What more can I say: the Proof of the Pudding is in these WorkShop Pages!

You Ask, I Deliver

2007-01-21T15:04:00.000+01:00

On the Blogger Forum one inquired about a WordPress Theme (not yet) ported to Blogger: the Journalist (1.01) Theme by Lucian Marin. Although this theme has a GPL license I still want to ask the designer's permission ... and/but meanwhile tinkered that template.
Here's a demo!

UPDATE: Published (download available in the left sidebar).

The following Variables are present:

Page Background Color
Page Text Color
Link Color
Hover Color
Blog Header Link Color
Blog Title Color
Blog Description Color
Post Title Color
Border Color
Sidebar Link Border Color
Sidebar Link Hover Border Color
Date Header Color
Date Header Bg Color
Sidebar H2 Color
Sidebar Text Color
Post Footer Color
Page Text Font
Blog Title Font
Blog Description Font
Post Title Font
Date Header Font
Sidebar H2 Font
Sidebar Font
Post Footer Font

[ that 'You Ask, I Deliver' is a joke, of course! ]

DownRight Ready

2007-01-17T23:16:00.000+01:00

This is a clean 3-column ~~Beta~~ New Blogger Theme (template). It is the old tb_b_20051225_black template transformed into this DownRight Blogger Theme (main box fluid, sidebar boxes width: 200px).

In the end it's all a matter of taste of course, but ... some found the tb_b designs utterly tedious ... others loved the templates for their convenience to be changed and tweaked & there are no images added! Whatever you want.

It is ready to use, but I take the liberty to label this one DownRight ~~v0.1~~ v1.2.
As you can see the WorkShop is using this very Theme already.
It seems to be working properly (tested in MIE7, MIE6, Firefox, Opera) ... fingers crossed!

UPDATE (Saturday, January 27, 2007):
Published! (Download v1.2 available in the left sidebar.)
But as I said: this IS a BETA! Theme behaves good, except for that fix for long (non-)text content breaking IE sidebar float ... I cannot make this work properly in a fluid layout.
So the fix is disabled (untill I have fixed it, of course).

The following Variables are present:

Page Background Color
Text Color
Link Color
Hover Color
Blog Title Color
Blog Description Color
Post Color
Post Title Color
Post Date Header Color
Side Title Color
Side Font Color
Border Color
Body Font
Blog Title Font
Blog Description Font
Post Font
Post Title Font
Post Date Header Font
Sidebar Font
Sidebar Title Font
Post Footer Font

And they DO work ... in the v1.2.

In the css section there are special entries for some Page Elements and more, like this:

/*****************/
/* Archive List Styles */
/*****************/

#ArchiveList ul li {
font-weight: normal;
margin: 5px;
text-align: left;
}

Blogger Profile Styles
Archive List Styles
Blog Feeds Styles
Blog Pager Styles
Et cetera

The DownRight DashBoard:

Most Recent Updates ...

2006-12-31T23:48:00.000+01:00

never mind