Blogger Template Design From Scratch - Part One
Reading Time:
Reading Time:
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.
<?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 elementsxmlns:data
– is where the data of the blog comes fromxmlns: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 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,
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.
Above image shows some sample web page layouts which will give you an idea of what a section of a web page might be.
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.
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.
<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.
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.
<b:widget id='' locked='' mobile='' title='' pageType='' type='' />
<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