Designing A Blogger Template From Scratch Is Not As Difficult As You Might Imagine

Designing a blogger template from scratch is not as difficult as you might imagine.
I had to
search around a lot of websites and did a lot of googling to find out how to build a complete
blogger template. Turns out it is pretty easy to build it yourself, but you need to know some
stuffs before hand. The thing is, you need to understand how it works and should have an
idea of how your blog should be.
Is this for you?

The above question depends mainly on your web development skills. You should
have some basic web designing skills. You need not be a master in web design, but
some basic knowledge of CSS, HTML, JavaScript & awareness of XML will do. You
can learn the basics of these technologies atw3schools.com
How blogger works ?
How Blogger Works?
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.
The 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>
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 asxmlns: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 elements

xmlns:data - is where the data of the blog comes from
xmlns: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 its best to stick with what is default.
Before you continue - Skip This

Before moving along, have a brief layout of how your blog should look. Sketch a
layout of your blogs 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,
Where should the menu come and how should it look.

How will the posts appear, is it a 2 column or 3 column layout.
Where should the widgets appear etc.
Section
The Blogger template layout is designed with Sections. Sections are the ones which
makes the layout of the web page(like header, footer, sidebar etc.). It is like the
sections in HTML5.
Sections in blogger
Above image shows some sample web page layouts which will give you an idea of
what a section of a web page might be.
Section Syntax
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.
Section Attributes
id(Required) - A unique name, with letters and numbers only.
class(Optional) - Common class names are 'navbar,' 'header,' 'main,'

'sidebar,' and 'footer.' If you switch templates later, these names help Blogger
determine how best to transfer over your content. However, you can use different
names, if you like.
maxwidgets(Optional) - The maximum number of widgets that can be added

in this section. If you don't specify a limit, there won't be one.
showaddelement(Optional) - Can be 'yes' or 'no,' with 'yes' as the default.

This determines whether the Page Elements tab will show the 'Add a Page Element'
link in this section. Have a look at the image shown below,
Section - "showaddelement" attribute
growth(Optional) - Can be 'horizontal' or 'vertical,' with 'vertical' as the

default. This determines whether widgets within this section are arranged side-byside or stacked.
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.
Example Code
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
</b:section>
Note: By default there must be at least two b:section tags or else blogger will throw
an error.
Widget Tags
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.
Widget Syntax
<b:widget id='' locked='' mobile='' title='' pageType='' type='' />
id(Required) - May contain letters and numbers only, and each widget ID in
your template should be unique. A widget's ID cannot be changed without deleting
the widget and creating a new one.
type(Required) - Indicates what kind of a widget it is, and should be one of

the valid widget types listed below.
The various widgets types are,
o
o
o
o
o
o
o
o
o
o
o
o
o
BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar
locked(Optional) - Can be 'yes' or 'no,' with 'no' as the default. A locked
widget cannot be moved or deleted from the Page Elements tab.
Page Element - Widget 'locked' attribute
title(Optional) - A display title for the widget. If none is specified, a default title
such as 'List1' will be used.
pageType(Optional) - Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the

default. The widget will display only on the designated pages of your blog. (All
widgets display on the Page Elements tab, regardless of thier pageType.)
mobile(Optional) - Can be 'yes', 'no,' or only with 'default' as the default.

This decides if the widget will be displayed on mobile or not. Only Header, Blog,
Profile, PageList, AdSense, Attribution will be displayed on mobile when the mobile
attribute is 'default.'
Example Code
<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
The basic <b:widget/> tag was explained in part one of Blogger Template Design
from Scratch. In this post, there will be a detailed description of how widget tag can
be used to have a fine grained control of what appears inside of the widget.
The basic form of the widget tag contains a self closing tag with the attributes related
to it.
<b:widget [attributes...] />
You can consider these basic widget tags like function invocation, whereas the
definition of the function is present in blogger.
Expand Widget Template

To view the contents of the default widgets, use the Jump to widget dropdown in Edit
HTML page(Template -> Edit HTML). Choose any one of the widget. Once you reach
the widget code, press the black triangle arrow in the line number aligned to the
widget code to view the widget code.
Expand widget
Creating Custom Widget

