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:
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'>
<!-- 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='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> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</div> <!-- end outer-wrapper -->
</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:
<!-- 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>
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.
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='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data: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;'/> <!-- clear for photos floats -->
</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='data: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='data: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='data: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).
Exemplo1 :
(clique para ampliar a 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(http://i30.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:
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:
Exemplo2: degrade (gradiente) no background de main-wrapper:
#main-wrapper {
width: 700px;
background: #fff url(http://i25.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:
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.
Leia também:
Diferença entre margin e padding
