How to make your own Blogger templates

Introduction

Blogger is a well known blogging platform owned by the search engine giant Google, but what is not known by many people already using this platform is the ability to create your own template from scratch with your custom design and styles,you can use the styling framework Bootstrap from twitter or any styles you want using XHTML.

How Blogger works ?

The Blogger template contains HTML code,CSS,JavaScript code and XML tags,the Blogger engine parses the template and returns HTML with database data to the browser to display it.

How to add your custom template

Replacing the existing Blogger template is dead easy ,you simple go to your blogger settings then go to template section Template -> Edit HTML[images here]

Basic Blogger template

Sections

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

As you see the template uses three xml namespaces defined by Google,namely:

xmlns:data :used to access blogger database

xmlns:b :used to access blogger elements

xmlns:expr :used to access blogger helper expressions

To form your template layout you are going to use sections , basically a blogger section defines a section in your template and acts as a container for other blogger elements,be careful to not add html code directly inside a section ,a section may only contains widgets another type of blogger element (defined under the namespace b).

The syntax of a blogger section is as follows:

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

The section has many attributes which further customize the section appearance and behavior such as :

id : Uniquely defines a section across the Blogger template

class:sets a class to your section like fooler,header,sidebar etc..

maxwidgets:sets the maximal number of widgets that can be added to this section.

showaddelement:defines if the blogger layout settings page shows <<Add a gadget>> button ,can takes yes or no

You have to add at least two sections in a template

Widgets

A widget is a blogger element which can be added or removed ,there some predefined blogger widgets and you can also use html to create custom widgets, a widget must be added inside a section.

The basic syntax of a widget is

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

widget attributes are:

id:the unique id of widget across template

locked : can be yes or no ,defines if the widget can be moved or removed

mobile:defines if the widget is displayable on mobile

title:defines the title of the widget

pageType:defines the container page type ,can be one of ‘all,’ ‘archive,’ ‘main,’ or ‘item’

type:defines the type of widget ,can be one of these predefined Blogger types

  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar

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

Creating custom widgets

You can create a custom widget using the widget type HTML

<b:widget id=’HTML1' type=’HTML’>
</b:widget>

for example:

<b:widget id=’HTML1' type=’HTML’ locked=’yes’ title=’Contact Us’>[Widget code here…]</b:widget>

<b:widget id=’HTML2' type=’HTML’ locked=’yes’ title=’Labels’>[Widget code here…]</b:widget>

a custom widget must contain only includable and include elements

Includable syntax

<b:includable id=’post’ var=’p’>
 Title: <data:p.title/>
</b:includable>Include

Include is blogger element which is used to include an Includable element

Include Syntax

<b:include name=’idOfTheIncludable’ data=’dataForIncludable’ />

<b:includable id=’uniqueId’ var=’dataForWidget’>
 [Here we can place any piece of code]
</b:includable><b:includable id=’main’>
 <b:loop var=’i’ values=’posts’>
 <b:include name=’post’ data=’i’/>
 </b:loop>
</b:includable>

Custom widgets must contain at least one Includable with id ‘main’ which gets included implicitly without the need to explicitly include it by Include.

Example

<b:widget id=’HTML1' type=’HTML’ locked=’yes’ title=’Labels’>
 <b:includable id=’main’>
 <h3>Labels</h3>
 <b:include name=’labels’></b:include>
 </b:includable>
 <b:includable id=’labels’>
 <ul>
 <li><a href=’#’ title=’PHP’>PHP</a></li>
 <li><a href=’#’ title=’Java’>Java</a></li>
 <li><a href=’#’ title=’CPP’>CPP</a></li>
 </ul>
 </b:includable>
</b:widget>

You can read my other articles on Techie diaries or reach out to me for any web development work