Overview of How To create Blogger Template

Creating blogs is really easy with blogger. Blogger is a well-known blog-publishing service that allows the users to create amazing blogs for free. However, a little HTML, CSS and Javascript coding knowledge is required. It’s not that tough. Once you make your mind to learn “Overview of How To create Blogger Template”, with some basic concepts, you are ready to go.

Overview of How To create Blogger Template

A Blogger template consists of XHTML and blogger elements. To design a basic layout of the template, you will use namespaces. A namespace (xmlns) is pre-defined to use with the Blogger by Google. 3 types of namespaces are basically used as follows

xmlns:b – ‘b’ specifies that this namespace is used to access the blogger elements.

xmlns:data – It is used to specify that from where the data of the blog comes.

xmlns:expr – Calculates the expression for attributes.

You will write all the code in main.xml file of Blogger.

Syntax for 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>
</html>

Sections

A blogger template is divided into sections. The basic sections are: Header, Content, Footer, Sidebar. You will use the Widget element to define the content in a section. Note that you can’t use HTML within a section. But around a section, it’s permissible to use HTML.

The correct format of section will be

<b:section id=’ ‘ class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../>
</b:section>
While the below format, will be considered Wrong:
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<h1>Content heading</h>
<div>Content</div>
</b:section>

Section Attributes

You need to specify following attributes in a section. id is the only required attribute while others are optional.

id – It is the unique name of section specified in letters and numbers only.

class – Consists of common classes such as ‘navbar,’ ‘main,’ ”header,’ ‘footer, and ‘sidebar,’. If you change templates later, these will let you to decide whether transfer your content or not. You can also use other class names if you wish.

maxwidgets – It limits the maximum number of widgets that can be added in a section.

showaddelement – Consists of ‘yes’ or ‘no’ value. ‘Yes’ is the default. This establishes whether the Page Elements tab displays the ‘Add a Page Element’ link or not.

growth – It can be ‘horizontal’ or ‘vertical’. ‘vertical’ is the default. This determines whether widgets are arranged side-by-side or stacked within a section.

Syntax to Add Sections

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">

</b:section>
<b:section id='footer' class='footer' showaddelement="no">

</b:section>

Widgets

A widget is the main part which displays real data for section. It works as a placeholder. Section only defines the layout elements. Some default widgets are available in blogger. However, you can also create your own custom widget.

Widget Attributes

Widget can have many attributes. Out of which, only id and type are required and others are optional.

id – It can have letters and numbers only. Each widget ID is unique. A widget’s ID can only be changed by deleting the widget or creating a new widget.

type – It indicates the type of widget and can have one of the valid widget types listed below

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

locked – It can have a ‘yes’ or ‘no’ value. The default value is ‘no’. You cannot move or delete a locked widget from the Page Elements tab.

title – Displays the title of the widget. If not specified, a default title such as ‘List1’ is used.

pageType – It can be ‘all,’ ‘archive,’ ‘main,’ or ‘item’. ‘All’ is the default. A widget will display only on the designated pages.

mobile – It can be ‘yes’, ‘no,’ or ‘default’. It tells a widget will display on mobile or not. Only Header, Blog, Profile, PageList, AdSense, Attribution will be displayed on mobile if it is set to ‘default.’

Widget Syntax

Widgets are included within a section. The syntax to add a widget in a section will be somewhat like this

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

Conclusion:

Hopefully, this tutorial completely answers the beginners question that – Overview of How To create Blogger Template. You need to learn some HTML, CSS, Javascript for the former. If you want to customize it, you have to work hard for strong coding skills. No more struggle to find a solution that how to make blogger template. Start designing today !!

Overview of How To create Blogger Template