Subscribe News Feed Subscribe Comments

Showing posts with label template tutorial. Show all posts
Showing posts with label template tutorial. Show all posts

Browse > Home / / Template Blogger Tutorial Part 2


Template Blogger Tutorial Part 2

1 comments
Wednesday, July 08, 2009 Posted by One-4-All

Labels: ,

Yesterday i was posted an article about blogger template tutorial. I will continue this tutorial. Before we learn how to make or customize our template, i think we should know about CSS (Cascading Style Sheets) and HTML (Hypertext Markup Language). There are important thing for our template. Now, i start to continue of blogger template tutorial with explaining about CSS.

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors, fonts, and layout.

Usually in blogger template, CSS code was placed in head area (between <head> and </head>). Look up for this picture.

In this picture, there are several CSS code for body and outer wrapper. In that CSS there are curly bracket {}, (:), and (;). There is the rules when we write CSS. When you write CSS, you place the declaration within curly brackets {}. Properties and values are separated by a colon (:), and property/value pairs are terminated by a semicolon (;).
There was background, width, padding, margin, border word in that example picture. To know what is the meaning of that word, look up for this picture.


For example:
body {
background: #AAAAAA;
width: 990px;
color: #202020;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px auto 0px;
padding: 0px;
}
Body area with width 990px and background color is grey (#AAAAAA), and than color of body content is black (#202020) with font size 12 px and font type is arial, tahoma or verdana. Body area have margin 0px auto 0px, this have a meaning this area will have margin-top 0px, margin-right and bottom auto (will be center) and margin-left also 0px. and the content of body will have margin 0px.
Also, there are some area that are use picture as background. To apply your favorite background, we must add picture url to CSS code, like this one.
body {
background-image: url(background_image.jpg);
}
And the result will be like this.
body {
background-image: url(background_image.jpg) no-repeat;
}
And the result will be like this.
body {
background-image: url(background_image.jpg) repeat-x;
}
And the result will be like this.
body {
background-image: url(background_image.jpg) repeat-y;
}
And the result will be like this.




Best Regard
One-4-All

Read More

Enter your email address:

Delivered by FeedBurner

Labels:

Browse > Home / / Template Blogger Tutorial


Template Blogger Tutorial

0 comments
Monday, July 06, 2009 Posted by One-4-All

Labels: ,

templateI was converted a couple of wordpress template, like: magazine music premium, Wcute, ePhoto. Many of my friends was ask to me how to convert it. I really don't know how to answer that question, because i just do it (convert wordpress template). I just make it into CSS style. Maybe to answer that question, i want to make a tutorial about blogger template. In this tutorial, i will give that all-iknow (all i know). But, before i make article about Template Blogger Tutorial, i want ask apologize if i have mistake in my article.

Generally, the actual structure of any templates are not exactly the same, but for the most blogs, their template consist of the headers, footers, and posts sections. But there are some sections (I'll call these sections blocks or containers afterward) that are not visible on the computer screen, but important HTML-wise to build a practical and proper working template.
A template, basically have structure like this:
template
Going from the biggest to the smallest blocks:

1. Body: the outer most block is the Body of your template (basically everything that the computer screen covers).

2. Outer-wrapper: this container covers your whole template (the body is more like the outside of your template). In general, you build a wrapper to place a multiple of smaller blocks inside it. The most common blocks inside this Outer-wrapper is the Header, Post, Sidebar, and Footer.

3. Header: this block is the top most part of your blog (the name is quite obvious). But inside the Header you will have other sub-blocks too - the Header Title block, the Header Description block, and others such as the Adsense banners, a menu bar, etc. So, to wrap all these sub-blocks inside one large container, the largest container in the Header section is usually a Header-wrapper that wraps everything inside.

4. Content: below the Header is the Content-wrapper - basically the most important container block of all. Immediately inside this wrapper are the Sidebar containers (1,2 or any number of sidebars) and the Main container (which contains your posts, comments, or some ads).

5. Footer: is the bottom most container of your template. As in the Header section, you'll also need a Footer-wrapper to contain other sub-blocks in the Footer section.

6. Main: the Main-wrapper is the outer most container in the Main section which goes inside the Content-wrapper. Inside this Main-wrapper are the Post block, Comment block, Date Header, and other widgets created from the Add Page Element option.

7. Sidebar: is the block that contains all your side widgets . In a standard Blogger template, you will usually find only 1 sidebar.

8. Blog Post: this block contains the important stuff - your Posts Titles, Post, Post Author, Labels, etc.

Read More

Enter your email address:

Delivered by FeedBurner

Labels:
Subscribe to: Posts (Atom)