Where Is The Template Designer Wizard?

The new Designer Templates were released over a month ago, and still not everybody knows how to access them. Almost daily, we see the plaintive query

Where in my Blogger settings can I access the new Blogger template designer?

and to be sure, it seemed, at one time, a bit tricky.

---

(Update 2010/06/10): The Template Designer is now a production Blogger feature.

---

The Template Designer is now part of Production (Orange) Blogger, and is accessible from the dashboard "Template" page - or the navbar "Design" link.



If you click on "Design" from the navbar, you get the "Template" page, where you find the "Customize" button.

There it is - "Template Designer".



Just login to Blogger, click on "Template", and hit the "Customize" button.

You can't miss it.

The New Blogger Template Designer Is Here

After months of waiting, Blogger today released their new template library.

Instead of a static library, though, they chose to provide an array of combinable choices.

• Multiple, exciting styles.
• A huge library of theme organised backgrounds, each with an associated colour palette.
• A selection of layouts, with symmetrical combinations of
  • 2, 3, and 4 columns
  • with and without split sidebars
  • in both left and right variations
• Adjustable column widths.
• An updated Fonts and Colors GUI interface, with selections for new template objects like Pages Index gadgets.

From the dashboard or navbar, select "Design". From "Page Elements", then select "Template Designer" - and check out the possibilities.

What we have, now, is an almost infinite variety of possibilities, which should keep many bloggers happily occupied for days. If the Template Designer for your blog lacks options, you can even add some wizards to the Designer menu.

As with every new feature Blogger presents to us, always remain aware of security restrictions on your computer and network, and consider how the Designer content is hosted. If you can't get the Designer to work on your browser, try another browser or another computer.

Those deficiencies aside, I now have a new look for my Buzz blog, and another for my Recipes blog.

Making An Easier 3 Column Template

Making a 3 column template is not as difficult as many bloggers would lead you to believe. I don't recommend this as a cookbook exercise, though - you have to understand what you're doing. It's simply not too hard to understand, when you look at it closer.

You simply look at how the columns are setup.

• Column A, floating left.
• Column B, floating right.

And split either column (and it's your choice).

• Column A, floating left.
• Column A1, floating left.
• Column A2, floating right.
• Column B, floating right.

or

• Column A, floating left.
• Column B, floating right.
• Column B1, floating left.
• Column B2, floating right.

Generally, the choice would be to have the posts ("Main") in the middle of the blog, with one sidebar one the left, and the second on the right. This would leave you splitting the Main column into Sidebar2 and Main2. The asymmetry of this always bothered me.

• Sidebar1, floating left.
• Main1, floating right.
• Main2, floating left.
• Sidebar2, floating right.

Aside from the asymmetry, with one sidebar defined as a peer to the main column, and the second defined as a portion of the main column, making the widths of Sidebar1 and Sidebar2 identical was an exercise in futility.

But, think outside the box. What if we put both sidebar columns on the same side? Then, we simply split the sidebar column into 2 halves, and leave the main column alone.

• Main, floating left.
• Sidebar, floating right.
• Sidebar1, floating left.
• Sidebar2, floating right.

This arrangement is simpler than you would think.

Here, as just previously, we'll use a Sand Dollar template, which is a stretch type.

Starting with the Header code.

div#main {
float:$endSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}      
div#sidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide; 
float: $startSide;
width: 31%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
} 

and below, the Body code ...

<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='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

And change that to the Header code ...

div#main {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide; 
float: $startSide;
width: 55%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
} 
div#sidebar {
float:$endSide;
width:40%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}   
div#sidebar1 {
float:$endSide;
width:45%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}   
div#sidebar2 {
float:$startSide;
width:45%;
padding-top:30px;
padding-$startSide:0;
padding-bottom:10px;
padding-$endSide:1em;
border-$endSide:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
} 

Making the additional header rule sets ("Sidebar1" and "Sidebar2") wasn't difficult. Sidebar1 and Sidebar2 are simply mirrors of each other, and each has width of 45% (inside its parent Sidebar), allowing for a 10% margin between the 2. Note that 10% of 40% = 4% of the total width - and the float between Main and Sidebar = 5% of the total width - so that's pretty symmetrical too.

Since both Sidebar (inside its parent Content) and Sidebar1 (inside its parent Sidebar) both float to the left, they use the same basic rules. I just copied the ruleset for Sidebar, and renamed it as Sidebar1. I made a second copy of Sidebar, inverted its left and right ("start" and "end") variables, and named that Sidebar2.

and again below the Body code ...

<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'>
<div id='sidebar'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
<b:section class='sidebar' id='sidebar2' preferred='no'>
</b:section>
</div>
</div>

Here, too, a fairly simple task.

I changed

<b:section class='sidebar' id='sidebar' preferred='yes'>

to

<b:section class='sidebar' id='sidebar1' preferred='yes'>

and added

<b:section class='sidebar' id='sidebar2' preferred='no'>

And, added

<div id='sidebar'>
...
</div>

surrounding sidebar1 and sidebar2.

<div id='sidebar-wrapper'>
<div id='sidebar'>
<b:section class='sidebar1' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
<b:section class='sidebar2' id='sidebar' preferred='no'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
</div>

And, I'm done.