Blogger templates from scratch - a conceptual guide.

This may come in handy:

What You should know about Blogger templates' philosophy.

Note:
In order for this article to be useful, You should already know at least HTML/CSS. If You know more languages (like jQuery, PHP...) - all the better :) . Although this isn't an actual instruction how to do various things code-wise - this is rather a conceptual guide.

««•»»

If You are going to learn how to design Blogger templates from scratch, here are some information which may help You in the understanding of Blogger's specifics.

o. First of all...

First of all I assume You are already a Blogger user and probably know basic philosophy of gadgets. For the record, in the admin panel You can find "Layout" section where You can manage gadgets existing on Your website. For example, there is a gadget displaying menu (called "Pages"), most read posts ("Popular Posts"), or the archive of Your site ("Blog Archive"). There are many potentially useful gadgets, like "Labels" (which displays labels (tags) assigned to Your posts), "Link List" or even "Contact Form".­ The possibility of visual (WYSIWYG-like) arranging their position on Your site is very helpful and I consider it one of the most important Blogger features (in terms of being user-friendly).

The great news is that if You are designing a template from scratch - You will also be able to benefit from that feature. In fact, while designing You might often ask Yourself how to approach some specific part of code You're working on, regarding its reflection in the layout section I've mentioned.

For example, if You'd like to construct the main menu, You have following choice:

• You can write code in a fashion that will also reflects itself in the layout section (using appropriate and specific gadget-related code),
  
  or
  
• You can write code in a fashion that won't (using normal, plain HTML which You probably well know);

The difference is that whenever You use "native" Blogger form ^{(maybe I will describe in another article how to obtain those forms)}, You can derive profits associated with Blogger's automatics. With the help of that automatics You can change gadgets' position by simple "Drag'n Drop", but what's even more important: You can modify them without a need to further editing their code. As You know, each Blogger gadget has its own "creator", "a wizard" leading You step-by-step through its configuration/personalization/customization. For example, You can decide whether a label list should be displayed as a list or a cloud of tags - simply by clicking/checking/selecting something in the gadget's editing window. But if You've decided to write a tag section completely from scratch and completely on the basis of Your Own design (code-wise, construction-wise) - You will be able to do it in a much more ways - but without Blogger's automatics. For example, in order to change the way labels are rendered on Your site - You will be in the need of rebuilding its code in the template (let alone You will have to put all the labels into Your code manually). Although in case of labels it wouldn't be so good idea - there are gadgets in case of which it wouldn't be a big deal if You would wrote them completely from scratch. In fact, sometimes You may come to conclusion that leaving automatics aside can give You more flexibility and room for creativity. It's up to Your individual estimation of particular cases. Sometimes it seems to be better to construct something from scratch, sometimes not. It may help if You think long-term, considering advantage stem out of automatics: much less effort involved. When I was beginning learning Blogger templates from scratch I felt sometimes too lazy to study another Blogger gadget's native code - so I wrote it completely on My Own. But in the long run it was definitely too tempting to use the automatics - with the help of which what I need is only to design My template once - each subsequent time being able to modify it using Blogger's "wizards" (creators).

Another case You might consider is the situation in which You design a website for somebody else. Then - if that person doesn't know HTML/CSS/and so on, it would be great idea to provide "a codeless solution" (or maybe it would be great idea anyway - because either way it saves much time and effort).

1. One template for all page types.

When You know basic possible approaches to gadgets, let's look on the template itself. It may be surprising (especially when You already have experience with some other CMS's) that there is only one template in Blogger - which render all types of pages (Home Page, Archive Page, Label Page, etc.). Moreover, it doesn't have a clear division which sections of code serve as particular page types. The distinction is rather "local" and gadget-related: You can find it inbuilt within several gadgets' code. The reason is that some gadgets can behave differently - depending on what page type is currently displayed. For example, "the Pages" gadget can distinguish which item is currently displayed - and mark it out. The same with "the Labels" gadget.

Apart from gadget-related, inbuilt conditioning You are also able to make the distinction on Your Own - I mean: wherever You would like to use it. For instance, if You'd like to have different content displayed on the Home Page than others. One application of it would be the welcome page concept, another: differently looking posts listing. If You'd like to achieve that, You can incorporate manual distinction within Your template (there is a special syntax for that).

So now I hope I explained well the flexibility of Blogger template, regarding to various page types.

2. The syntax.

