Hope that you have understood the basics and have taken the backup of your template. Now we are ready to go.
1. The Code in the Editor can be categorized into three distinct segments -
a. Declarations section
The declarations section is the place where the blogger templates (or Themes) declares the variables that it allows you to customize at a later stage.
b. CSS Section
The CSS section contains the code that is related to the appearance of your blog in terms of colors, fonts, font sizes, the images that make up the blog look good. It does not, however, decide what images you put on your posts.
c. HTML Section
The HTML Section contains code that assembles and puts up everything that you see on the page. It does the integration part.
Note: As of now, CSS and HTML do not work with variables. So what Blogspot does is that it uses some server side programming that translates these codes into something relevant and something that your browser can understand. I am not going into details of how and what this is all about but, I would like you to make a note of this that CSS and HTML (as of now) DO NOT support the use of variables. I mention this just because you would be searching for HTML or CSS content on some other places for reference and you would find the same.
Lets start understanding from the start -
The few lines at the top are used to provide information aboutthe version of XML and XHTML or HTML that are being used in the HTML code of the page that is being created.
This is the declaration that tells the Blogspot interpreter about the version of XML that is being used in the template or theme.
This is the document definition and this tells about the Document Type Definition. It also specifies that the Strict XHTML Version 1.0 is in use. This definition, in short, tells and determines the rules that are to be followed during implementation of the HTML Tags.
This opens the <html> tag within which all the code for the template and generated html page must reside. It also contains some variables that are used by the blogspot backend during generating the content on your blog. This is closed at the end of the template using the code </html>.
The <head> element of the HTML code follows next. This element contains the variable declarations and the CSS code that together are used by the HTML code in the succeeding <body> tag.
1. The Code in the Editor can be categorized into three distinct segments -
a. Declarations section
The declarations section is the place where the blogger templates (or Themes) declares the variables that it allows you to customize at a later stage.
b. CSS Section
The CSS section contains the code that is related to the appearance of your blog in terms of colors, fonts, font sizes, the images that make up the blog look good. It does not, however, decide what images you put on your posts.
c. HTML Section
The HTML Section contains code that assembles and puts up everything that you see on the page. It does the integration part.
Note: As of now, CSS and HTML do not work with variables. So what Blogspot does is that it uses some server side programming that translates these codes into something relevant and something that your browser can understand. I am not going into details of how and what this is all about but, I would like you to make a note of this that CSS and HTML (as of now) DO NOT support the use of variables. I mention this just because you would be searching for HTML or CSS content on some other places for reference and you would find the same.
Lets start understanding from the start -
The few lines at the top are used to provide information aboutthe version of XML and XHTML or HTML that are being used in the HTML code of the page that is being created.
<?xml version="1.0" encoding="UTF-8" ?>This is the declaration that tells the Blogspot interpreter about the version of XML that is being used in the template or theme.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">This is the document definition and this tells about the Document Type Definition. It also specifies that the Strict XHTML Version 1.0 is in use. This definition, in short, tells and determines the rules that are to be followed during implementation of the HTML Tags.
<head expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>This opens the <html> tag within which all the code for the template and generated html page must reside. It also contains some variables that are used by the blogspot backend during generating the content on your blog. This is closed at the end of the template using the code </html>.
The <head> element of the HTML code follows next. This element contains the variable declarations and the CSS code that together are used by the HTML code in the succeeding <body> tag.
<b:include data="blog" name="all-head-content">
</b:include>This code is used by blogspot to include all the meta-tags and other links that are essential for the web page to be generated.
In the <head> section of your code, you'll need to have a pair of <b:skin> </b:skin> tags. The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page.
Source: Google
Note: The skin is a blogspot word and requirement. It is not an X/HTML or CSS specification. So it must exist in the template and we are to place our declarations of variables and CSS inside this element.
Hey, this post is getting too Technical! Let me give you a break and during this time find out some information that would help you to understand the CSS section that I will be discussing tomorrow.
The next post will dicuss the CSS and then I will give you some tips on adding your own Header Image and Removing the Navbar.
Happy Learning.
Those who missed out the first part of the series can find it here
In the <head> section of your code, you'll need to have a pair of <b:skin> </b:skin> tags. The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page.
Source: Google
Note: The skin is a blogspot word and requirement. It is not an X/HTML or CSS specification. So it must exist in the template and we are to place our declarations of variables and CSS inside this element.
<!--[CDATA[The term CDATA, meaning character data, is used for distinct, but related purposes in the markup languages SGML and XML. The term indicates that a certain portion of the document is general character data, rather than non-character data or character data with a more specific, limited structure. In an XML document or external parsed entity, a CDATA section is a section of element content that is marked for the parser to interpret as only character data, not markup. A CDATA section is merely an alternative syntax for expressing character data; there is no semantic difference between character data that manifests as a CDATA section and character data that manifests as in the usual syntax in which "<" and "&" would be represented by "<" and "&", respectively.
Source:Wikipedia
The Variables Section:
This section defines several varables. Some the values in these variables can be set using the Fonts and Colors page in the Layouts of the Blogspot Control Panel. Following is an explanation of the statement to declare varaiables
In the above code:
Variable states that a variable is being declared.
name states the name of the variable that is being created.
description specifies the detailed description for the Variable. This descirption is displayed in the Fonts And Colors Page for this variable.
type indicates the type of value this variable can hold. It can be - color, font, automatic.
default specifies the default value that this variable should contain.
value specifies the currently set value.
Based on the above example of code and the information that is provided, we can expect that the Main Background Color is stored in a variable named mainBgColor. This variable can contain values that will correspond to some color. The default value for this value as set in the template is White (fff is the hexadecimal code for White) and the current value too is set to White.
<variable name="mainBgColor" description="Main Background Color" type="color" default="#fff" value="#ffffff">In the above code:
Variable states that a variable is being declared.
name states the name of the variable that is being created.
description specifies the detailed description for the Variable. This descirption is displayed in the Fonts And Colors Page for this variable.
type indicates the type of value this variable can hold. It can be - color, font, automatic.
default specifies the default value that this variable should contain.
value specifies the currently set value.
Based on the above example of code and the information that is provided, we can expect that the Main Background Color is stored in a variable named mainBgColor. This variable can contain values that will correspond to some color. The default value for this value as set in the template is White (fff is the hexadecimal code for White) and the current value too is set to White.
Hey, this post is getting too Technical! Let me give you a break and during this time find out some information that would help you to understand the CSS section that I will be discussing tomorrow.
The next post will dicuss the CSS and then I will give you some tips on adding your own Header Image and Removing the Navbar.
Happy Learning.
Those who missed out the first part of the series can find it here
0 comments :
Post a Comment