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 “How to
create Blogger template from scratch”, with some basic concepts, you
are ready to go.
How to Create Blogger Template?
Having your own unique blogger template is something sumptuous. But
the question arises – from where to start? The simple answer is, there
are two reliable methods for designing a template as follows
There are two ways to Create Blogger Template
- Create Blogger Template with Manual Method
- Create Blogger Template with TemplateToaster
If you have good knowledge of coding, you will go for manual method
to create blogger template. But if you are a beginner and don’t know how
to code – then TemplateToaster is the best to choose to create blogger
template. You require no coding with this blogger template creator.
It will give you an easy drag & drop interface to design your
template. You just select what you want, rest of the things it will
handle. Let’s delve deeper to see the detailed procedure that how to
design blogger template with both the methods
Create Blogger Template with manual method
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 CONTENTS --> </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"> <!-- Section contents --> </b:section> <b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes"> </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>
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>
Create blogger template with TemplateToaster blogger template creator
In this method, no coding is involved. Just a simple drag & drop
interface to create Blogger template. More interestingly, it is a
complete solution to the frequently asked questions by readers that how
to make responsive Blogger template as all the templates designed with
TemplateToaster web design software are responsive by default.
TemplateToaster website builder is the most convenient method to create Blogger template. Just download
it by visiting the official site. Its trial version is free. Follow the
easy steps to install. The first screen you see after installation will
look like
Post a Comment