Como fazer um template para o Blogger VI - Post
Antes, vamos recapitular um pouco do conteúdo da primeira parte:
Um documento HTML se compõe da seguinte estrutura básica:
<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.
<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>
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.
O trecho do HTML que corresponde ao cabeçalho da página é este:
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)<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>
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
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.<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>
O correspondente no CSS para a div main-wrapper é este trecho do código:
#main-wrapper {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).
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 */
}
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
12 comentários:
nossa, que legak, mais um da série!!
depois eu volto pra ler com mais atenção!!
Valeu Ariane!!
ariane, essa sua série é perfeita. Nenhum blog chega aos seus pés. Você merece milhões de parabéns. Seu blog é perfeito, eu vejo ele todo, ele me ajuda muitissimo mesmo !
Eu amei esse degrade rosa+branco .. perfeito !
só faltava um lilás+roxo escuro
hahaha
beijões!
Ariane, você não tenha idéia de como está me ajudando! Essa sua série é realmente perfeita, você explica de um jeito fácil de se entender e enquanto esperamos novos posts você nos deixa umas tarefinhas que nos fazem aprender sozinhos ao invés de esperar tudo pronto. Acompanho este blog quase todos os dias e passo horas por aqui. Muito obrigada pela ajuda!
Ah e aproveitando, gostaria de dar uma sugestão (que é mais um interesse próprio) que é, se poderia postar um tutorial de como adicionar um calendário no blog, um simples como o deste site aqui, se puder agradeceria muito, se não, espero pelo próximo Como Fazer um Template para o Blogger. Muito obrigada e até!
Tem como criar no photoshop
Ola, boa dica valeuu,.
Muito bom, bem explicado!
Obrigado!
Achei via twitter.
Boa tarde. Ariane,venho pedir sua ajuda e opinião. Estou tentando fazer com que as postagens não apareçam na página inicial.Posteriormente , tentei criar duas áreas(colunas esquerda e direita) de widget onde eu por tabela e demais construiria da forma como nesta página(http://eptv.globo.com/) sobre a área de postagem.Estas só apareceriam na página inicial.Mas não consegui. Desde já agradeço!
Sou Iniciante e adorei as dicas, valeu muito!!!!
OI...que bom achar teu blog.Mas confesso que depois de dois anos sem fazer nenhum template, to penando p caramba pra entender este novo blogger.Parece que é outro mundo...rsssss.....
nossa, esse blog SALVOU MINHA VIDA! eu segui todo o tutorial e consegui deixar meu blog lindo!! valeuuuuuhuuuuu
Olá Ariane.
Gostaria de saber como personalizar o Footer do Blogger.
Deixar ocupando todo o espaço do rodape.
Muito Obrigado.
Sinceramente só tenho a agradecer a esses seus posts cara, meu pai do seu! são divinos. Acredito que levará um tempo para entender o código como vc, pois acho que é sempre melhor explicações em vídeos, mas enfim, obrigada e tentarei aplicar seu ensinamento :)
Postar um comentário
Os comentários são moderados.