test: July 2011

Wednesday, 27 July 2011

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

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

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

<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
•        Feed
•        Header
•        HTML
•        SingleImage
•        LinkList
•        List
•        Logo
•        BlogProfile
•        Navbar
•        VideoBar
•        NewsBar

Tuesday, 12 July 2011

How to make a blogger template : the header

CHAPTER 2: TEMPLATE HEADER

Because we don’t 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>

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

Monday, 11 July 2011

How to make a blogger template : Blogger template structure

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 blog’s 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.
This is very similar to Wordpress template, if you ever work with them before.

Thursday, 7 July 2011

Why Every Programmer Should Learn SEO - and Vice Versa

This article was written by Anthony Benedict.
In the business world that doesn't involve coding, link building, programming, designing, writing for the Internet or one of the many other jobs that can be done with an Internet connection and a decent computer - all these jobs are grouped into one type of position. People with jobs like these are known to outsiders as the "computer people" and many of them think that all of them pretty much do the same things - which can be summed up for the most part as designing websites.

Although all of us that partake in these types of jobs know that this is not at all the case, there should be a little bit of truth to that claim, as every person involved in SEO should be at least a little bit involved in programming - and every programmer (well not every single type of programmer actually) should be at least a familiar with SEO.

Why "SEO's" Should Know a Little bit of Coding/Programming

First of all as an SEO you should know that coding and programming isn’t at all the same thing. There are some very advanced types of programming that you will probably never have the time in your life to learn - and that does not include the basic types of coding like HTML and CSS, although these are two great places to start.

One of the main reasons you should learn about CSS and HTML (and even JavaScript) is that having the best formatting within your coding can tremendously help your SEO. Just like browsers, Google is "likes" light weight coding and its spiders can crawl and read it a lot faster, thus allowing you to get indexed much quicker.

Another reason an SEO should learn a little bit of programming is that it will give you new ideas on how to attack old problems. It will help you learn what you are wasting your time on, what can be automated, and help you to solve your problem on an exponential platform. You don't have to become an expert in the field of programming, but just doing a little bit of dabbling in it will help you get a better idea of sorts of things that can be done that you didn't even think were possible. In fact just a simple conversation with a programmer and seeing what he has to say or what he can do for you will help with that.

Why Programmers Should Learn SEO

Whether you are a web site designer or a hardcore programmer - you should know one thing. There is a lot of money involved in the world of SEO. And since SEO is very much related to what you will be able to do on the computer - designing programs around SEO tactics, needs, services, and even companies. As a freelancing programmer, the world of SEO, link building, and content writing can really give you some great ideas. In fact some SEO businesses are found on great programs that allow SEO's to automate a lot of the tedious work that comes with Internet marketing.

Of course another reason one should learn SEO because owning a website is the best way to market what you are trying to sell. And the best way to market you website is by learning about SEO. Even learning the basics is essential for hiring a company to do all your SEO for you - otherwise you may up over paying for services that may never even pan out.

Being a web developer or programmer with an SEO background, or specializing in Internet marketing with a little bit of a computer science background is a very impressive resume - and many companies (even ones that do not have to do with he Internet) love seeing that type of combination. Being able to have your mind at least somewhat wrapped around both concepts will open many doors for you - whether you are working for a corporation or starting your own business.

About Author

This article was written by Anthony Benedict. Anthony helps to run and maintain inetzeal.com. inetzeal.com is an Internet marketing company that provides many services - including an ever popular white label link building service.

Wednesday, 6 July 2011

How to solve CSS errors in Blogger template using Firebug

Knowing CSS can help you in solving Blogger template errors ,or make some customization . But how to do that ? how to find where is the trouble or find what CSS attribute you need to change when make customization ? In this post ,I will show you what I did : using Firebug (a Firefox add-on ) to work with CSS

Firebug is a great add-on of Firefox browser ,it's very popular in web development because it can help us inspecting website elements ,debugging errors in CSS ,script ,seeing web layout ....
To use Firebug ,first ,Firefox browser must be installed in your PC . Then go to website : http://getfirebug.com/ ,click on Install Firebug to get the latest version and installed this add-on to Firefox .

After installing Firebug ,you will see an new button in browser window ,this button has the image of a bug .

Enter the Blogger blog you want to fix errors or make customization
When the page fully loaded ,click on firebug button ,the firebug window will appear at the bottom of browser window .

Click on the arrow button in firebug window

After click this button ,there will be a rectangle around the element that the mouse is pointing . Move your mouse pointer to the element you want to change size or fix error
In the right panel of firebug window ,you will see the CSS tags of element which you are pointing .

You can click on the value of these CSS attributes to change value of them ,for example ,in this picture ,I changed width of an element in the right panel ,and see how it look after changing immediately in browser window .
You can also add more attributes to a CSS tags to make it display as you want ,for example ,you want color of all text in an element changed to white color,just right click on right-panel and ,choose new property ,and then add color:#fff;

That's very easy and fun because you can see how your site is right after making changes .

But how to know which CSS need to change ,or meaning of CSS tags or what need to add to make it display as you want ? You can see it easily in my previous post : 31 online CSS cheatsheets that may helpful .

You can use Firebug to see the element layout ,the right or left margin ,padding... in Layout tab in right panel .
When you finish the work ,just go to Blogger template (xml file) ,and add the tags or attributes that you've just added in Firebugs to your template .
There're many functions that Firebug can help you in finding bugs and fixing errors .It's very easy to use ,believe me ,just need a little of time ,you can handle this software and make it work for you ^^

Tuesday, 5 July 2011

31 online CSS Cheatsheets that help

Believe it or not ,most of modifications in default Blogger templates that I did were CSS only . And the result are custom templates you see in SimplexDesign blog .Understanding CSS ,even a little can help you in changing elements in website/blog as you want .Changing in Font size,colors ,size of elements ,positions of elements... all of them are CSS ^^
But how can we remember all of them ,we are not developer and we have no time to do this . So here are 30 CSS cheatsheets ,that you can use for reference ,anytime you want to know about an attribute ,what they mean ,and the role of them ...
I hope this helpful to you

This information was found on this site ,and you can go there to get the original post and more interesting posts
This article is divided in 2 major Sections: