How to Make a Blogger Template

TheSimplexDesign blog www.thesimplexdesign.com

1 HOW TO MAKE A BLOGGER TEMPLATE

HOW TO MAKE A BLOGGER TEMPLATE



Blogger team tried to make their product easier to use and custom for all

users with Template Design function. If you want small changes in fonts,

background, layout... this function can help. But if you want more to

make your blog look like a professional website? It's time you need to

learn structure of blogger template, APIs, javascripts ... to make a

custom template. This serie: How to make a Blogger template will take

you step by step to creating your own. I will try to make it short, simple

and easy to understand, hope it helpful for you.

----------------------------------------------------------------------

Chapter 1 Blogger Template Structure

Chapter 2 Template Header

Chapter 3 Template body and API's

Chapter 4 Inside widget - "Includable"

Chapter 5 Blogger data tags 1

Chapter 6 Blogger data tags 2

Chapter 7 How Blogger widget work

Chapter 8 General steps of making a Blogger template

----------------------------------------------------------------------



CHAPTER 1: BLOGGER TEMPLATE

STRUCTURE

Blogger template is written in xml markup language, a complete template

has 4 sections bellow:

1. The first section:

Starting from beginning of template to tag, this defines whole

document in xml format and follow all rules of xml markup language. This

section is required for all templates, but fortunately we don't need to make

any change on them.

2. The second section:

Starting from to , this section contain necessary tags for

header of a site such as: meta tags, favicon...We can edit/add favicon link,

meta tags for description, keywords to this section.

3. The third section:

Starting from to , this section contains CSS tags which

set the appearance of your blog . It defines how an element in blog look

likes, such as text color, font size, color, background ... by using CSS

attributes. If CSS is an advantage of yours, you can easily master blogs look

and feel.

4. The fourth section:

Starting from to , this is the main section of a template

which show post list, single posts, display comments It contains HTML,

XML and Blogger tags.



This is very similar to Wordpress template, if you ever work with them

before.



CHAPTER 2: TEMPLATE HEADER

Because we dont need to edit anything in 1st section of Blogger template,

So we move to section 2 the header. It is the first thing we should care for

a blogger template.

In a default blogger template, there are two lines in this section:

The first line

insert necessary meta tags to the header. If you view source code of a page,

you will see something like this:

.....................

Instead of

The next line:

is rendered to the tag:

blog titles .....blah blah ...



What should we do with header?

- You can add your own meta tags for 'site description' ,'keywords' , like

these:

- Add your own favicon:

- Add link to external script files or css files.

Tip

In Blogger ,we can add meta tags for keywords and description depends on

current page by using following code:

......... meta tags for the homepage ....

....meta tags for category page (or archive page)....



.... meta tags for single post ...

Explaination:

- Show the meta tags for homepage in header and blog title in title if the

current page is homepage ,

- Show the meta tags for category page in header and blog title in title if the

current page is archive/category page ( page that contain a list of posts

under a specific category ).

- Show meta tags in header and title of post in title if the current page is a

single post.

By using this code ,we can narrow the meta tags (keywords, page

description) and title for every page. Although we can't add keywords, page

description for a specific post, but it's still better than do nothing, isn't it?



CHAPTER 3: TEMPLATE BODY AND

API'S

The part of a template is made up primarily of 'sections' and

'widgets'.

Sections mark out areas of a page, such as the sidebar, footer, etc.

There are many widgets in a section.

A widget is an individual element of a page such as picture, blogroll . We

can add widget from Layout tab in Blogger Dashboard.

In body part ,we can add HTML tags around sections or add HTML tags

inside widgets.

Each section has an opening and a closing tag, looking something like this:



A tag can have the following attributes:

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

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

'sidebar and footer. You can use any name if you want, or use google

default. You can write some CSS tags to define how a 'class' look in

CSS section.

maxwidgets - (Optional) The maximum number of widgets to allow in

this section. If you don't specify a limit, there won't be one.

showaddelement - (Optional) Can be 'yes' or 'no. 'yes' is the

default. If 'yes', you can add more widgets to this section, in the

section area, you will see a link 'Add a Page Element' in Layout tab of

Dashboard, no means nothing.

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

default. This determines whether widgets within this section are

arranged side-by-side or stacked.

There are many widgets inside a section for specific tasks, for example:

showing blog post content, rss links

A widget also has an opening and a closing tags, like this:

..............

A widget can contain HTML tags and Blogger APIs, but it can be in this

simplest form:



Nothing inside, just a placeholder indicating widget position in Page

Elements tab.

A widget may have the following attributes:

id - (Required) contain letters and numbers. 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.

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.

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

The types of widgets you can specify are:

BlogArchive

Blog



Feed

Header

HTML

SingleImage

LinkList

List

Logo

BlogProfile

Navbar

VideoBar

NewsBar



CHAPTER 4: INSIDE WIDGET -

"INCLUDABLE"

In chapter 3, you already know about body section of a template, in this

post, we will take a closer look on widget - essential parts of body section,

and what is inside widget.

As we know, a widget has an opening tag and a closing tag, and structure

like this:

for example a header widget:

..............

A widget contains blocks of code 'includable' inside, like this:

[insert whatever content you want here]





..........

There must be one includable block with id=main in each widget. It

usually contains most content of a widget, and other includable support the

main includable in processing data. For insance, you have a widget showing

the subsription form, in this widget, theres a main includable will show the

form and result, other includable will get data form, connect to subscription

database, processing data etc...

An includable followed with these 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.

When a widget goes to work, the main includable get data, pass to other

'includable' for processing and then get the result back to main includable

for displaying through a call stament.

The call statement has form:



Beside the main 'includable', you can set the id of other 'includable' any

name you want.

If you are familiar with 'function ' and 'procedure' in computer programing

language, you can understand 'includable' and 'widget' terms easily. The

main includable works as main program, while other includables work as

functions or procedures.

Another example, if you want to show posts title:

............

show post title of the post has id='p'

..........

In the code above, the main includable has a call stament for includable

name 'show_post_title'. ID of the post which you want to show post title is

passed to show_post_title includable by variable 'i' in the main includable.

The includable 'show_post_title' gets the value of 'i' and assigns i to

another variable 'p', then show title of the post which has id='p'. The result

is returned to the main includable and displayed as title of the post which

has id='i'.

Includables are most useful if you have repeated block of code in many

places. You can write the code once, put it inside a



., then use this includable wherever you

want. Using includable is not required, you can stick with one main

includable only (Note that the main includable is included automically to

widgets so adding is unnecessary.)

Statements

Like any computer programing language, Blogger allows us to use some

statements such as loop statement and condition statement in an

'includable'.

Loops

The b:loop statement repeat a block of code multiple times. This is most

commonly used for printing out posts, comments, or labels, etc. The general

format of loop statement:

[repeated code goes here]

The 'identifier' is a counting variable which its value stands for each item in

the list (list of blog posts, list of comments). For instance, there are 10

posts in a blog need printing out to monitor by loop statement, so value of

identifier is an array from 1 to 10, if value of identifier equal 5, the block

of code inside b:loop statement is processing post number 5 and so on

Name of indentifier depends on you, but a common convention is to simply

call this "i".

If / Else



This statement is used to execute a block of code where conditions met. The

general format is this:

[code to execute if condition is true]

[code to execute if condition is false]

The b:else tag is optional. Without b:else, code only executed when

condition return true. The closing is required.



CHAPTER 5: BLOGGER DATA TAGS 1

In chapter 4, we already take a tour around widget and its elements, in this

post, we will know more about Blogger data tags, which can be used to

include specific pieces of data in template file.

All of these data tags has structure:

or

where name or name1,name2 is the name of the particular piece of data

you want to use

Now ,we go further:

In the post on section and widget, I told you there are 12 types of widget:

BlogArchive

Blog

Feed

Header

HTML

SingleImage

