Vous êtes sur la page 1sur 35

TheSimplexDesign blog www.thesimplexdesign.

com

1 HOW TO MAKE A BLOGGER TEMPLATE
HOW TO MAKE A BLOGGER TEMPLATE




TheSimplexDesign blog www.thesimplexdesign.com

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



TheSimplexDesign blog www.thesimplexdesign.com

3 HOW TO MAKE 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 <head> 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 <head> to <b:skin>, 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 <b:skin> to </b:skin>, 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 <body> to </body>, this is the main section of a template
which show post list, single posts, display comments It contains HTML,
XML and Blogger tags.


TheSimplexDesign blog www.thesimplexdesign.com

4 HOW TO MAKE A BLOGGER TEMPLATE
This is very similar to Wordpress template, if you ever work with them
before.



TheSimplexDesign blog www.thesimplexdesign.com

5 HOW TO MAKE A BLOGGER TEMPLATE
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:
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
The first line
<b:include data='blog' name='all-head-content'/>
insert necessary meta tags to the header. If you view source code of a page,
you will see something like this:
<meta content='text/html; charset=UTF-8' http-equiv='Content-
Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
.....................
Instead of <b:include data='blog' name='all-head-content'/>

The next line:
<title><data:blog.pageTitle/></title>
is rendered to the <title> tag:
<title>blog titles .....blah blah ...</title>


TheSimplexDesign blog www.thesimplexdesign.com

6 HOW TO MAKE A BLOGGER TEMPLATE
What should we do with header?
- You can add your own meta tags for 'site description' ,'keywords' , like
these:
<meta content='your blog description goes here'
name='description'/>
<meta content='your blog keywords ....' name='keywords'/>
- Add your own favicon:
<link href='link to your favicon.ico' rel='icon'
type='image/vnd.microsoft.icon'/>
- 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:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
......... meta tags for the homepage ....
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title><data:blog.title/></title>
....meta tags for category page (or archive page)....
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>


TheSimplexDesign blog www.thesimplexdesign.com

7 HOW TO MAKE A BLOGGER TEMPLATE
.... meta tags for single post ...
</b:if>
</b:if>
</b:if>

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?




TheSimplexDesign blog www.thesimplexdesign.com

8 HOW TO MAKE A BLOGGER TEMPLATE
CHAPTER 3: TEMPLATE BODY AND
API'S



The <body> 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:
<b:section id='header' class='header' maxwidgets="1"
showaddelement="no">


TheSimplexDesign blog www.thesimplexdesign.com

9 HOW TO MAKE A BLOGGER TEMPLATE
</b:section>

A <b:section> 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:
<b:widget id="header" type='HeaderView' locked="yes"/>
..............
</b:widget/>

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


TheSimplexDesign blog www.thesimplexdesign.com

10 HOW TO MAKE A BLOGGER TEMPLATE
<b:widget id="header" type='HeaderView' locked="yes"/>
</b:widget/>
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


TheSimplexDesign blog www.thesimplexdesign.com

11 HOW TO MAKE A BLOGGER TEMPLATE
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar










TheSimplexDesign blog www.thesimplexdesign.com

12 HOW TO MAKE A BLOGGER TEMPLATE
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:
<b:widget [...attributes...]>
</b:widget>
for example a header widget:
<b:widget id="header" type='HeaderView' locked="yes"/>
..............
</b:widget/>
A widget contains blocks of code 'includable' inside, like this:
<b:widget [...attributes...]>

<b:includable id='main' var='xxx'>
[insert whatever content you want here]
</b:includable>



TheSimplexDesign blog www.thesimplexdesign.com

13 HOW TO MAKE A BLOGGER TEMPLATE
<b:includable id='yyy' var='yyy'>
[insert whatever content you want here]
</b:includable>

<b:includable id='zzz' var='zzz'>
[insert whatever content you want here]
</b:includable>
..........
</b:widget>
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:
<b:include name='includable id' data='variable'/>


TheSimplexDesign blog www.thesimplexdesign.com

14 HOW TO MAKE A BLOGGER TEMPLATE
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:
<b:includable id='main'>
<b:include name='show_post_title' data='i'/>
</b:includable>
<b:includable id='show_post_title' var='p'>
............
show post title of the post has id='p'
..........
</b:includable>

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


TheSimplexDesign blog www.thesimplexdesign.com

15 HOW TO MAKE A BLOGGER TEMPLATE
<b:includable>.</b:includable>, 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 <b:include name='main'/> 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:

<b:loop var='identifier' values='set-of-data'>
[repeated code goes here]
</b:loop>

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


TheSimplexDesign blog www.thesimplexdesign.com

16 HOW TO MAKE A BLOGGER TEMPLATE
This statement is used to execute a block of code where conditions met. The
general format is this:

<b:if cond='condition'>
[code to execute if condition is true]
<b:else/>
[code to execute if condition is false]
</b:if>
The b:else tag is optional. Without b:else, code only executed when
condition return true. The closing </b:if> is required.


















TheSimplexDesign blog www.thesimplexdesign.com

17 HOW TO MAKE A BLOGGER TEMPLATE
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:
<data:name/> or <data:name1.name2/>
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


TheSimplexDesign blog www.thesimplexdesign.com

18 HOW TO MAKE A BLOGGER TEMPLATE
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:
<data:title/>: Return the blog's title.
<data:pageType/>: Return type of the current page. It can be
'item', 'archive', or 'index'.
<data:url/>: Return the URL of the current page.
<data:homepageUrl>: Return the homepage of the blog.
<data:pageTitle/>: Return title of the current page. This is often
the blog title, but may contain additional information on archive or
post pages.
<data:encoding/> : Return the encoding to use for the blog, e.g.
UTF-8.
<data:languageDirection/>: Return either "ltr" or "rtl" for left-to-
right and right-to-left languages, respectively.
<data:feedLinks/>: Return the autodiscovery feed links for the
page header.


TheSimplexDesign blog www.thesimplexdesign.com

19 HOW TO MAKE A BLOGGER TEMPLATE

How to apply them ?
In a place you want to show blog title, just add a <data:title/> and the blog
title will be shown, easy, right?

Page Header
There are two data tags for this widget:
<data:title/>: The blog's title.
<data:description/>: The blog's description.

Blog Archives
Data tags for Blog Archives widget:
<data:title/>: The title of the widget.
<data:style/>: 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.
<data:data/>: A list of each archive unit, each of which contains:
o <data:data.name/>: The name of this archive interval, e.g.
"August 2006."
o <data:data.url/>: The link to the page containing posts from
this interval.
o <data:data.post-count/>: How many posts there are in this
interval.
Profile Widget


TheSimplexDesign blog www.thesimplexdesign.com

20 HOW TO MAKE A BLOGGER TEMPLATE
Profile widget contains the information on blog author, content contributors
which has following data tags:
<data:title/>: The title of the widget.
<data:userUrl/>: The author's profile URL.
<data:location/>: The location from the author's profile.
<data:aboutme/>: The &quot;About Me&quot; information from
the profile.
<data:displayname>: The author's display name.
<data:photo/>: The user's profile photo, made up of the following:
o <data:photo.url/>: The photo URL.
o <data:photo.width/>: The photo's width, in pixels.
o <data:photo.height/>: The photo's height, in pixels.
o <data:photo.alt/>: The alt text of the photo.

In a team blogs, profile widget contains less information about other authors
except owner, as following:

<data:title/>: The title of the widget.
<data:authors/>: The list of all authors, each of which contains the
following:
<data:authors.displayname>: The author's display name.
<data:authors.userURL/>: The author's profile URL.

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


TheSimplexDesign blog www.thesimplexdesign.com

21 HOW TO MAKE A BLOGGER TEMPLATE
blog, you can use the data:team variable to distinguish between single and
multiple authors. E.g. <b:if cond='data:team=="true"'> (display multiple
authors) </b:if>

Text / HTML / JavaScript Widget
The Text widget and the HTML/JavaScript widget are the same way and
have two pieces of data:
<data:title/>: The widget's title.
<data:content/>: 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.
<data:title/>: The widget's title.
<data:feedUrl/>: The URL of the feed.

Picture Widget
A picture widget contains a single image, and data tags provide relevant
data for that image:
<data:title/>: The title of the widget.
<data:sourceUrl/>: The URL of the image.
<data:width/>: The image's width, in pixels.
<data:height>: The image's height, in pixels.
<data:caption/>: The image caption.


TheSimplexDesign blog www.thesimplexdesign.com

22 HOW TO MAKE A BLOGGER TEMPLATE
Labels Widget
The labels widget includes a list of all labels that use in a blog.
<data:title/>: The widget title.
<data:labels/>: The list of labels, each of which contains:
<data:labels.name/>: The text of the label.
<data:labels.count/>: How many posts have this label.
<data:labels.url/>: 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.
<data:title/>: The widget title.
<data:items/>: 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.
<data:title/>: The widget title.
<data:links/>: The list of links, each of which contains:
o <data:links.name/>: The link's text.
o <data:links.target/>: The link's URL.

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


TheSimplexDesign blog www.thesimplexdesign.com

23 HOW TO MAKE A BLOGGER TEMPLATE
<data:fullButton/>: The URL of the Blogger button you've selected.





TheSimplexDesign blog www.thesimplexdesign.com

24 HOW TO MAKE A BLOGGER TEMPLATE
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 :
<data:feedLinks/>: 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:
<data:feedLinks.url/>: The feed URL.
<data:feedLinks.name/>: The feed name (i.e. 'Posts' or
'Comments').
<data:feedLinks.feedType/>: The type of feed (Atom or RSS).
<data:feedLinks.mimeType/>: The mime type of the feed.
<data:olderPageUrl/>: 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.)
<data:olderPageTitle/>: Title of the link to the older page of posts.
It's usually the text "Older Posts"
<data:newerPageUrl/>: The newer equivalent of olderPageUrl.
<data:newerPageTitle/>: The newer equivalent of olderPageTitle.


TheSimplexDesign blog www.thesimplexdesign.com

25 HOW TO MAKE A BLOGGER TEMPLATE
<data:commentLabel/>: The phrase to use to show the number of
comments, e.g. "comments."
<data:authorLabel/>: The phrase to use to indicate who wrote the
post, e.g. "posted by."
<data:timestampLabel/>: The phrase to use to indicate when the
post was written, e.g. "posted at."
<data:postLabelsLabel/>: Phrase to introduce the list of post labels,
e.g. "labels for this post."
<data:backlinksLabel/>: Phrase to describe backlinks to this post,
e.g. "links to this post."
<data:posts/>: 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:
<data:post.dateHeader/>: The date of this post, only present if this
is the first post in the list that was posted on this day.
<data:post.id/>: The numeric post ID.
<data:post.title/:> The post's title.
<data:post.body/>: The content of the post.
<data:post.author/>: The display name of the post author.
<data:post.url/>: The permalink of this post.
<data:post.timestamp/>: The post's timestamp. Unlike
dateHeader, this exists for every post.
<data:post.labels/>: The list of the post's labels. Each label
contains the following:
<data:label.name/>: The label text.


TheSimplexDesign blog www.thesimplexdesign.com

26 HOW TO MAKE A BLOGGER TEMPLATE
<data:label.url/>: The URL of the page that lists all posts in this
blog with this label.
<data:label.isLast/>: True or false. Whether this label is the last
one in the list (useful for placing commas).
<data:post.allowComments/>: 'True' if this post allows comments.
<data:post.numComments/>: The number of comments on this
post.
<data:post.showBacklinks>: Whether to show backlinks for this
post.
<data:post.numBacklinks/>: Number of backlinks for this post.
<data:post.addCommentUrl/>: The URL of the 'add a comment'
form for this post.
<data:post.emailPostUrl/>: The URL of the 'email this post' form for
this post.
<data:post.editUrl/>: The URL of the edit form for this post.
<data:feedLinks/>: 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:
<data:feedLink.url/>: The feed URL.
<data:feedLink.name/>: The feed name (e.g. 'Posts' or
'Comments').
<data:feedLink.feedType/>: The type of feed (Atom or RSS).
<data:feedLink.mimeType/>: The mime type of the feed.
<data:comments/>: A list of all comments for this post (on item
pages only). Each contains the following:


TheSimplexDesign blog www.thesimplexdesign.com

27 HOW TO MAKE A BLOGGER TEMPLATE
<data:comment.id/>: The numeric ID of the comment.
<data:comment.body/>: The body of the comment.
<data:comment.timestamp/>: The time the comment was created.
<data:comment.author/>: The display name of the comment's
author, or 'Anonymous'.
<data:comment.authorUrl/>: URL of the comment author's profile,
if the comment is not anonymous.
<data:comment.deleteUrl/>: The URL for deleting this comment.
<data:comment.isDeleted/>: Whether this comment has been
deleted. (The text of deleted comments is replaced with a
placeholder.)






TheSimplexDesign blog www.thesimplexdesign.com

28 HOW TO MAKE A BLOGGER TEMPLATE
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:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
The id can be vary in different template, but type="Blog" is required
In this widget, there are some 'includable's:
<b:includable id='main' var='top'>: main includable, this includable
will take the main task for processing data and send the result to
monitor.
<b:includable id='nextprev'>: 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 .
<b:includable id='mobile-nextprev'> this includable do the same task
to nextprev includable above, but this includable will work if you
browse the blog in mobile .
<b:includable id='post' var='post'> 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
<b:includable id='mobile-index-post' var='post'> like 'post' includable
above ,but it work on mobile


TheSimplexDesign blog www.thesimplexdesign.com

29 HOW TO MAKE A BLOGGER TEMPLATE
<b:includable id='postQuickEdit' var='post'> 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.
<b:includable id='shareButtons' var='post'> this includable will show a
list of share buttons at the end of post.
<b:includable id='comments' var='post'> show all comments of each
post.
<b:includable id='commentDeleteIcon' var='comment'> add a recycle
bin symbol next to the comment ,allow blog owner delete unwanted
comment.
<b:includable id='comment-form' var='post'> show the comment
form bellow the post ,allow reader to write their comment.
<b:includable id='backlinks' var='post'> show the backlinks to a post .
<b:includable id='backlinkDeleteIcon' var='backlink'> show the
recycle bin icon next t'o the backlink.
<b:includable id='feedLinks'> and <b:includable id='feedLinksBody'
var='links'> :show the feed links to blog and to each post.
<b:includable id='status-message'> show the status message ,like
this ' show all post under label xyz'.
Blogpost work as diagram bellow


TheSimplexDesign blog www.thesimplexdesign.com

30 HOW TO MAKE A BLOGGER TEMPLATE



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


TheSimplexDesign blog www.thesimplexdesign.com

31 HOW TO MAKE A BLOGGER TEMPLATE

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.






TheSimplexDesign blog www.thesimplexdesign.com

32 HOW TO MAKE A BLOGGER TEMPLATE
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.


TheSimplexDesign blog www.thesimplexdesign.com

33 HOW TO MAKE A BLOGGER TEMPLATE
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 <b:if> 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:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
homepage content
<b:else/>
blogpost widget .....
</b:if>

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:

<b:if cond='data:blog.url == &quot;page url&quot;'>


TheSimplexDesign blog www.thesimplexdesign.com

34 HOW TO MAKE A BLOGGER TEMPLATE
.....
<b:else/>
other content here
</b:if>
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


TheSimplexDesign blog www.thesimplexdesign.com

35 HOW TO MAKE A BLOGGER TEMPLATE
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.

Vous aimerez peut-être aussi