test

Friday, 15 July 2011

How to make a blogger template : the body and APIs

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