LinkList

List

Logo

BlogProfile

Navbar



VideoBar

NewsBar

So there are 12 groups of Blogger data tags ( or Blogger APIs ) for 12 types

of widget, these data tags are used only in the corresponding widget.

Theres a group of data tags which can be used in any place of template file,

independent to type of widget, called Globally Available Data.

Globally Available Data :

These data tags refer to common things such as blog title, current page,

type of page, current url , so you can use anywhere in a template file:

: Return the blog's title.

: Return type of the current page. It can be

'item', 'archive', or 'index'.

: Return the URL of the current page.

: Return the homepage of the blog.

: Return title of the current page. This is often

the blog title, but may contain additional information on archive or

post pages.

: Return the encoding to use for the blog, e.g.

UTF-8.

: Return either "ltr" or "rtl" for left-to-

right and right-to-left languages, respectively.

: Return the autodiscovery feed links for the

page header.



How to apply them ?

In a place you want to show blog title, just add a and the blog

title will be shown, easy, right?

Page Header

There are two data tags for this widget:

: The blog's title.

: The blog's description.

Blog Archives

Data tags for Blog Archives widget:

: The title of the widget.

: Displaying style of Blog archive widget: 'MENU', 'FLAT',

or 'HIERARCHY'. These are default options in the Page Elements tab. If

you're redesigning a Blog Archive widget, it's easiest to use 'FLAT' as

the style.

: A list of each archive unit, each of which contains:

o : The name of this archive interval, e.g.

"August 2006."

o : The link to the page containing posts from

this interval.

o : How many posts there are in this

interval.

Profile Widget



Profile widget contains the information on blog author, content contributors

which has following data tags:


: The author's profile URL.

: The location from the author's profile.

: The "About Me" information from

the profile.

: The author's display name.

: The user's profile photo, made up of the following:

o : The photo URL.

o : The photo's width, in pixels.

o : The photo's height, in pixels.

o : The alt text of the photo.

In a team blogs, profile widget contains less information about other authors

except owner, as following:


: The list of all authors, each of which contains the

following:

: The author's display name.

: The author's profile URL.

If you want your template to handle both of single and multiple authors



blog, you can use the data:team variable to distinguish between single and

multiple authors. E.g. (display multiple

authors)

Text / HTML / JavaScript Widget

The Text widget and the HTML/JavaScript widget are the same way and

have two pieces of data:

: The widget's title.

: The content of the widget.

Feed Widget

Content of a feed widget is loaded using Google AJAX API after blog fully

rendered in web browser. So CSS is the only way to style this widget.

: The widget's title.

: The URL of the feed.

Picture Widget

A picture widget contains a single image, and data tags provide relevant

data for that image:


: The URL of the image.

: The image's width, in pixels.

: The image's height, in pixels.

: The image caption.



Labels Widget

The labels widget includes a list of all labels that use in a blog.

: The widget title.

: The list of labels, each of which contains:

: The text of the label.

: How many posts have this label.

: A link to a page displaying posts with this label.

List Widget

List widget displays a list. Type of items in the list is text only.

: The widget title.

: The list of items.

Link List Widget

Display a list of links. A slightly fancier list, where each item has two

attributes: the text and the link.

: The widget title.

: The list of links, each of which contains:

o : The link's text.

o : The link's URL.

Logo Widget

Showing logo is what this widget does. Never simpler. Here is data tag:



: The URL of the Blogger button you've selected.



CHAPTER 6: BLOGGER DATA TAGS 2

You already knew about data tags in previous chapter, we will see the rest of

data tags in this chapter and know more about the most important widget:

blogpost. This widget purpose is to shows posts in a blog. Without blogpost

widget, we can't blogging.

Now let's see blogpost widget's data tags :

: A list of feeds for this page. On the main page,

this will contain the main blog feeds; on item pages, this will also

contain comments feeds. Each item in this list contains the following:

: The feed URL.

: The feed name (i.e. 'Posts' or

'Comments').

: The type of feed (Atom or RSS).

: The mime type of the feed.

: If there are older posts than the ones on the

current page, this is a URL to those posts. Context-sensitive for page

type. (Not all pages will have this link.)

: Title of the link to the older page of posts.

It's usually the text "Older Posts"

: The newer equivalent of olderPageUrl.

: The newer equivalent of olderPageTitle.



: The phrase to use to show the number of

comments, e.g. "comments."

: The phrase to use to indicate who wrote the

post, e.g. "posted by."

: The phrase to use to indicate when the

post was written, e.g. "posted at."

: Phrase to introduce the list of post labels,

e.g. "labels for this post."

: Phrase to describe backlinks to this post,

e.g. "links to this post."

: A list of all posts for this page. You can consider it a

set ,and each post is an item in this set . We can refer to post's

properties by the following tags:

: The date of this post, only present if this

is the first post in the list that was posted on this day.

: The numeric post ID.

The post's title.

: The content of the post.

: The display name of the post author.

: The permalink of this post.

: The post's timestamp. Unlike

dateHeader, this exists for every post.

: The list of the post's labels. Each label

contains the following:

: The label text.



: The URL of the page that lists all posts in this

blog with this label.

: True or false. Whether this label is the last

one in the list (useful for placing commas).

: 'True' if this post allows comments.

: The number of comments on this

post.

: Whether to show backlinks for this

post.

: Number of backlinks for this post.

: The URL of the 'add a comment'

form for this post.

: The URL of the 'email this post' form for

this post.

: The URL of the edit form for this post.

