Blogger Theme / Template Tutorial

I'm exploring Blogger theme structure to customize it. I want to write learning notes along the way. So, this post is work-in-progress, so don't consider it complete.

To understand this tutorial, you shall know Blogger basic usage e.g. adding new posts in Blogger blog, creating new pages, assigning labels, etc. and you shall have basic knowledge of HTML, CSS and programming e.g. variables, if/else, loops etc. My objective is to explain basic concepts and building blocks of blogger theme, I do not intend to build a professional looking theme.

There are following points, you must understand to work on Blogger templates:
  1. Basic Concepts
  2. Style Variables
  3. Data Tags
  4. Widget Tags
  5. Structure of Theme

Basic Blogger Template Concepts

Its important to understand different types of web pages that blogger offer. Understanding page type is important as in custom theme you need to embed different contents based on the type of page e.g. images slider at home page only, specific background image at top of only blog posts pages, or specific menu on all static pages. Without understanding page types, you can't embed contents based on the type of page user has accessed. 

When user open any blog page, Blogger backend system inject a pageType variable e.g. data:blog.pageType in template. You can check value of pageType variable to see which type of page is accessed. Hence you can customize the look and feel of blog based on the type of page.

index

Its home page of your blog. In Blogger, homepage is called 'index' type page.

item

In blogs, we put different posts. These posts may contains text, audio or video contents. So a post is an item in blog. So all blog posts pages are called 'item' page. If we want to embed some contents that we want to show only on blog posts and not on the home page of static pages, then we add that content specifying it shall be displayed in 'item' type page only. (I would shortly explain later how we can add such contents).

static_page

If you open the Blogger dashboard, in addition to Posts link on left navigation bar, there is explicit link for Pages. All the pages you create in Pages section are called 'static_page' type pages. So to add some content on static page or its header, we can check the type of currenlty loading page and can embed required contents accordingly.

Style Variables

Style variables are placeholders used in theme, we can modify the values of these variables in Blogger Theme Designer. If we define styles using proper blogger style variables, it would help novice users to update theme easily by chosing color, fonts etc. values using drop down options in Blogger Theme Designer. The user specified values would be plugged into related theme sections. I would explain this part in detail later.

Data Tags

If you analyze the blogger template HTML on Blogger dashboard, you would see many html-like tags but actually they are not HTML tags. Those are XML tags, each has its specific purpose defined by Blogger system. Each tag represent some specific data defined in Blogger e.g. Posts, Labels, Blog URL, Post URL, Page Type etc. When Blogger server received user request, it embed different type of data into specific XML tags. These are called data tags. These data tags work like variables, when we write the data tag in any place in HTML templates, the data stored in that variable/tag, is rendered at that place (there are some rules we must follow to use those data tags, otherwise they would not work properly). There are many types of data tags, some are available in whole temlate while others can be used in specific context. For example below tags are general tags and can be used anywhere in page. I have written the which data it contain, along with tag.

Blog Title: <data:blog.title/> <br/>
   Current Page Type : <data:blog.pageType/> <br/>
   Current Page URL: <data:blog.url/>    <br/>
   Blog Homepage URL: <data:blog.homepageUrl/> <br/>
   Current Page Title: <data:blog.pageTitle/> <br/>

Copy/paste above code into your Blogger HTML templates after the <body> tag to see what each variable contains. This is to give you basic idea of data tags. There are many data tags, we would explore gradually. At the moment, you just need to understand the idea of data tag. Other tag would carry different other type of data e.g. posts, labels, comments, author, archive, etc.


Comments