To create a custom widget, we need to make some changes to the widget tag.
First we need to have a opening and closing widget tag.

<b:widget [attributes...] >
</b:widget>
Most of the widget types specified in the previous post are defined by blogger. To
create custom content in the widget, use the HTML type.
Example:
<b:widget id='HTML1' type='HTML'>
</b:widget>
Note: For the id of the widget, its best to provide the id of format - {type}{digit starting
from 1 for each widget}. For example, if a custom contact and labels widget is
created, their respective ids would be HTML1 and HTML2 with type HTML.
<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>
Include and Includable

To define the content of the widget tag, we use a tag named includable. A
expanded/custom widget tag must contain only includable tags inside it.
Includable has two parts,
include - is identical to a function name. When this is invoked, the particular

includable will be called.
includable - is identical to a function definition i.e the body of the function.
Includable Syntax
Includable
<b:includable id='uniqueId' var='dataForWidget'>

[Here we can place any piece of code]
</b:includable>
Includable Attributes
id (Required) - A unique identifier made up of letters and numbers.

var (Optional) - An identifier made up of letters and numbers, for referencing
data within this section. This is how we pass data into the widget. This is also
identical to a function.
Include
Includes are used if you have a section of code that you want to repeat multiple times
in different places. When a include is used, that particular include is replaced with the
contents of the includable.
Example
<b:includable id='main'>
<b:loop var='i' values='posts'>
<b:include name='post' data='i'/>

</b:loop>
</b:includable>
<b:includable id='post' var='p'>
Title: <data:p.title/>
</b:includable>
Include Syntax
<b:include name=idOfTheIncludable data=dataForIncludable />
Include Attributes
name (Required) - An identifier made up of letters and numbers. It must

match the ID of an existing b:includable in the same widget.
data (Optional) - An expression or peice of data to pass on to the includable
section. This will become the value of the var attribute in the includable.
Default Includable
Every custom widget must contain a includable with id equal to main(main
includable). This main includable will contain the content for entire the widget. Infact,
this is the only includable you need to specify the contents of the widget. If you need,
you can define more includables inside the widget and outside the main includable,
and include it inside the main includable using the include element.
Even if you have more includables with different ids it will not be displayed
automatically in the widget. You need to specify it inside the main includable using
the include element with reference to the includable id.
Dodle: If you have experience in C Programming, there will be a main() function that
will be called first for the start of the program execution. Consider the main
includable(id=main) as the main() function in C Programming for the widget.
Example:
Widget
<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 place the above widget code in your blogger template to view the output.

Designing A Blogger Template From Scratch Is Not As Difficult As You Might Imagine

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Designing A Blogger Template From Scratch Is Not As Difficult As You Might Imagine

Caricato da

Copyright:

Formati disponibili

Designing a blogger template from scratch is not as difficult as you might imagine.

Is this for you?

How blogger works ?

How Blogger Works?

The Basic Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

xmlns:b - access the blogger elements

Before you continue - Skip This

Where should the menu come and how should it look.

id(Required) - A unique name, with letters and numbers only.

class(Optional) - Common class names are 'navbar,' 'header,' 'main,'

maxwidgets(Optional) - The maximum number of widgets that can be added

showaddelement(Optional) - Can be 'yes' or 'no,' with 'yes' as the default.

Section - "showaddelement" attribute

growth(Optional) - Can be 'horizontal' or 'vertical,' with 'vertical' as the

type(Required) - Indicates what kind of a widget it is, and should be one of

Page Element - Widget 'locked' attribute

pageType(Optional) - Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the

mobile(Optional) - Can be 'yes', 'no,' or only with 'default' as the default.

Expand Widget Template

Creating Custom Widget

First we need to have a opening and closing widget tag.

<b:widget id='HTML1' type='HTML' locked='yes' title='Contact Us'>[Widget code

Include and Includable

include - is identical to a function name. When this is invoked, the particular

<b:includable id='uniqueId' var='dataForWidget'>

id (Required) - A unique identifier made up of letters and numbers.

<b:include name='post' data='i'/>

name (Required) - An identifier made up of letters and numbers. It must

<b:widget id='HTML1' type='HTML' locked='yes' title='Labels'>

Potrebbero piacerti anche