How to Create Blogger Template from Scratch - Part One

design-blogger-templates-from-scratch-part-one

This is a series of tutorials I will be publishing on Tricks Star. I was always interested to design Blogger templates on my own. When ever I want to get started, I move on to the template section and try to edit the HTML content. Some how, I would find ways to change my existing template styles and other stuff. But doing so never gave me a clear idea about what the template is and how the template works to generate HTML pages.

I want to take it seriously this time and want to sort blogger template design completely. After a lot of googling, I found a few resources that helped me but they were incomplete. So, I'm going to write complete tutorial on How to design Blogger templates at one place. I'm going to learn and publish the tutorials in parallel. So, if I'm wrong anywhere, Please correct me by dropping a comment.

Before getting started with the template development, we need basic knowledge on HTML, CSS and little Javascript. You can google for them and get unlimited resources to learn HTML and CSS. I recommend w3schools.com.

What's there in this tutorial?

How Blogger works?

I did not find any official documentation on how blogger works, but this is a basic idea behind how the blogger template is used to render the content requested from the blogger database.

Blogger doesn't store HTML of every post or page that we create. Instead, it just stores the data that we've created in blogger database. And whenever a request is sent for a particular URL, the data is retrieved from the database and the HTML page is parsed from the XHTML template that we have installed on our blog. These pages might also be cached sometime to improve the speed.

how-blogger-works
how blogger actually works?
Now that we know how blogger works, Lets move on to learn the basic structure of a blogger template.

Basic Structure of Blogger Template

The basic structure of a blogger template is as shown below.

<?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>
<title><data:blog.pageTitle/></title>
</head>
<body>
 <!-- BODY CONTENTS -->
</body>
</html>

The above XHTML is the basic markup tags that a minimalist blogger template consists of. Though this template is not enough to be parsed, there are some basic things that you need to know before moving on to the actual coding part.

Note: This code looks like a HTML page, but it's a XHTML code. XHTML is a strict language unlike HTML, but XHTML is mostly similar to HTML. For example, in HTML you may omit the closing tags, but XHTML throws an error when you miss a tag. We will see more difference when we dig deeper into the template.
  • The first line of the template indicates the version of the xml. The encoding tag specifies the encoding used so that browsers can interpret your page correctly.
  • The next line is the DOCTYPE tag used to indicate the type of document. Usually the web documents are created using various standards. DOCTYPE
tag is used to specify the Document Type Declarations of the HTML version that we use in the template.
We will be using tags like <data:blog.pageName> and many other tags to access content and calculate the expressions. Understanding this is very simple. If you have a knowledge of programming languages, we use variables as containers for values.
Here b, data are similar things. 'b' stands for blog and 'data' may be represented as 'd'. I recommend you not to change the convention as we are new to template design.

If you wish, you can change your name space reference names to 'blog' and 'b' as shown below.

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:blog='http://www.google.com/2005/gml/b' xmlns:d='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Note: if you change the namespace references, you may also change the tags you use.
Like <b:section ... > to <blog:section ...>

  • Next comes the head tag which usually contains the title of our page, styles we use in our template and meta information for Search Engines for SEO optimization. The content of the head tag section is not visible to the user.
  • The body tag is used to place all the visible content to the user. What ever we want to show the users must be placed inside the body tags.
Next Tutorial will explain about the types of pages in blogger and how to identify them using the blog.pageType and other tags.

Designing Blogger Temlates from Scratch Part 2: 8 types of pages in Blogger Exlained

If you have any doubts about this post, or if you have felt that anything is not clear enough, drop a comment below and I'll help you.
If there are any errors, please correct me. Thank you.

1 comment:

Please DO NOT SPAM. You're not allowed to use links in comments unless it's necessary.

I Appreciate your valuable Feedback.

Regards,

www.TricksStar.com