5 Partes de um Template:
A primeira parte de um Template consiste nas declarações:
A 1ª linha é a declaração XML que identifica o documento do tipo XML. A 2ª linha é a declaração. A 3ª é a declaração XHTML que é a versao XML do HTML.
A primeira parte é o incio da 'head', onde temos o titulo e as Metatags:
As Metatags informam os motores de busca do assunto do seu blog e são precisas para que apareçam nas listas.
A terceira parte do template possui as variáveis (Variables Definitions) que são responsáveis pelas declarações das Fonts e Cores:
Aqui a seção 'CDATA' começa e é usada para inserir um documento XML em outro documento XML. A seção 'CDATA' começa com '<[CDATA]' e acaba com ']]>'. O processador XML ignora todas as marcas exceto o ']]>' (o que significa que não é possivel inserir uma nova seção 'CDATA' em outra seção 'CDATA').
A quarta parte do template é a seção 'CSS' (Cascading Style Sheet):
Nota: A seção 'CDATA' terminou aqui.
A quinta e última parte do template é a seção 'body':
A seção de um modelo de Layouts é formada principalmente por seções e widgets. As seções marcam as áreas da página, como a barra lateral, o rodapé etc. Um widget é um elemento de página individual como uma imagem, um blogroll ou qualquer outro item que você pode adicionar na guia "Elementos da página". É possível incluir qualquer tipo de código HTML nas seções no modelo.
Qualquer dúvida PM
A primeira parte de um Template consiste nas declarações:
- Código:
<?xml version="1.0" encoding="UTF-8" ?>
<!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'>
A 1ª linha é a declaração XML que identifica o documento do tipo XML. A 2ª linha é a declaração. A 3ª é a declaração XHTML que é a versao XML do HTML.
A primeira parte é o incio da 'head', onde temos o titulo e as Metatags:
- Código:
<head>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<META content='6UdGiVvyAoLArGpux3xzus9nP4VEkAdsnY8mgwQKg4g=' name='verify-v1'/>
<meta content='[b]Descrição do Blog[/b]' name='Description'/>
<meta content='[b]Palavras-Chave do Blog[/b]' name='keywords'/>
As Metatags informam os motores de busca do assunto do seu blog e são precisas para que apareçam nas listas.
A terceira parte do template possui as variáveis (Variables Definitions) que são responsáveis pelas declarações das Fonts e Cores:
- Código:
<b:skin><![CDATA[/*
Blogger Template Style
Name: Simple
Designer: Xiso
URL: www.forum.animedesign.net
Date: 02 DEZ 2011
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#0000ff">
Aqui a seção 'CDATA' começa e é usada para inserir um documento XML em outro documento XML. A seção 'CDATA' começa com '<[CDATA]' e acaba com ']]>'. O processador XML ignora todas as marcas exceto o ']]>' (o que significa que não é possivel inserir uma nova seção 'CDATA' em outra seção 'CDATA').
A quarta parte do template é a seção 'CSS' (Cascading Style Sheet):
- Código:
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;
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>
</head>
Nota: A seção 'CDATA' terminou aqui.
A quinta e última parte do template é a seção 'body':
- Código:
<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='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Beta Blogger For Dummies (Header)' type='Header'/>
<b:widget id='HTML6' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='HTML10' locked='false' title='CONTACT AUTHOR' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
<b:widget id='HTML4' locked='true' title='' type='HTML'/>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML5' locked='true' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML11' 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='Text1' locked='false' title='' type='Text'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
A seção de um modelo de Layouts é formada principalmente por seções e widgets. As seções marcam as áreas da página, como a barra lateral, o rodapé etc. Um widget é um elemento de página individual como uma imagem, um blogroll ou qualquer outro item que você pode adicionar na guia "Elementos da página". É possível incluir qualquer tipo de código HTML nas seções no modelo.
Qualquer dúvida PM
