Jumat, 06 Juli 2012
5 The main part of the blogger template
5 the main part of the blogger template
Having a blog is fun, but sometimes we still find it difficult when we want to edit the template. Although it has been a lot written tutorials.
Well ..., to overcome the above problems, we should know and understand in advance that there are five main parts to the blogger template.
OK, just ...
Below are 5 main parts in the following example of an existing blogger template:
A. XML declarations
XML or eXtensible Markup Language is a standard declaration that defines the version of the XML header. XML declarations are located at the top that looks like the following:
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html 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 '>
2. HEAD, TITLE and META TAG
Head element is a container in which there are elements - elements that can instruct the browser to find scripts, style sheets, or CSS, title, meta data information that includes meta tag description and keywords meta tags, etc..
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<meta content='N4RVxgZiRiM2VUDOtv5yhKWJn628E3qhZqOcUNnfqus' name='google-site-verification'/>
<META Content='c2ad550e993554a3' name='y_key'> </ META>
<! - 0cUQtmDWaVCyDtpxS4TBa8B64Iw ->
<meta content='0cUQtmDWaVCyDtpxS4TBa8B64Iw' name='alexaVerifyID'/>
<title> How to create a website | How to create a blog | Blogger Tutorial </ title>
<Meta content = 'web, free web, website, free website, websites, free sites, sites website.situs web.blog, blogger, blogspot, create a blog, blog tutorial, blogger tutorial, tutorials, free tutorial, blogspot tutorial, tutorial blogspot blogger, blog tutorial blogger, blogger tips, blog widgets, blogger widget, widget blogspot, blogspot blogger templates, blogger themes, html, css, javascript, jquery, business opportunities, opportunities, online business, 0cUQtmDWaVCyDtpxS4TBa8B64Iw 'name =' keywords' / >
<Meta content = "Learn how to create a web from here using blogspot blogger, but free is also more interactive with visitors. There is a chat box to discuss the form of tips, tricks, tutorial blog, blogspot, blogger, css, html, javascript etc.. 'Name =' description '/>
<meta content='Noer Cholis' name='author'/>
<meta content='Noer Cholis' name='ownership'/>
<meta content='all,follow' name='robots'/>
<meta content='General' name='Rating'/>
<meta content='never' name='Expires'/>
<meta content='Indosesia' name='Language'/>
<meta content='Global' name='Distribution'/>
<meta content='INDEX,FOLLOW' name='Robots'/>
<meta content='4 Days' name='Revisit-after'/>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<meta content='width=1100' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
3.Variable Definitions
Definitions of variables needed for classification or to determine the value, color, of some of the attributes that are considered equal.
<b:skin> <! [CDATA [/ *
/ * Variable definitions
====================
<Variable name = "bgcolor" description = "Page Background Color"
type = "color" default = "# dd9" value = "# CAF99B">
<Variable name = "textcolor" description = "Text Color"
type = "color" default = "# 333" value = "# 333333">
<Variable name = "linkcolor" description = "Link Color"
type = "color" default = "# 684" value = "# 0066CC">
<Variable name = "pagetitlecolor" description = "Blog Title Color"
type = "color" default = "# 874" value = "# 000000">
.............................
4. CSS (Cascading Style Sheet)
CSS or Cascading Style Sheets are style sheet language that is used to set the display of the document.
body {
background: $ bgcolor;
margin: 0;
color: $ textcolor;
font: x-small Georgia Serif;
font-size / ** / :/ ** / small;
font-size: / ** / small;
text-align: center;
}
a: link {
color: $ linkcolor;
text-decoration: none;
}
a: visited {
color: $ visitedlinkcolor;
text-decoration: none;
}
a: hover {
color: $ titlecolor;
text-decoration: underline;
}
a img {
border-width: 0;
}
/ * Header
-----------------------------------------------
* /
...............
/ * Footer
----------------------------------------------- * /
# Footer {
width: 950px;
clear: both;
margin: 0 auto;
padding-top: 15px;
line-height: 1.6em;
text-transform: uppercase;
letter-spacing: .1 em;
text-align: center;
}
/ ** Page structure tweaks for layout editor wireframe * /
body # layout # header {
margin-left: 0px;
margin-right: 0px;
}
]]> </ B: skin>
</ Head>
5.Body
Tag that defines the body of the document, ie all elements contain all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc..
<body>
<div id='outer-wrapper'> <div id='wrap2'>
<! - Skip links for text browsers ->
<span id='skiplinks' style='display:none;'>
<a href='#main'> skip to main </ a> |
<a href='#sidebar'> skip to sidebar </ a>
</ Span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Cara Create Web Gratis' type='Header'/>
<b:widget id='HTML17' locked='false' title='' type='HTML'/>
<b:widget id='HTML19' locked='false' title='' type='HTML'/>
</ B: section>
</ Div>
<div id='content-wrapper'>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML6' locked='false' title='Recent Post' type='HTML'/>
<b:widget id='LinkList2' locked='false' title='Arsip' type='LinkList'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</ B: section>
</ Div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='' type='HTML'/>
<b:widget id='HTML20' locked='false' title='Search 'type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</ B: section>
</ Div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='HTML10' locked='false' title='' type='HTML'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='HTML15' locked='false' title='' type='HTML'/>
</ B: section>
</ Div>
<! - Spacer for skins That want sidebar and main to be the same height ->
<div class='clear'> </ div>
</ Div> <! - End content-wrapper ->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
<b:widget id='HTML12' locked='false' title='Feed Directories' type='HTML'/>
</ B: section>
</ Div>
</ Div> </ div> <! - End outer-wrapper ->
<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol)? "https://ssl.": "http://www.");
document.write (unescape ("% 3Cscript src = '" + gaJsHost + "google-analytics.com/ga.js' type = 'text / javascript'% 3E% 3C/script% 3E"));
</ Script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker ("UA-8271964-1");
pageTracker._trackPageview ();
} Catch (err) {} </ script>
</ Body>
</ Html>
So the whole explanation and examples of the contents of each section, can be summarized as follows:
<html>
XML (eXtensible Markup Language)
<head>
Titles and meta data
Variable Definitions
Script
CSS (Cascading Style Sheet)
</ Head>
<body>
The entire document is displayed.
</ Body>
</ Html>
By knowing the five main sections which are in the template, so when we're going to edit the template, we would not be difficult anymore. Because we already know the part - the part which we will edit.
May be useful ....
Do not forget to take some time for you like it ...... thanks.
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar