Blogger Template Design From Scratch

Designing a blogger template from scratch is not as difficult as you might imagine. I had to search around a lot of websites and did a lot of googling to find out how to build a complete blogger template. Turns out it is pretty easy to build it yourself, but you need to know some stuffs before hand. The thing is, you need to understand how it works and should have an idea of how your blog should be.

Is this for you?

The above question depends mainly on your web development skills. You should have some basic web designing skills. You need not be a master in web design, but some basic knowledge of CSS, HTML, JavaScript & awareness of XML will do. You can learn the basics of these technologies at w3schools.com

How blogger works ?

How Blogger Works?

When we submit the template XHTML code to the blogger it is stored in the blogger database. When the blog is requested via a browser, the Blogger Parser parses the code and sends back the HTML output of the parsed XML code which will be displayed in the browser.

The Basic Layout

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

Blogger template is fully coded in XHTML and Blogger Elements. In the above code we have defined a set of xmlns (XML Namespace) which are defined by Google for use with blogger. Namespace such as xmlns:b, xmlns:data, xmlns:expr lets us design our blogger web page and also to get data from the blogger database.

xmlns:b – access the blogger elements
xmlns:data – is where the data of the blog comes from
xmlns:expr – is used to calculate expression for attributes(will see this soon).

Note: You can change the above namespace name from b to blog or data to d at anytime. But it’s best to stick with what is default.

Before you continue – Skip This

Before moving along, have a brief layout of how your blog should look. Sketch a layout of your blog’s structure. Take a piece of paper, start drawing the layout or you could use apps like lucidchart and wire-frame the design that you want your blog to be. Identify elements like,

Where should the menu come and how should it look.
How will the posts appear, is it a 2 column or 3 column layout.
Where should the widgets appear etc.

Section

The Blogger template layout is designed with Sections. Sections are the one’s which makes the layout of the web page(like header, footer, sidebar etc.). It is like the sections in HTML5.

Sections in blogger

Above image shows some sample web page layouts which will give you an idea of what a section of a web page might be.

Section Syntax

The syntax to create a section in blogger is shown below. There can be any HTML code around the section code, but there can’t be any HTML inside the section code. To define the contents of the section we must use the Widget element in blogger, which will be discussed shortly.

Each section tag has the following syntax, which is similar to an HTML element with attributes.

<b:section id='' class='' maxwidgets='' showaddelement=''> 
  </b:section>

Each attributes have different meanings, that will be parsed by the blogger to render the elements final output.

Section Attributes

id(Required) – A unique name, with letters and numbers only.
class(Optional) – Common class names are ‘navbar,’ ‘header,’ ‘main,’ ‘sidebar,’ and ‘footer.’ If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like.
maxwidgets(Optional) – The maximum number of widgets that can be added in this section. If you don’t specify a limit, there won’t be one.
showaddelement(Optional) – Can be ‘yes’ or ‘no,’ with ‘yes’ as the default. This determines whether the Page Elements tab will show the ‘Add a Page Element’ link in this section. Have a look at the image shown below,

Section – “showaddelement” attribute
growth(Optional) – Can be ‘horizontal’ or ‘vertical,’ with ‘vertical’ as the default. This determines whether widgets within this section are arranged side-by-side or stacked.

A section can contain widgets. It can not contain other sections or any other code. If there is a need to add a code around or inside a section, the section must be separated into two different sections.

Example Code

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
  <!-- Section contents -->
  </b:section>
  <b:section id='main' class='main' maxwidgets="1" showaddelement="no">
  <!-- Section contents -->
  </b:section>
  <b:section id='footer' class='footer' showaddelement="no">
  <!-- Section contents -->
  </b:section>

Note: By default there must be at least two b:section tags or else blogger will throw an error.

Widget Tags

Sections are made mainly using widgets. Sections are just layout elements, widget is with which the real data is displayed. A widget at its simplest form, is just a single tag, which is a placeholder for what should appear in the page element. There are some default widgets available in blogger and a custom widget can also be created. The data for the widget is stored in the blogger database and is accessed only when the widget is to be displayed.

Widget Syntax

<b:widget id='' locked='' mobile='' title='' pageType='' type='' />

id(Required) – May contain letters and numbers only, and each widget ID in your template should be unique. A widget’s ID cannot be changed without deleting the widget and creating a new one.
type(Required) – Indicates what kind of a widget it is, and should be one of the valid widget types listed below.The various widgets types are,
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
locked(Optional) – Can be ‘yes’ or ‘no,’ with ‘no’ as the default. A locked widget cannot be moved or deleted from the Page Elements tab.

Page Element – Widget ‘locked’ attribute
title(Optional) – A display title for the widget. If none is specified, a default title such as ‘List1’ will be used.
pageType(Optional) – Can be ‘all,’ ‘archive,’ ‘main,’ or ‘item,’ with ‘all’ as the default. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of thier pageType.)
mobile(Optional) – Can be ‘yes’, ‘no,’ or ‘only’ with ‘default’ as the default. This decides if the widget will be displayed on mobile or not. Only Header, Blog, Profile, PageList, AdSense, Attribution will be displayed on mobile when the mobile attribute is ‘default.’

Example Code

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
  <b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
  <b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
  <b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
  <b:widget id='Label1' type='Label' locked='false' />
  </b:section>

The Syntax and Documentation is taken from the Official Blogger Documentation

Read Next – Blogger Template Design from Scratch – Part 2

Blogger Template Design From Scratch - Part One

Is this for you?

How blogger works ?

The Basic Layout

Before you continue – Skip This

Section

Section Syntax

Section Attributes

Example Code

Widget Tags

Widget Syntax

Example Code

Object Oriented Programming in JavaScript - Part 3

JavaScript is growing faster and its user base is increasing vastly. Knowledge of JavaScript is going to be very important in the future to come for...

Facebook style Hovercard using jQuery and CSS

Facebook UI has a lot’s of components that is adapted worldwide by millions of users. One of the features is Hovercard. It is displayed when...

Explore →