: A list of feeds specific to this post. (This is

different from the overall blog feedLinks, as it may contain a feed for

the post's comments, for instance.) Each contains the following:

: The feed URL.

: The feed name (e.g. 'Posts' or

'Comments').

: The type of feed (Atom or RSS).

: The mime type of the feed.

: A list of all comments for this post (on item

pages only). Each contains the following:



: The numeric ID of the comment.

: The body of the comment.

: The time the comment was created.

: The display name of the comment's

author, or 'Anonymous'.

: URL of the comment author's profile,

if the comment is not anonymous.

: The URL for deleting this comment.

: Whether this comment has been

deleted. (The text of deleted comments is replaced with a

placeholder.)



CHAPTER 7: HOW BLOGGER WIDGET

WORKS

In this chapter, we will combine all things from previous chapters to one and

see how a widget works.

In a template, Blogpost widget starts with this line:

The id can be vary in different template, but type="Blog" is required

In this widget, there are some 'includable's:

: main includable, this includable

will take the main task for processing data and send the result to

monitor.

: this includable will add the link 'next

page', 'prev pag' at the bottom of homepage ,archive page, and add

the link 'next post','previous post' at the bottom of single post .

this includable do the same task

to nextprev includable above, but this includable will work if you

browse the blog in mobile .

this includable will process the

data of each post, it will show post title, post body, date .... if you are

reading a single post ,and show post summary if you are in homepage

or archive page

like 'post' includable

above ,but it work on mobile



this includable will add

an small pencil at the end of post ,that allow blog owner can edit the

post easily ,click on this pencil ,blog owner will be redirected to post

editing window ,don't need to back to dashboard ,and search for post

which he want to edit from post list.

this includable will show a

list of share buttons at the end of post.

show all comments of each

post.

add a recycle

bin symbol next to the comment ,allow blog owner delete unwanted

comment.

show the comment

form bellow the post ,allow reader to write their comment.

show the backlinks to a post .

show the

recycle bin icon next t'o the backlink.

and :show the feed links to blog and to each post.

show the status message ,like

this ' show all post under label xyz'.

Blogpost work as diagram bellow



1, Blogpost widget starts working.

2, It starts a loop statement to loop through all posts.

3, Check value of counting variable i. If i smaller than the number of

posts, call post includable for showing post data (post title, post body

,author, labels...).



4a,4b,4c, In the post includable, if current page is a single post, it calls

other includables such as post edit icon, comment, comment form ... . If

current page is homepage or an archive page, these includables will not be

called.

5, Go to the next post and back to the check point at step 3.

6, In case of finish looping, back to the main includable.

7, Call next prev includable (or feedlinks, backlinks...if necessary), add the

link to next and previous post to the end of page.

8, Finish.

In these includables, beside data tags, we can add HTML, javascript to make

it display as we want.



CHAPTER 8: GENERAL STEPS OF

MAKING A BLOGGER TEMPLATE

This is the last chapter of series 'How to make a blogspot template'. In this

chapter, as a blogger user, I want to share my experience in making

Simplex's templates: working order, tools, tips. I won't focus on HTML/CSS

/Javascript because you can find documents on these issues easily. I do not

tends to go further on Blogger template structures/sections/widgets/data

tags/API, because they are mentioned in previous chapters.

Unlike other platforms such as Wordpress or Joomla which a template comes

with many files, blogger template is in one file xml only .

As we know, Blogger template contain sections. Here is the order of these

sections:

Header

Blogpost

Sidebar

Footer

All we need to do when making a template:

Place sections and widgets in right order. Add/remove sections

/widgets

Add HTML arround these sections, and use CSS to decorating them.



Add javascript/jquery for special effects, get the feeds and mashup

homepage.

1, Place sections and widgets in right order

Blogspot is made up with sections, widgets... so you have to place them in

right order, add more sections /widget for the function you want and remove

unnecessary sections/widgets .

For example, in Simplex Blognews template, I add more sections for page

list ( in the top of page ), sections for advertising banner ...remove default

sections and widgets in sidebar.

I also use conditional statement to hide sections/widget in some

specific cases. For example ,we all know blogpost widget show the post list

/single post (see chapter on blogpost widget here), but in the homepage, I

don't want it to show up, so I use a conditional statement to cover all

blogpost widget:

homepage content

blogpost widget .....

In the code above, if the current page is homepage, it will show homepage

content, if the current page is a category page or single post, it will call

blogpost widget for processing content.

Or if we want to hide all the blog content when go to a specific page, we can

use a conditional statement like that:



.....

other content here

By add/remove widgets and place them in right order, we have the frame of

a template.

2, Add HTML and CSS around sections/widgets

We have a template's frame with sections and widgets, now we need to add

more HTML tags around and decorate these HTML tags with CSS to make it

display as we want: images, text, fonts ....You can do all in this step.

Firebugs is the best tool for this work, you can find the post on how to use

this tool here. It will reduce your time on working with CSS and HTML. You

can use this tool to inspect elements on websites which has design you love

and find out which HTML/CSS their designer used. CSS tags information and

cheatsheet can be found in this post.

To get some inspirations, you can go to template galleries, collections, or go

to famous blogs on design. Sometimes, combining the elements which you

love from different templates can give you an unique design.

3, Add Javascripts/jquery

Because blogger doesn't allow server side programing, Javascript/Jquery

give us the solution for mashing up a homepage. By using Javascript to get

feeds from categories in blog, split the feed into post titles, post summaries

...and then display them, we have a good homepage, as you see in Simplex'

templates.

Javascript/Jquery is also used to make special effects, for example, sliders,

hover buttons, menu ...

You can find out more post on using Jquery/Javascript in SimplexDesign



blog.

That's all steps I applied when making a template and it works for me. I

can't tell you how to make a specific template, because it's very long and

take times. I hope with series 'How to make a blogspot template' you can:

- Understand the basic of a blogspot template, structure,what it contain.

- Functions of sections /widgets,how they work. Meaning of data tags/Api

and statements.

-General steps to make a template,what we have to do ,what we have to

search in google for making an elements ....

By reading all 8 chapters,I hope every time you see the code of Simplex

templates, you can understand what I did, and then make your own

customization or apply in making your own template.

It take time to search, read and then apply to make a template. It's not

easy. But if you want, you can do it. Thanks for your time.

Documents

How to Make a Blogger Template