The Blogger WorkShop: tutorials

Showing posts with label tutorials. Show all posts

Tuesday, March 06, 2007

Creating a Blogger Template (4)

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

Monday, March 05, 2007

Creating a Blogger Template (3)

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

See the working Main-Column-Column fluid

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

Sunday, March 04, 2007

Creating a Blogger Template (2)

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

Saturday, March 03, 2007

Creating a Blogger Template ...

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

Saturday, February 03, 2007

Save The Widgets !!!

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

Saturday, April 08, 2006

Maintaining the template offline

For some of you this really will be obvious ... for some it will not ...

BLOGGER:

For template maintenance Blogger provides a Template Editor:

Blogger Dashboard > Template > Edit current

You can use this window to change the template and hit the Preview button to view the results.
Apart from the fact that the result isn't 100% reliable, this is a good feature.

A faster and easier way is to bring this process to your kitchen table: OFFLINE!

The Workspace:

copy the template code and save it in a file, like
My Documents/My eBooks/blog.html

Open blog.html in your browser
File > Open file > blog.html (= Ctrl+O)

Open blog.html in Notepad
Right Mouse click > Open with > Notepad

Arrange both windows side-by-side on your desktop!

The Edit process:

Edit your blog.html in Notepad and save with Ctrl+S

reload the page in the browser - use the Reload current page icon or Ctrl+R

and again ... and again ... and again ... (you can instantly view every small change in a split-second!)

Copy and Paste the final code in the Blogger Template Editor and Republish the blog

Advantages:

Using shorthand keys makes the preview process really fast;

You are working offline, so there's no worry about accidently shattering the real thing :-)
And, as stated above, this is fast, safe and easy "trial-and-error"!

You are not depending on Blogger here ... less waiting, I mean.

When you only want to change your styling you can work with the code of a generated page (like in the example image above).
Looking at a real flesh&blood page may help you to get the wanted result faster!

open your blog

Right Mouse click > View page source > Copy and Paste source code to blog.html

Make your changes in the STYLE section of blog.html and view the results

When done, copy the STYLE section
(that is <style type="text/css"> ... </style>)
to your template

Republish the blog ...

OTHER BLOG MANAGEMENT SYSTEMS:

When using WordPress, Serendipity, etc. or a real CMS (like Exponent, Joomla, whatnot) working offline is even more essential.
A very easy-to-use and reliable way to get yourself a working APACHE + PHP + MySQL environment is installing XAMPP on your very own local machine!
I suppose people who are able to work in an environment like this know what they are doing ... so here's just a few notes:

WordPress provides a tutorial for Installing XAMPP and WordPress!

The XAMPP Lite version will do!

Easy as Breathing

XAMPP Lite is a very reduced version of XAMPP with Apache 2.2.0 + PHP 5.1.1 (without PEAR) + MySQL 4.1.18 + PHPMyAdmin 2.7.0-pl1 + Openssl 0.9.8 + SQLite 2.8.15 + eAccelerator 0.9.4. For lovers! For the lite versions exist no upgrades or addons. XAMPP Lite is an only "Take-Run-Delete-Forget-it" package.

The Blogger WorkShop

Templates

Blogger Themes

WordPress Clones

Blogger Clones

Old Blogger Templates

Old Blogger Clones

Labels

Archives

Terms of Use

Terms of Abuse

Personal Journal

Read there ...

Feed (and all ...)

Tuesday, March 06, 2007

Creating a Blogger Template (4)

Monday, March 05, 2007

Creating a Blogger Template (3)

Sunday, March 04, 2007

Creating a Blogger Template (2)

Saturday, March 03, 2007

Creating a Blogger Template ...

Saturday, February 03, 2007

Save The Widgets !!!

Saturday, April 08, 2006

Maintaining the template offline