As any CMS, Blogger also has its own characteristic syntax. It consist of "tags" ^{(don't confuse with "tag" as a synonym of "a label")} - elements resembling symbolic blocks of code which later are translated into some particular data while rendering Your site on the server side. For example:

<data:post.title/>

- this tag represents post's title - You put it in the proper place of the template's code where You want the post's title to be displayed (and it will be translated into the title while viewing Your website).

Information which Blogger uses to translate symbolic tags into appropriate data - is obtained from database attached to Your blog (You fill this database adding new posts or other data via gadgets' wizards). So in order to see the effect of some particular tag's presence - You need to have corresponding data present in the database. For example, if I've just added the "Image" gadget - I'll be able to see its effect after I upload some image file via the gadget's configuration tool. Configuration is usually available in the "layout" section in a form of "Edit" link alongside each gadget - or "on the surface" of Your page in a form of a small icon - if You are logged into Your Google/Blogger account (this way it is very comfortable - when You don't even have to enter the admin panel in order to modify gadgets).

Based on tags - the Blogger's syntax is pretty much like in other CMS's. Over the time (of learning) You can find more similarities, like - for example - "if/else/or" conditions present in many programming languages and syntaxes. No big surprise that Blogger also has its own version of it - which may come in handy when, for example, You want to distinguish site's content depending of currently displayed page type (like the concept of a Welcome Page which I've mentioned earlier).

Fortunately You can find official documentation on Blogger syntax, but probably You will be in the need of experimenting a little bit by trial and error as well :) (because the documentation is not everything and it only scratches the surface - many things You can learn rather from back engineering than the official docs).

Here are some valuable resources:

Official documentation (Blogger Help):

• Page elements tags for layouts,
• Widget Tags for Layouts,
• Layouts Data Tags,
• Expressions in layouts tags,
• Customize CSS tags for layouts;

See also:

• Blogger Page Types,
• "Creating your own Blogger template from scratch, sort of" - this article helped Me most in the beginning of actual coding;

3. The specifics of the template's code as a whole.

Blogger template's editing mechanism ^{("Admin Panel/Template/Edit HTML")} seems to work as an overlay of this CMS engine - or with strict cooperation with it. You can notice this by observing what happens when You save Your template code, refresh and view it again. You will notice that the code is "somewhat" larger than Your original one. The reason is - I suppose - that Blogger has its own "blueprint" of its automatics and it compares that blueprint with Your version. If it encounters some crucial discrepancies, it will "fill the gaps", so to speak. Those "crucial discrepancies" probably refer to something which could break the automatics of Your site, or even prevent its proper functioning.

From My observation I also concluded that the more code You write by Yourself - the lesser is Blogger's interference.

4. The most powerful gadget of all :)

Let's back to gadgets for a while: I'd like to tell You about probably the most powerful piece of Blogger templates: "HTML/JavaScript" gadget.

When You wonder how many possibilities Blogger can give You - first of all You may think about gadgets. But they have one weakness: each of them is precisely constructed to serve some particular purposes. In the admin panel You may find a lot of gadgets - but what about "Sky's the limit" :) ? What if You would like to have more freedom to create, more room for creativity, especially based on Your current experience?

You can find that freedom using "HTML/JavaScript" gadget - which allows You to incorporate any HTML/JavaScript code into Your template (in fact You can also use jQuery and who knows what else ;) ). This way You can achieve way much more than before! - and it's like an open window for Your imagination and creative potential :) .

This is important because - although You can also use HTML/JavaScript directly in the template - using a gadget provides You convenience of automatics (i.a. easier and faster updates).

5. CSS in Blogger templates.

As a last piece of introduction I'd like to tell You about CSS (which I like to expand as a "Creating Seductive Style" ;) ). Let's begin with the fact that CSS is ­also inbuilt into the template itself - a solution isn't so handy (I personally prefer to have CSS and HTML apart - it is not only more comfortable, but also provides faster updating).

Blogger provides You one extra advantage in the CSS context: "variables". It's something You can use - but don't have to. Variables are much like tags in the Blogger's syntax: they are also symbolic representations of some particular data (values You set in CSS).

You can use variables when:

1. You want to have more convenient modifying CSS. If, for example, You often use one particular color in several places in the CSS - You can replace its definition by the name of the variable representing it in the beginning of Your CSS. This way - when the need arises - You will be able to quickly change the color's definition everywhere in Your CSS, modifying only the variable (without a need to edit every instance of the color).
2. You want to make Your project more accessible to modifying, especially without the need of editing code. In the admin panel ("Layout" section) there is a thing called "Template Designer". In its "Advanced" bookmark You can find several things You can modify without a need of editing code of the template. If You use variables in the CSS - they will be also included there. So now You can predict when it may come in handy: maybe using Template Designer is more convenient for You, or maybe You design websites for other people and want to allow them to modify some of the website features on their own (which could be a nice surprise for them - especially when You deliver a friendly "how-to" :) ).

««•»»

So I wish You fun and patience with Your first steps studying Blogger templates - and keep My fingers crossed :) !