In previous post ,I told you about data tags for some widgets . In this post ,we continue to the last and most important widget : blogpost widget . This widget is used to show posts in a blog . Without this widget ,we can't blogging .
Now let's see blogpost widget's data tags :
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.)
In previous post ,I mentioned on what is on widgets and includable ,and now ,in this post ,I want to show you the Blogger APIs,or data tags ,which you can use to included specific pieces of data in template file .
All of these data tags has structure :
<data:name/> or <data:name1.name2/>
where
Now ,we go further :
In the post on section and widget ,I told you there are 12 types of widget :
So there are 12 groups of Blogger APIs (or data tags ) for 12 types of widget ,these APIs can use only in the corresponding widget and one group for Globally Available Data ( the data you can use in any place in template )
1,Globally Available Data :
These data tags can be applied to the entire page, so you can use it anywhere, unlike other data tags which can only be used in a specific widget.
How to apply them ?
Very simple ,in template ,in a place you want to show blog title ,just add a <data:title/> and the blog title will be shown .
On team blogs, the profile widget contains less information about more authors, as follows.
If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. E.g. <b:if cond='data:team=="true"'> (display multiple authors) </b:if>
<data:title/>: The widget's title.
<data:feedUrl/>: The URL of the feed.
All of these data tags has structure :
<data:name/> or <data:name1.name2/>
where
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 APIs (or data tags ) for 12 types of widget ,these APIs can use only in the corresponding widget and one group for Globally Available Data ( the data you can use in any place in template )
1,Globally Available Data :
These data tags can be applied to the entire page, so you can use it anywhere, unlike other data tags which can only be used in a specific widget.
- <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 ?
Very simple ,in template ,in a place you want to show blog title ,just add a <data:title/> and the blog title will be shown .
Page Header
There are two data tags for this widget :- <data:title/>: The blog's title.
- <data:description/>: The blog's description.
Blog Archives
The different styles provided here are for the different default options on the Page Elements tab. If you're designing a new version, it's easiest to use 'FLAT' as the style, and then manipulate the rest of the data as desired.- <data:title/>: The title of the widget.
- <data:style/>: One of 'MENU', 'FLAT', or 'HIERARCHY'.
- <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
For a blog with a single author, the profile widget contains the following information. Note that to access different parts of the photo data, you'll use notation such as <data:photo.url/>.- <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 for the photo.
On team blogs, the profile widget contains less information about more authors, as follows.
- <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 to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. 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 work the same way and have the same two pieces of data.- <data:title/>: The widget's title.
- <data:content/>: The content of the widget.
Feed Widget
A feed widget's content is dynamically loaded using Google AJAX API after blog is rendered in a browser. It can be styled only using CSS.<data:title/>: The widget's title.
<data:feedUrl/>: The URL of the feed.
Picture Widget
A picture widget contains a single image, and provides all the 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 are in use on the 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
The simplest form of a list. Each item is just a single piece of text, without any different types of data within it.- <data:title/>: The widget title.
- <data:items/>: The list of items.
Link List Widget
A slightly fancier list, where each item has two parts to it: 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
It doesn't get any simpler than this one. Just one piece of data here.- <data:fullButton/>: The URL of the Blogger button you've selected.
In previous post ,I told you about section and widget ,and how it arranged in the template body . In this post ,I will show you what is in a 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"/>
a widget contain 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>
If you see blogger template file ,this is what you see ,is that right ?
In each widget ,there must be one 'includable' block with id="main" .This will usually contain most or all of the content that will display for this widget ,and other 'includable' will support the main 'includable' in processing data . For example ,you have a widget which showing the subsription form ,in this widget ,there's a main 'includable' will show the form and result , and other 'includable' will get the data form ,connect to the subscription database,processing them...etc.. . Or if a widget is a car ,so the 'main includable' will be motor ,other includable will be fuel tank,spark plug,valves ,crankshaft ...
An includable followed with these attributes :
When a widget go to work , the main includable will get data ,pass data to other 'includable' for processing and then get the result back to main includable for showing result 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' with any name you want .
If you familiar to 'function ' and 'procedure' in programing ,you can understand 'includable' and 'widget' easily . The main includable work as main program ,and other includable work as function or procedure .
Another example ,if you want to show post title :
in the code above ,the main includable has a call stament for includable 'show_post_title' . The ID of the post which you want to show title is passed through variable 'i' in the main . The includable 'show_post_title' get the value of 'i' and assign it as to 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' .
Includes are most useful if you have a section of code that you want to repeat multiple times in different places. You can just write the code once, put it inside a b:includable, then use b:include wherever you want it to appear. If you don't need to do that, then you can just stick with the single main includable and not worry about the rest. (Note that the main includable is included automically -- <b:include name='main'/> is unnecessary.)
<b:loop var='identifier' values='set-of-data'>
[repeated content goes here]
</b:loop>
The 'identifier' part can be any name you choose, and will be used to stand in for each new item in the list, for instance, in the blog posts widget, posts is a list,each time through the loop. A common convention is to simply call this "i" .
You can use the b:if and b:else tags to display content in some places but not others. The general format is this:
<b:if cond='condition'>
[content to display if condition is true]
<b:else/>
[content to display if condition is false]
</b:if>
The b:else tag is optional. Without it, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.
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 contain 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>
If you see blogger template file ,this is what you see ,is that right ?
In each widget ,there must be one 'includable' block with id="main" .This will usually contain most or all of the content that will display for this widget ,and other 'includable' will support the main 'includable' in processing data . For example ,you have a widget which showing the subsription form ,in this widget ,there's a main 'includable' will show the form and result , and other 'includable' will get the data form ,connect to the subscription database,processing them...etc.. . Or if a widget is a car ,so the 'main includable' will be motor ,other includable will be fuel tank,spark plug,valves ,crankshaft ...
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 go to work , the main includable will get data ,pass data to other 'includable' for processing and then get the result back to main includable for showing result 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' with any name you want .
If you familiar to 'function ' and 'procedure' in programing ,you can understand 'includable' and 'widget' easily . The main includable work as main program ,and other includable work as function or procedure .
Another example ,if you want to show post title :
<b:includable id='main'>
<b:include name='show_post_title' data='i'/>
</b:includable>
<b:includable id='show_post_title' var='p'>
............
<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>
</b:includable>
in the code above ,the main includable has a call stament for includable 'show_post_title' . The ID of the post which you want to show title is passed through variable 'i' in the main . The includable 'show_post_title' get the value of 'i' and assign it as to 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' .
Includes are most useful if you have a section of code that you want to repeat multiple times in different places. You can just write the code once, put it inside a b:includable, then use b:include wherever you want it to appear. If you don't need to do that, then you can just stick with the single main includable and not worry about the rest. (Note that the main includable is included automically -- <b:include name='main'/> is unnecessary.)
Statements
Like any programing language ,Blogger allows us use some statement such as loop statement and condition statement in 'includable' .Loops
The b:loop statement repeat a section of content multiple times. This is most commonly used for printing out each post in a list of posts for a given page, or each comment, or each label, etc. The general format for using loops is this:<b:loop var='identifier' values='set-of-data'>
[repeated content goes here]
</b:loop>
The 'identifier' part can be any name you choose, and will be used to stand in for each new item in the list, for instance, in the blog posts widget, posts is a list,each time through the loop. A common convention is to simply call this "i" .
If / Else
You can use the b:if and b:else tags to display content in some places but not others. The general format is this:
<b:if cond='condition'>
[content to display if condition is true]
<b:else/>
[content to display if condition is false]
</b:if>
The b:else tag is optional. Without it, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.
In previous post ,I told you about the header of a blogger template . The next part should be the CSS part ,but as you know ,we use the CSS to define how elements in body displayed (post color ,font,size...),so in this post ,I want to show you what is in the body of a template APIs and HTML markup ,then we will back to the CSS to define how they displayed .
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 page element such as a picture, a blogroll, or anything else we can add from the Page Elements tab.
In body part ,we can add HTML around 'sections' or add them inside 'widgets'
Each section has an opening and a closing tag, looking something like this:
A <b:section> tag can have the following attributes:
A widget also has an opening and a closing tags ,like this :
<b:widget id="header" type='HeaderView' locked="yes"/>
A widget can contain HTML tags and Blogger APIs for different works , but in the simplest form ,it's only
A widget may have the following attributes:
The types of widgets you can specify are:
That's all for sections and widgets ,in the next post ,we will examine what is in a widget and APIs :D
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 page element such as a picture, a blogroll, or anything else we can add from the Page Elements tab.
In body part ,we can add HTML around 'sections' or add them 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,' with 'yes' as the default. If it is 'yes' ,you can add more widgets to this section ,in the section area ,you will see a link 'Add a Page Element' ,if the value is 'no' ,there's nothing .
- growth - (Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.
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 for different works , but in the simplest form ,it's only
<b:widget id="header" type='HeaderView' locked="yes"/> </b:widget/>
with nothing inside ,just a placeholder indicating how the widget should be handled in Page Elements tab .A widget may have the following attributes:
- id - (Required) May contain letters and numbers only, and each widget ID in your template should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one.
- type - (Required) Indicates what kind of a widget it is, and should be one of the valid widget types listed below.
- 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
That's all for sections and widgets ,in the next post ,we will examine what is in a widget and APIs :D
As mentioned in previous post on blogger template structure ,there are 4 main parts in a blogger template . Part 1 contain information on xml format ,and we can ignore this part because there's nothing to do here .
For the part 2 ,the header ,here is the first thing we should care for a blogger template .
In a default blogger template , there are only two lines in this part :
The first line
will insert necessary meta tags to the header automatically . If you view source code of a page in your blogspot's blog ,what will you see ? Something like that :
It's replaced with meta tags , links to favicon ,link to default CSS, script file...
The next one
<title>blog titles .....blah blah ...</title>
In Blogger ,we can't follow this advice exactly ,but we can try our best ,by using what Blogger provide .
We can use this code in the header
The code above means :
-if the current page is homepage ,it show the meta tags for homepage in header and blog title in title
-if the current page is category page ( page that contain a list of posts under a specific category ) ,it show the meta tags for category page in header and blog title in title
-if the current page is a single post ,it show meta tags in header and title of post in title .
By using this code ,we can narrow the meta tag (keywords,page description) and title for every page type . Although we can't add keywords ,page description for a specific post ,but it's still better than do nothing ,isn't it ?
That's all for the header . In the next posts ,I will move to other parts in a blogger template , steps to make a HTML template , convert it to Blogger , and tools for this work .
For the part 2 ,the header ,here is the first thing we should care for a blogger template .
In a default blogger template , there are only two lines in this part :
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
The first line
<b:include data='blog' name='all-head-content'/>
will insert necessary meta tags to the header automatically . If you view source code of a page in your blogspot's blog ,what will you see ? Something like that :
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
.....................
There's no line <b:include data='blog' name='all-head-content'/> .<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
.....................
It's replaced with meta tags , links to favicon ,link to default CSS, script file...
The next one
<title><data:blog.pageTitle/></title>
is rendered to the title tag in header <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<meta content='your blog keywords ....' name='keywords'/>
<link href='link to your favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
-Add link to outside script files or css filesA small tip
Every page in blog should have description and keywords that close to the page's content,it's what google said in their SEO tip .In Blogger ,we can't follow this advice exactly ,but we can try our best ,by using what Blogger provide .
We can use this code in the header
<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>
The code above means :
-if the current page is homepage ,it show the meta tags for homepage in header and blog title in title
-if the current page is category page ( page that contain a list of posts under a specific category ) ,it show the meta tags for category page in header and blog title in title
-if the current page is a single post ,it show meta tags in header and title of post in title .
By using this code ,we can narrow the meta tag (keywords,page description) and title for every page type . Although we can't add keywords ,page description for a specific post ,but it's still better than do nothing ,isn't it ?
That's all for the header . In the next posts ,I will move to other parts in a blogger template , steps to make a HTML template , convert it to Blogger , and tools for this work .
Blogger team tried to make their product more easier to use and customization for all users with their template design funtion . If you want some changes in fonts ,background ,layout...,this function can help you . But if you want more ? want to make your own blogger blog look like a professional website ? It's time you need to know something about structure of blogger template ,apis ,scripts ... to make your own .
I will make a post series on How to make a blogger template ,so you can make one for yourself or can do the customizsation easily . I will try to make it short ,and easy to understand , hope it helpful for you .
Here is the first post on this topic : Blogger template structure
Blogger template is written in xml markup language ,a complete template has 4 section as mentioned bellow(this is my way to describe a template ,not Google ^^ )
1,The first section will contain something like this
This part will define the document bellow is in xml format ,the standard of this xml ,and something else related . I'm not a professional developer and do not know much on xml ,so I can't explain you more about this part ^^ This part is required but fortunately ,we don't need to make anychanges on them .
2,The second section : This section start from <head> to <b:skin> , it contain necessary tags for header ,meta tags , link to favicon... like other html documents . In this section ,we can add favicon ,adding some meta tags for description ,keywords ..
3,The third section : Start from <b:skin> and end at </b:skin> ,it contain CSS tags ,that set the appearance of your blog . This CSS define how an element in blog look like ,such as text color ,font size ,color ,background ... All tags in this part are follow the standard of CSS without any exception or 'CSS tags for Blogger only' ,so if you have some basic knowledge on this field ,you can easily modify them as you want .
4,The forth part start from <body> end at </body> : the main part of a template ,it made up primarily with 'section' and 'widget' . In sections and widgets ,there are Blogger APIs for specific tasks .
We have many 'sections' ,one for showing posts ,others for show banner in header ,or showing footer ...
In the section for showing post ,we have widget for showing single post , widget for showing posts in categories ,widget for showing posts in homepage ...
In a widget ,for instance ,widget showing single post ,we have Blogger APIs for showing date ,time ,post header ,post body ...
Beside APIs,we can use HTML tags to arrange elements and make them display as we want .
This is similar to Wordpress template ,if you ever work with them before .
Other element that I usually use in Simplex's template is scripts . Scripts can be anywhere in part 3 and 4 ,but in some cases ,we need to grouped them or move them to the end of template (before </html> ) to avoid conflicting .
That's all for template structure ,in the next posts ,I will go deeper in each part .
I will make a post series on How to make a blogger template ,so you can make one for yourself or can do the customizsation easily . I will try to make it short ,and easy to understand , hope it helpful for you .
Here is the first post on this topic : Blogger template structure
Blogger template is written in xml markup language ,a complete template has 4 section as mentioned bellow(this is my way to describe a template ,not Google ^^ )
1,The first section will contain something like this
This part will define the document bellow is in xml format ,the standard of this xml ,and something else related . I'm not a professional developer and do not know much on xml ,so I can't explain you more about this part ^^ This part is required but fortunately ,we don't need to make anychanges on them .
2,The second section : This section start from <head> to <b:skin> , it contain necessary tags for header ,meta tags , link to favicon... like other html documents . In this section ,we can add favicon ,adding some meta tags for description ,keywords ..
3,The third section : Start from <b:skin> and end at </b:skin> ,it contain CSS tags ,that set the appearance of your blog . This CSS define how an element in blog look like ,such as text color ,font size ,color ,background ... All tags in this part are follow the standard of CSS without any exception or 'CSS tags for Blogger only' ,so if you have some basic knowledge on this field ,you can easily modify them as you want .
4,The forth part start from <body> end at </body> : the main part of a template ,it made up primarily with 'section' and 'widget' . In sections and widgets ,there are Blogger APIs for specific tasks .
We have many 'sections' ,one for showing posts ,others for show banner in header ,or showing footer ...
In the section for showing post ,we have widget for showing single post , widget for showing posts in categories ,widget for showing posts in homepage ...
In a widget ,for instance ,widget showing single post ,we have Blogger APIs for showing date ,time ,post header ,post body ...
Beside APIs,we can use HTML tags to arrange elements and make them display as we want .
This is similar to Wordpress template ,if you ever work with them before .
Other element that I usually use in Simplex's template is scripts . Scripts can be anywhere in part 3 and 4 ,but in some cases ,we need to grouped them or move them to the end of template (before </html> ) to avoid conflicting .
That's all for template structure ,in the next posts ,I will go deeper in each part .
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.
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.
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.
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.
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 ^^
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 ^^
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:
More Information on Most Practical CSS Cheat Sheet Yet
More Information on CSS2 Help Sheet
More Information on Core CSS
More Information on CSS Cheat Sheet
More Information on Basic CSS Cheat Sheet
More Information on CSS CHEAT SHEET
More Information on CSS Layout Cheat Sheet
More Information on CSS Font Shorthand Property Cheat Sheet
More Information on CHEAT SHEET CSS SHORTHAND CODES
More Information on Blueprint CSS Cheat Sheet
More Information on CSS Shorthand Cheat Sheet
More Information on CSS Cheat Sheets
More Information on CSS Shorthand
More Information on CSS Specificity – Cheat Sheet
More Information on CSS Shorthand Cheat Sheet
More Information on CSS Cheatsheet
More Information on CSS Properties and Values
More Information on CSS Cheat Sheet
More Information on Cascading Style Sheets Quick Reference
More Information on CSS3 Click Chart
More Information on CSS3 Help Sheet.
More Information on CSS 3 selector syntax
More Information on CSS3 Quick Reference Guide
More Information on CSS 3 Cheat Sheet
More Information on WebKit CSS3 Cheat Sheet
More Information on CSS3 Color Names
More Information on HTML5 and CSS 3 Cheat Sheets
More Information on HTML5 & CSS3 Support
More Information on CSS 3 cheat sheet
More Information on Compatibility tables for support of CSS3
More Information on CSS3 – Information and samples
(Source : http://slodive.com/freebies/css-cheat-sheets/ )
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:
1,Most Practical CSS Cheat Sheet Yet
More Information on Most Practical CSS Cheat Sheet Yet
CSS Cheatsheets
2,CSS2 Help Sheet
More Information on CSS2 Help Sheet
3,Core CSS
More Information on Core CSS
4,CSS Cheat Sheet
More Information on CSS Cheat Sheet
5,Basic CSS Cheat Sheet
More Information on Basic CSS Cheat Sheet
6,CSS CHEAT SHEET
More Information on CSS CHEAT SHEET
7,CSS Layout Cheat Sheet
More Information on CSS Layout Cheat Sheet
8,CSS Font Shorthand Property Cheat Sheet
More Information on CSS Font Shorthand Property Cheat Sheet
9,CHEAT SHEET CSS SHORTHAND CODES
More Information on CHEAT SHEET CSS SHORTHAND CODES
10,Blueprint CSS Cheat Sheet
More Information on Blueprint CSS Cheat Sheet
11,CSS Shorthand Cheat Sheet
More Information on CSS Shorthand Cheat Sheet
12,CSS Cheat Sheets
More Information on CSS Cheat Sheets
13,CSS Shorthand
More Information on CSS Shorthand
14,CSS Specificity – Cheat Sheet
More Information on CSS Specificity – Cheat Sheet
15,CSS Shorthand Cheat Sheet
More Information on CSS Shorthand Cheat Sheet
16,CSS Cheatsheet
More Information on CSS Cheatsheet
17,CSS Properties and Values
More Information on CSS Properties and Values
18,CSS Cheat Sheet
More Information on CSS Cheat Sheet
19,Cascading Style Sheets Quick Reference
More Information on Cascading Style Sheets Quick Reference
20,CSS3 Cheatsheets
CSS3 Click Chart
More Information on CSS3 Click Chart
21,CSS3 Help Sheet.
More Information on CSS3 Help Sheet.
22,CSS 3 selector syntax
More Information on CSS 3 selector syntax
23,CSS3 Quick Reference Guide
More Information on CSS3 Quick Reference Guide
24,CSS 3 Cheat Sheet
More Information on CSS 3 Cheat Sheet
25,WebKit CSS3 Cheat Sheet
More Information on WebKit CSS3 Cheat Sheet
26,CSS3 Color Names
More Information on CSS3 Color Names
27,HTML5 and CSS 3 Cheat Sheets
More Information on HTML5 and CSS 3 Cheat Sheets
28,HTML5 & CSS3 Support
More Information on HTML5 & CSS3 Support
29,CSS 3 cheat sheet
More Information on CSS 3 cheat sheet
30,Compatibility tables for support of CSS3
More Information on Compatibility tables for support of CSS3
31,CSS3 – Information and samples
More Information on CSS3 – Information and samples
(Source : http://slodive.com/freebies/css-cheat-sheets/ )
I took an eye surgery two weeks ago and now I think my eyes are good enough to use computer again . Now is the time for me to answering comments and post something new after a long delay ^^
Thanks for still coming in my blog and keep supporting me in this time .
In this post ,I want to show you a freebie,a beautiful nature business card template in psd (Photoshop file format ) , just need some changes in name ,address... and it's ready to use
Designed by iBrandstudio ,this free business card is have very beautiful nature background with the atmosphere in the afternoon when the sun goes down. Come with double sided template with 3.5″x2″ in business card size, ready for print and highly customizable. The business card design that perfect for anyone.
You can use this business card template for free, both your personal and commercial project but do not redistribute or resell.
Have fun with it !
Thanks for still coming in my blog and keep supporting me in this time .
In this post ,I want to show you a freebie,a beautiful nature business card template in psd (Photoshop file format ) , just need some changes in name ,address... and it's ready to use
Designed by iBrandstudio ,this free business card is have very beautiful nature background with the atmosphere in the afternoon when the sun goes down. Come with double sided template with 3.5″x2″ in business card size, ready for print and highly customizable. The business card design that perfect for anyone.
You can use this business card template for free, both your personal and commercial project but do not redistribute or resell.
Features
- Beautiful nature design
- Highly customizable – Layered PSD and well organized
- Ready for print with bleed lines and trim guidelines
Details
- Date created : July 3, 2011
- Font used : Arial and Lobster 1.4
- Size : 3.5”x2”
- Color : CMYK
Preview
Download
Have fun with it !
