test

Saturday, 20 August 2011

How to make a blogspot template : General steps of making blogspot 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 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 <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 == "page url"'>
.....
<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 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.

Friday, 5 August 2011

How to make a blogger template : how blogspot widget work?

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

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.

Wednesday, 27 July 2011

How to make a blogger template : data tags -part 2

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

Friday, 22 July 2011

How to make a blogger template : data tags - part 1

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.

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:

<data:data.name/>: The name of this archive interval, e.g. "August 2006."
<data:data.url/>: The link to the page containing posts from this interval.
<data:data.post-count/>: 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:

<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 "About Me" information from the profile.
<data:displayname>: The author's display name.
<data:photo/>: The user's profile photo, made up of the following:

<data:photo.url/>: The photo URL.
<data:photo.width/>: The photo's width, in pixels.
<data:photo.height/>: The photo's height, in pixels.
<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 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.

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:

<data:links.name/>: The link's text.
<data:links.target/>: The link's URL.

Logo Widget

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

<data:fullButton/>: The URL of the Blogger button you've selected.

Monday, 18 July 2011

How to make a blogger template : inside widget - includable

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>

<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, there’s 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'/>

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 post’s 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 <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

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.

Friday, 15 July 2011

How to make a blogger template : the body and APIs

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">
</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: