Como fazer template parte1

por **§ICARO§** Sáb Mar 13, 2010 8:01 am

Continuando a série de artigos sobre Como criar um template para o Blogger, nesta sexta parte mostrarei uma idéia geral sobre as colunas do template Mínima e como dar estilo ao post.

Antes, vamos recapitular um pouco do conteúdo da primeira parte:

Um documento HTML se compõe da seguinte estrutura básica:

<html>
<head>
cabeçalho: aqui está contido o estilo da página - CSS
<head/>
<body>
corpo - aqui está contida a estrutura da página, seus elementos.
</body>
</html>

O código CSS, que dá estilo à página, começa com : <b:skin><![CDATA[/* e sua tag de fechamento é ]]></b:skin>. Tudo o que estiver contido entre estas duas tags refere-se ao estilo da página (aparência) e não à sua estrutura. Não é possível criar um novo elemento (uma coluna, por exemplo) com CSS. O CSS irá apenas determinar a aparência deste bloco, deste elemento.
Imediatamente após o fechamento da tag do CSS, encontra-se </head>, fechando o cabeçalho da página e imediatamente após </head> está <body>, dando início ao corpo do documento:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Se entre <head> e </head> está contido o estilo da página com o código CSS, entre <body> e </body> encontra-se a estrutura do template.
Visão do conteúdo de body no template Mínima (sem expandir modelo de widget):
<body>
<div id='outer-wrapper'>
<div id='wrap2'>

<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='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Toda Cute (Cabeçalho)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'/>
</b:section>
</div>
</div> 
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</div> 
</body>
</html>

Colori as tags de abertura e fechamento das divs principais para que possam perceber a 'hierarquia', ou ainda, como alguns blocos estão contidos em outros. Entre <body> e </body> a maior div que engloba todas as outras é outer-wrapper, seguida de wrap2 (que não tem estilo definido no CSS) e dentro destes 2 blocos encontra-se:

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

Skiplinks são links com âncoras que levam diretamente para o conteúdo da página, pulando qualquer outro menu ou links que possam existir entre o topo da página e os textos, ou sidebar. É uma alternativa para quem tem deficiência visual e usa um leitor de tela. Você pode obter informações detalhadas sobre Skip Navigation aqui. No template Mínima o trecho style='display:none' esconde estes links e para que apareçam em seu blog, basta deletar este mesmo trecho.

por **§ICARO§** Sáb Mar 13, 2010 8:08 am

Cabeçalho
O trecho do HTML que corresponde ao cabeçalho da página é este:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Toda Cute (Cabeçalho)' type='Header'/>
</b:section>
</div>

O correspondente no CSS é #header-wrapper, #header-inner, #header, #header h1 (título do blog), #header a, #header a:hover (links do cabeçalho - título) , #header .description (descrição do blog)

Content-Wrapper - Esta é a div que engloba as colunas do post e sidebar do blog. No template Mínima não há estilo para content-wrapper. Se você quiser dar algum estilo à esta div terá que acrescentar no CSS:

#content-wrapper{ ....estilo......}

Crosscol-wrapper
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Esta é uma div que fica acima das colunas e que também não tem estilo definido no CSS, apenas dentro do código html, em style='text-align:center' (que centraliza qualquer widget). Para fazer com que esta div apareça na página Layout e possa receber um widget, troque onde está no por yes e salve a modificação. Para dar estilo a crosscol-wrapper, acrescente no CSS:

#crosscoll-wrapper {....estilo...}
Main-wrapper, coluna do post

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

Main-wrapper é a div que recebe o widget Blog1, o widget de postagens do Blogger. Para que a div main-wrapper possa receber outros widgets, troque no por yes e será possível acrescentar widgets antes ou depois dos posts. Para destrancar o widget de posts (pois ele é fixo no template), troque onde está locked='true' por locked='false' e você poderá arrastar os posts para a sidebar, por exemplo. Não que mover os posts para a sidebar possa ser interessante, mas este é mais um dado que se pode anotar: para destrancar (e remover) um widget fixo (muitos templates convertidos e modificados vem com widgets fixas), basta trocar true por false.

O correspondente no CSS para a div main-wrapper é este trecho do código:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Entre { e } você poderá acrescentar os estilos que deseja para a coluna de postagem, como background, largura, borda, flutuação (lembrando: float:left, a coluna flutua à esquerda - float:right, a coluna flutua à direita). Todo estilo aqui determinado servirá para a coluna, para a div que recebe o widget de posts (Blog1).

Blog1

Blog1 é o widget fixo em main-wrapper que engloba tudo o que contém o post, da data do artigo à post-footer, o rodapé da postagem, além dos comentários. Para conhecer todas as divs e classes contidas em Blog1 é preciso clicar em Expandir Modelo de Widget, quando todos os códigos 'ocultos' se revelam (o que geralmente desespera um pouco na primeira vez).

Ultimamente muitos códigos novos tem surgido nos templates do Blogger (pelo menos no Mínima, que é o que acompanho), por isso, eu realmente não sei tudo sobre as funções de cada um deles. Também não tenho como explicar aqui cada linha do código que se revela ao expandir o widget, por isso farei um resumo. Daqui em diante sugiro que você acompanhe o texto ao mesmo tempo que observa os códigos que serão mencionados. Crie um blog de testes, escolha o template Mínima, vá em Editar HTML e clique em Expandir Modelo de Widget. Vá procurando a localização dos códigos mencionado. Mostrarei o código html de determinados elementos e seu correspondente no CSS.

Data da postagem - HTML:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Data da Postagem - CSS

h2.date-header {
margin:1.5em 0 .5em;}
e
h2 {
margin:1.5em 0 .75em;
font-size:15px;
line-height: 1.4em;
text-transform:capitalize;
letter-spacing:.2em;
color:$sidebarcolor;}

Para o que não for especificado em h2.date-header valerá o que consta em h2.

Título do Post - HTML

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href=post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href=post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Título do Post -CSS

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Como o título do post é um link, no CSS você encontra estilo para o título (post h3), para o título- link no estado normal (.post a...) e para o título-link no estado hover (quando passa o cursor do mouse sobre).

Post - HTML

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

Post- CSS

.post { /* área ocupada pelo post, o que inclue a data, título, texto e post-footer */
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

.post-body { /* estilo para o texto, área ocupada apenas pelo texto */
margin:0 0 .75em;
line-height:1.6em;
}

.post-body blockquote { /* estilo das citações /*
line-height:1.3em;
}

.post img { /* estilo das imagens do post */
padding:4px;
border:1px solid $bordercolor;
}

Post-Footer - HTML

tag de abertura:
<div class='post-footer'>

tag de fechamento:
</div>

Post-Footer - CSS

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

A div class Post-Footer engloba:

Autor do Post - HTML:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Não há estilo no CSS. Para dar estilo ao link do autor do texto, acrescente no CSS:

.post-author{...aqui os estilos....}

Data do Post - HTML

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href=post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Data do Post - CSS

Não há estilo para a data no template Mínima. Acrescente no CSS:

.timestamp-link{ .... estilo .....}

Link Comentários - HTML

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href=post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Link Comentários - CSS

.comment-link {
margin-$startSide:.6em;
}

Marcadores - HTML

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href=label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Marcadores - CSS

Acrescente no CSS:
.post-labels{ ....estilo ....}

Não vou me estender para além destes elementos ou o post ficará enorme e também confuso, com excesso de informações. Para os outros elementos elaborarei novos tutoriais.

Agora que você conhece o significado destes códigos do HTML, poderá modificar suas posições no template de acordo com sua vontade. Basta selecionar, por exemplo, todo o trecho do html referente aos marcadores, recortar e colar abaixo do trecho para o título do post. Faça diversas experiências, modificando as posições dos códigos e acrescentando estilos diversos (como backgrounds coloridos) para cada um, aumentando a visibilidade do espaço que cada um ocupa na coluna main-wrapper. O interessante é destacar cada item com imagens diferentes, por exemplo, um background para os títulos dos posts e um ícone para os marcadores. Se você destacar um trecho, colar em outro local e receber uma mensagem de erro ou ser impedido de visualizar o blog, provavelmente você nã destacou o trecho completo (que deve ir de <span...> até </span>).

Para colocar um pequeno ícone ao lado de qualquer link (como marcadores ou o link comentários), basta acrescentar no CSS:

.post-labels{background: url(link da imagem do ícone) no-repeat bottom left; padding-left:20px; } (para o ícone aparecer à esquerda do link)

para modificar a posição do link comentários:

.comment-link{float:right} o link aparecerá à direita no final do post.

Você pode ainda dar estilo às listas que criar nos seus textos:

.post ul{ ....estilo ....}
.post li{....estilo .....}

item de uma lista no post com imagem como marcador:

.post li {background: url(link da imagem ) no-repeat center left; padding-left:20px;} (a imagem aparecerá à esquerda do item, como eu uso aqui no meu blog).
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Exemplo1 :
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Neste exemplo eu coloquei uma imagem na coluna #main-wrapper (uma imagem que se repete indefinidamente) e uma cor para o background de post, ficando assim o código:

#main-wrapper {
width: 700px;
background: url(https://2img.net/h/oi30.tinypic.com/kcm36a.jpg) repeat;
border: 2px solid $bordercolor;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.post {
margin:15px 10px;
background: #f5f5f5;
padding:1.5em;
border: 4px solid #c373a4
}
Veja que em post eu estipulei uma margin de 15px para o topo e para a base (o que afasta um post do outro e cria o efeito de 'caixas' onde os posts aparecem), além de uma margem de 10px para a esquerda e direita, o que possibilita visualizar a imagem de fundo colocada em main-wrapper. Se a margem de post for 0 (margin:0px) o efeito é completamente diferente:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Veja que sem margin, o background de main-wrapper não pode ser visto nas laterais do post e um texto aparece imediatamente após o outro, sem nenhum espaço.

Note também que em .post, padding afasta o conteúdo (texto) das bordas:

.post {
margin:15px 10px;
background: #f5f5f5;
padding:1.5em;
border: 4px solid #c373a4
}

Padding com um valor 0em ficaria assim:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Exemplo2: degrade (gradiente) no background de main-wrapper:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
#main-wrapper {
width: 700px;
background: #fff url(https://2img.net/h/oi25.tinypic.com/29cph8n.jpg) repeat-x;
border: 2px solid $bordercolor;
float: $startSide;

Veja que neste exemplo, criei uma imagem dregrade rosa/branco, que se repete na horizontal (repeat-x) e antes do link da imagem coloquei o valor da cor (#fff - branco) do final da imagem:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Use a criatividade e crie estilos diferentes para #main-wrapper e para .post, além dos elementos contidos em Blog1. Recomendo o site do Maujor para aprender noções de CSS e dar estilo aos links e blocos.

Fonte:[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Como fazer template parte1

Como fazer template parte1

Como fazer template parte2