Do you want to start your blogging career for free?
You can do so with Google’s Blogger Platform. It is very easy to create a blog with a blogger. Blogger is a great platform for creating stunning blogs for free. In blogger, you can use readymade themes or design your own if you have some knowledge of HTML, CSS, and JavaScript.
Are you using Blogger but your blogger theme does not fit your needs?
You are unhappy with your theme and want something more from it but you can’t do it.
If you are a professional web developer then it is not a big problem for you to develop a free blogger theme for your needs, but…
It is a big problem for those who know nothing or little about web development. As they will not be able to understand the codes of the blogger theme.
This website is designed for them so that they can also learn more about web development and blogger theme development.
If you have decided to learn “How to create a Blogger template from scratch”. Then below we are providing you the complete tutorial for creating a blogger theme from scratch.
Let’s start learning blogger theme development.
To develop a blogger template then you must have some knowledge of HTML, CSS, and JavaScript. If you don’t know about them, then you can learn them from our website’s tutorial section.
Also, you can get a brief intro of all elements of HTML in this tutorial.
How to Create a Blogger Template? Tutorial for Beginners
To create your own stunning unique blogger template we need to know some blogger elements as a blogger template is a combination of these elements and XHTML. In a basic blogger template namespaces (xmlns) are used. Google predefines these namespaces for blogger. Three basic namespaces used are:
- XML:b – ‘b’ specifies that this namespace is used to access the blogger elements.
- xmlns:data – It is used to specify from where the data of the blog comes.
- xmlns:expr – Calculates the expression for attributes.
You will write the code in main.xml file.
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>
<b:skin>
<![CDATA[
<!-- CSS -->
]]>>
</b:skin>
</head>
<body>
<!-- BODY CONTENTS -->
<b:section id='header' class='site-header' maxwidgets='1' showaddelement='yes'/>
<script>
//<![CDATA[
<!-- JavaScript -->
//]]>>
</script>
</body>
</html>b:skin
It is required to add CSS of theme.
Note: You can add your CSS in <style> tag also as in normal HTML documents.
Sections
A blogger template is divided into various sections and these sections are needed in the proper functioning of the template. The basic sections are: Header, Content, Footer, Sidebar. These sections are used to display various widgets of blogger.
Note: You can’t use the HTML within a section, but around the section HTML is allowed
Syntax of section is:
<!--Correct format-->
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../>
</b:section>
<!--Correct format-->
<h1>Page Heading</h1>
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../>
</b:section>
<p>Paragraph</p>
<!--Wrong format-->
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<h1>Page Heading</h1>
<p>Paragraph</p>
</b:section>Section Attributes
Following are the attributes of section. The id attribute is the only required attribute of section all other 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.
Widgets
A widget is the main component of the blogger template. It acts as a placeholder for the real data. Section is used define the layout for the widget data.
Blogger provides various pre build widgets. You can use them for free or create your own. Blogger widgets are like the plugins in wordpress.
Note: Widgets are only used within the sections. You cannot use them outside the section.
Syntax of widget:
<b:widget id=' ' title=' ' type=' ' locked=' ' />Widget Attributes
Like section widget also has some attributes and out of them id and type are required rest are optional. These widgets are:
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
- BlogProfile
- Feed
- Header
- HTML
- LinkList
- List
- Logo
- Navbar
- Newsbar
- SingleImage
- VideoBar
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’.