Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).
Mostrando postagens com marcador Colunas. Mostrar todas as postagens
Mostrando postagens com marcador Colunas. Mostrar todas as postagens
Como fazer um template para o Blogger VI - Post
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:
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):
<div id='content-wrapper'>
</div> <!-- end content-wrapper -->
</div>
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:
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:
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
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
O correspondente no CSS para a div main-wrapper é este trecho do código:
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 :
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
Leia Mais
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
Como dividir os posts em duas colunas
Esta eu aprendi no excelente Blogger Buster: como dividir seus posts em duas colunas. Era algo que eu vinha tentando a muito tempo, sem sucesso. No final das contas, a Amanda resolveu a questão de maneira muito simples do que eu vinha tentando (ainda bem!).
Antes de começar, eu deixo a sugestão de que você crie um blog de testes e não tente nenhuma alteração no seu blog atual. Crie um blog de testes e coloque nele o template Mínima, que o Blogger oferece.
Para que você entenda do que este tutorial trata, clique aqui (meu blog de testes) e veja as postagem divididas em duas colunas. Esta divisão aparecerá apenas na página incial do seu blog. O uso do hack Leia Mais é opcional e eu usei ele no meu blog de testes para converter um template do wordpress. Ele não é necessário, ok?
Após criar seu blog de testes com o template Mínima, faça as seguintes alterações no CSS:
#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Originalmente o template Mínima tem uma Outer-Wrapper com largura 660px; mude para 940px como mostro acima, em destaque.
#main-wrapper {
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 */
}
Deixe main-wrapper com 620px de largura e a sidebar com 300px de largura:
#sidebar-wrapper {
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 */
}
Remova de header-wrapper e footer-wrapper a linha que determina a largura:
#header-wrapper {
border:1px solid $bordercolor;
}
#footer {
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Acrescente no código CSS (pode ser logo após Outer-Wrapper) o seguinte código:
#blog-pager {
width: 600px;
clear: both;
text-align: center;
}
Agora vamos posicionar melhor a data dos posts. Clique em Expandir Modelo de Widget e procure o seguinte código:
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
Corte a parte em vermelho e cole imediatamente após:
<a expr:name='data:post.id'/>
Feitas estas modificações, copiei o código abaixo:
<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>
e cole imediatamente após </b:skin>
Visualize e você verá que na página inicial seus posts estarão divididos em duas colunas!
Para que as imagens que você usar em seus posts não ultrapassem a largura das colunas na página inicial, você pode estabelecer uma dimensão fixa para elas (nos posts internos elas aparecerão no tamanho real), bastando acrescentar o que está em vermelho:
<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
.post-body img {width: 280px;}
</style>
</b:if>
Esta medida para a largura da imagem pode ser alterada ao seu gosto. No caso do meu blog de testes eu ainda determinei que as imagens apareçam sempre à esquerda do texto, incluindo a linha: float:left; Também determinei uma altura fixa para cada coluna (cada bloco de texto) acrescentando a linha em destaque:
.post {width: 310px; height:220px;........
Isto por que estou usando o hack Leia Mais, que é opcional.
Leia Mais
Antes de começar, eu deixo a sugestão de que você crie um blog de testes e não tente nenhuma alteração no seu blog atual. Crie um blog de testes e coloque nele o template Mínima, que o Blogger oferece.
Para que você entenda do que este tutorial trata, clique aqui (meu blog de testes) e veja as postagem divididas em duas colunas. Esta divisão aparecerá apenas na página incial do seu blog. O uso do hack Leia Mais é opcional e eu usei ele no meu blog de testes para converter um template do wordpress. Ele não é necessário, ok?
Após criar seu blog de testes com o template Mínima, faça as seguintes alterações no CSS:
#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Originalmente o template Mínima tem uma Outer-Wrapper com largura 660px; mude para 940px como mostro acima, em destaque.
#main-wrapper {
width: 620px;
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 */
}
Deixe main-wrapper com 620px de largura e a sidebar com 300px de largura:
#sidebar-wrapper {
width: 300px;
float: $endSide;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 */
}
Remova de header-wrapper e footer-wrapper a linha que determina a largura:
#header-wrapper {
width:660px;
margin:0 auto 10px;border:1px solid $bordercolor;
}
#footer {
width:660px;
clear:both;margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Acrescente no código CSS (pode ser logo após Outer-Wrapper) o seguinte código:
#blog-pager {
width: 600px;
clear: both;
text-align: center;
}
Agora vamos posicionar melhor a data dos posts. Clique em Expandir Modelo de Widget e procure o seguinte código:
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/><b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
Corte a parte em vermelho e cole imediatamente após:
<a expr:name='data:post.id'/>
Feitas estas modificações, copiei o código abaixo:
<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>
e cole imediatamente após </b:skin>
Visualize e você verá que na página inicial seus posts estarão divididos em duas colunas!
Para que as imagens que você usar em seus posts não ultrapassem a largura das colunas na página inicial, você pode estabelecer uma dimensão fixa para elas (nos posts internos elas aparecerão no tamanho real), bastando acrescentar o que está em vermelho:
<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
.post-body img {width: 280px;}
</style>
</b:if>
Esta medida para a largura da imagem pode ser alterada ao seu gosto. No caso do meu blog de testes eu ainda determinei que as imagens apareçam sempre à esquerda do texto, incluindo a linha: float:left; Também determinei uma altura fixa para cada coluna (cada bloco de texto) acrescentando a linha em destaque:
.post {width: 310px; height:220px;........
Isto por que estou usando o hack Leia Mais, que é opcional.
Postagem dividida em colunas
Este truque de dividir a postagem em duas colunas paralelas, eu encontrei no blog Templates e Acessórios, que consulto sempre.
Como achei a dica muito legal, decidí dividir com vocês. É muito fácil realmente de aplicar e você tem a liberdade de usar apenas em determinadas postagens.
Basta inserir em sua postagem o código:
<div style="float: left; WIDTH: 45%">Aqui o Texto da Coluna da Esquerda</div>
<div style="float: right; WIDTH: 45%">Aqui o Texto da Coluna da Direita</div>
<divstyle="clear: both"></div>
Lembrando que você deverá colar este código apenas nas postagens que desejar dividir.
Alinhar as colunas no modo layout
Algumas vezes pegamos alguns templates onde no modo Layout/Modelo, as colunas aparecem desalinhadas, geralmente uma coluna 'desce', apesar de visualizarmos o template corretamente.
Para corrigir este problema, vá em Editar HTML-> e cole antes de ]]></b:skin>:
Se no seu template a largura de outer-wrapper é 900px, coloque este valor onde está indicado. Salve a modificação e veja o resultado em Layout :
Leia Mais
Para corrigir este problema, vá em Editar HTML-> e cole antes de ]]></b:skin>:
body#layout #outer-wrapper {
width: aqui a largura de outer-wrapper em px;
margin-right: 0px;
margin-left: 0px;
}
Se no seu template a largura de outer-wrapper é 900px, coloque este valor onde está indicado. Salve a modificação e veja o resultado em Layout :
- Este procedimento não modifica o template, apenas a visualização em Layout/Modelo.
Alinhando as colunas e o Texto no blog
Eu ensinei como adicionar coluna nos templates, mas acho que me esquecí de um detalhe importante que é o alinhamento das colunas, ou seja, os espaços entres elas. O que está acontecendo é que vejo muito blog onde uma coluna foi adicionada, mas ela acaba ficando grudada na coluna do post. Então vou ensinar a alinharem, não só a coluna, como os textos.
Vou usar, novamente, o Template Mínima (do Blogger), como exemplo.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
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 */
}
Recapitulando: Outer-wrapper é a largura total do template, por isso, ao acrescentar uma coluna, você deve somar os valores da largura de todas as colunas e o valor total não pode ultrapassar o valor da Outer-Wrapper (width= largura). Aqui, por padrão, a largura total é só de 660px e para inserir uma nova coluna é preciso aumentar este valor, ou a coluna desce.Vamos aumentar para 850px e inserir uma nova coluna de 200px. Vai ficar assim:
410px (main) + 220px (sidebar) + 200px (newsidebar) = 830px
No meu exemplo ficou uma sobra de 20px e a nova coluna que inserí à esquerda, ficou colada na coluna do post:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
border: 1px solid $bordercolor;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
border: 1px solid $bordercolor;
float: right;
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 */
}
#newsidebar-wrapper {
width: 200px;
border: 1px solid $bordercolor;
float: left;
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 */
}
Veja a imagem correspondente (clique para ampliar):
Veja que só inserindo coluna sem determinar margin, a nova coluna e a coluna do post ficaram grudadas. Vamos arrumar isto:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
border: 1px solid $bordercolor;
margin-left: 7px;
border: 1px solid $bordercolor;
float: left;
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 */
}
#sidebar-wrapper {
width: 210px;
margin-right: 5px;
border: 1px solid $bordercolor;
float: right;
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 */
}
#newsidebar-wrapper {
width: 200px;
margin-left: 5px;
border: 1px solid $bordercolor;
float: left;
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 */
}
Veja o que eu fiz: empurrei as duas colunas laterais a uma distância de 5px das margens e coloquei uma margem de 7px da coluna do post para a esquerda. O que aconteceu? Uma das colunas desceu, por que extrapolei a conta: 5px+5px+7px= 17px. Aí você me diz, mas não era uma folga de 20 px? Era, se eu não estivesse usando bordas. Veja que todas as colunas tem 1px de borda, 1px cada lado=2px e somando as tres colunas=8px a mais na nossa conta. O que eu fiz? Repare que neste ultimo código a sidebar está agora com 210px e não mais com 220px como antes. Ficou assim:
Problema de coluna resolvido e sem massagem... (não resistí mrgreen )
Agora vamos para o texto. Você vê na imagem que o texto está grudado nas bordas por que os templates do Blogger, principalmente o Mínima, não tem margem nenhuma nas colunas, Então vamos colocar. Primeiro o do post. Encontre este código:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Apague os valores em margin e coloque:
margin: 10px;
Agora procure este trecho, que se refere as colunas sidebar e newsidebar:
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
onde estiver margin, apague os valores e coloque 5px. O resultado até agora é esse:
Bem melhor, né? Mas olha como o título do blog está estreito em proporção ao template novo...Vamos arrumar isto também!
encontre este trecho:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Modifique o valor de width para um que corresponda à medida nova do template. No meu exemplo eu coloquei 840px;. Ficou assim:
Bem melhor do que no começo, não?
Leia Mais
Vou usar, novamente, o Template Mínima (do Blogger), como exemplo.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
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 */
}
Recapitulando: Outer-wrapper é a largura total do template, por isso, ao acrescentar uma coluna, você deve somar os valores da largura de todas as colunas e o valor total não pode ultrapassar o valor da Outer-Wrapper (width= largura). Aqui, por padrão, a largura total é só de 660px e para inserir uma nova coluna é preciso aumentar este valor, ou a coluna desce.Vamos aumentar para 850px e inserir uma nova coluna de 200px. Vai ficar assim:
410px (main) + 220px (sidebar) + 200px (newsidebar) = 830px
Inserindo a coluna, não esqueça de posiciona-la (float) e tenha atenção para que, quando se insere uma nova coluna, ela está vazia (não tem elementos de página), portanto, quando você visualizar não vai ver nada e a coluna do post vai tomar o lugar dela. Explicando melhor: você tem um Mínima e colocou uma nova coluna com float: left; mas visualizou e o que estava à esquerda era a coluna do post. Salve, vá em Modelo e você verá a coluna lá. Coloque algum elemento de página e pronto, a sidebar aparece e a coluna do post vai para o centro da página.
No meu exemplo ficou uma sobra de 20px e a nova coluna que inserí à esquerda, ficou colada na coluna do post:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
border: 1px solid $bordercolor;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
border: 1px solid $bordercolor;
float: right;
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 */
}
#newsidebar-wrapper {
width: 200px;
border: 1px solid $bordercolor;
float: left;
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 */
}
Veja a imagem correspondente (clique para ampliar):
Veja que só inserindo coluna sem determinar margin, a nova coluna e a coluna do post ficaram grudadas. Vamos arrumar isto:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
border: 1px solid $bordercolor;
margin-left: 7px;
border: 1px solid $bordercolor;
float: left;
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 */
}
#sidebar-wrapper {
width: 210px;
margin-right: 5px;
border: 1px solid $bordercolor;
float: right;
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 */
}
#newsidebar-wrapper {
width: 200px;
margin-left: 5px;
border: 1px solid $bordercolor;
float: left;
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 */
}
Veja o que eu fiz: empurrei as duas colunas laterais a uma distância de 5px das margens e coloquei uma margem de 7px da coluna do post para a esquerda. O que aconteceu? Uma das colunas desceu, por que extrapolei a conta: 5px+5px+7px= 17px. Aí você me diz, mas não era uma folga de 20 px? Era, se eu não estivesse usando bordas. Veja que todas as colunas tem 1px de borda, 1px cada lado=2px e somando as tres colunas=8px a mais na nossa conta. O que eu fiz? Repare que neste ultimo código a sidebar está agora com 210px e não mais com 220px como antes. Ficou assim:
Problema de coluna resolvido e sem massagem... (não resistí mrgreen )
Agora vamos para o texto. Você vê na imagem que o texto está grudado nas bordas por que os templates do Blogger, principalmente o Mínima, não tem margem nenhuma nas colunas, Então vamos colocar. Primeiro o do post. Encontre este código:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Apague os valores em margin e coloque:
margin: 10px;
Agora procure este trecho, que se refere as colunas sidebar e newsidebar:
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
onde estiver margin, apague os valores e coloque 5px. O resultado até agora é esse:
Bem melhor, né? Mas olha como o título do blog está estreito em proporção ao template novo...Vamos arrumar isto também!
encontre este trecho:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Modifique o valor de width para um que corresponda à medida nova do template. No meu exemplo eu coloquei 840px;. Ficou assim:
Bem melhor do que no começo, não?
Bordas arredondadas nas colunas
Clique em Editar HTML. Cole no seu template, antes de ]]>:
#sidebarbottom {
background:url("link da imagem do topo da coluna") no-repeat left top;
margin:0 0 px;
padding: 0 0 0px;
}
#sidebartop{
background:url("link da imagem da base da coluna") no-repeat left bottom;
margin:0 0 px;
padding:0 0 0px;
}
Salve o template. Se você visualizar, não verá nenhuma mudança (não insira ainda nenhum link de imagem onde está indicado, por enquanto). Agora encontre este trecho do código (não é necessário clicar em Expandir Modelo de Widget) e insira o que está em vermelho:
<div id='sidebar-wrapper'>
<div id='sidebartop'><div id='sidebarbottom'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div></div></div>
Salve o template. Agora é com a parte de edição de imagem. Abra seu editor de imagem e crie uma imagem com a largura da sidebar e altura 100px. Preencha com a cor que será a cor do background da PÁGINA (e não da coluna, ok?).
Depois de preencher com a cor de fundo da página do seu blog, escolha a seleção com bordas arredondadas do seu editor de imagem.
Agora selecione o quadrado como na próxima imagem e preencha a seleção com a cor que usará no fundo da SIDEBAR:
Ficou aquela pontinhas alí com a cor do fundo da página, ok? Agora corte a imagem próximo ao final desta curva da borda (mas não vá cortar demais, heim?)
Salve esta imagem como top.jpg:
Agora inverta a imagem Verticalmente e salve como bottom.jpg:
Hospede as imagens e insira lá no primeiro código que eu passei, dentro das marcações correspondentes para topo e bottom. Visualize. Pode ser que uma das imagens (ou, com muito azar, ambas) esteja desalinhada e seja preciso fazer alterações no valor de padding. Vá alterando valores (5px, 10px) e visualizando, até se alinharem. Lembre-se de que a visualização no Firefox não é a mesma do Internet Explore, por isso teste pelo menos nestes dois principais navegadores.
Leia Mais
#sidebarbottom {
background:url("link da imagem do topo da coluna") no-repeat left top;
margin:0 0 px;
padding: 0 0 0px;
}
#sidebartop{
background:url("link da imagem da base da coluna") no-repeat left bottom;
margin:0 0 px;
padding:0 0 0px;
}
Salve o template. Se você visualizar, não verá nenhuma mudança (não insira ainda nenhum link de imagem onde está indicado, por enquanto). Agora encontre este trecho do código (não é necessário clicar em Expandir Modelo de Widget) e insira o que está em vermelho:
<div id='sidebar-wrapper'>
<div id='sidebartop'><div id='sidebarbottom'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div></div></div>
Salve o template. Agora é com a parte de edição de imagem. Abra seu editor de imagem e crie uma imagem com a largura da sidebar e altura 100px. Preencha com a cor que será a cor do background da PÁGINA (e não da coluna, ok?).
Depois de preencher com a cor de fundo da página do seu blog, escolha a seleção com bordas arredondadas do seu editor de imagem.
Agora selecione o quadrado como na próxima imagem e preencha a seleção com a cor que usará no fundo da SIDEBAR:
Ficou aquela pontinhas alí com a cor do fundo da página, ok? Agora corte a imagem próximo ao final desta curva da borda (mas não vá cortar demais, heim?)
Salve esta imagem como top.jpg:
Agora inverta a imagem Verticalmente e salve como bottom.jpg:
Hospede as imagens e insira lá no primeiro código que eu passei, dentro das marcações correspondentes para topo e bottom. Visualize. Pode ser que uma das imagens (ou, com muito azar, ambas) esteja desalinhada e seja preciso fazer alterações no valor de padding. Vá alterando valores (5px, 10px) e visualizando, até se alinharem. Lembre-se de que a visualização no Firefox não é a mesma do Internet Explore, por isso teste pelo menos nestes dois principais navegadores.
Adicionar uma coluna no template
Usando um template Mínima do Blogger como base para este tutorial, entenda que a estrutura das colunas se apresenta desta forma, no CSS:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
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 */
}
Onde Outer-Wrapper é a maior DIV do template e contém todas as outras (header, main, sidebar, footer) Main-wrapper é a coluna do post e sidebar-wrapper é a coluna lateral (perfil).
Para adicionar uma nova coluna oposta a sidebar, é necessário primeiro criar espaço para ela dentro de Outer-wrapper. No template Mínima a largura de Outer-Wrapper (a largura de uma coluna está em width) é de 660px e a soma da largura de main-wrapper (410px) e sidebar-wrapper(220px) dá um total de 630px Veja a imagem abaixo:
Então, para acrescentar uma nova coluna é preciso aumentar o espaço, a largura de Outer-Wrapper.
Para acrescentar uma nova sidebar, copie o código abaixo e acrescente logo após os códigos para sidebar-wrapper:
#newsidebar-wrapper {
margin-left: 0px;
width: 220px;
float: left;
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 */
}
Note que sidebar-wrapper tem float:right (flutua à direita) e newsidebar-wrapper tem que ter float:left (flutuação à esquerda).
Lembre-se: a soma da largura do post mais as duas colunas laterais tem que ser menor do que o valor width de Outer-Wrapper. Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.
Agora desça a página até encontrar esta parte do código (HTML):
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>
e cole imediatamente ANTES este:
<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'></b:section> </div>
Importante: No HTML os elementos (DIVs) precisam ser dispostos na ordem estabelecida no CSS. Ou seja, se Newsidebar tem float: left; (flutuação à esquerda) deve ser colocado no HTML antes da DIV Main-Wrapper, ficando assim:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Leia também: Como alinhar as colunas e textos do blog
Leia Mais
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
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 */
}
Onde Outer-Wrapper é a maior DIV do template e contém todas as outras (header, main, sidebar, footer) Main-wrapper é a coluna do post e sidebar-wrapper é a coluna lateral (perfil).
Para adicionar uma nova coluna oposta a sidebar, é necessário primeiro criar espaço para ela dentro de Outer-wrapper. No template Mínima a largura de Outer-Wrapper (a largura de uma coluna está em width) é de 660px e a soma da largura de main-wrapper (410px) e sidebar-wrapper(220px) dá um total de 630px Veja a imagem abaixo:
Então, para acrescentar uma nova coluna é preciso aumentar o espaço, a largura de Outer-Wrapper.
Para acrescentar uma nova sidebar, copie o código abaixo e acrescente logo após os códigos para sidebar-wrapper:
#newsidebar-wrapper {
margin-left: 0px;
width: 220px;
float: left;
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 */
}
Note que sidebar-wrapper tem float:right (flutua à direita) e newsidebar-wrapper tem que ter float:left (flutuação à esquerda).
Lembre-se: a soma da largura do post mais as duas colunas laterais tem que ser menor do que o valor width de Outer-Wrapper. Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.
Agora desça a página até encontrar esta parte do código (HTML):
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>
e cole imediatamente ANTES este:
<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'></b:section> </div>
Importante: No HTML os elementos (DIVs) precisam ser dispostos na ordem estabelecida no CSS. Ou seja, se Newsidebar tem float: left; (flutuação à esquerda) deve ser colocado no HTML antes da DIV Main-Wrapper, ficando assim:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Leia também: Como alinhar as colunas e textos do blog
Aumentar largura das colunas
Para aumentar a largura das colunas do template:
Procure no código:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
Leia Mais
Procure no código:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
#main-wrapper {
margin-left: 5px;
width: 550px;
float: left;
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 */
}
#sidebar-wrapper {
margin-right: 0px;
width: 250px;
float: right;
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 */
}
Tudo o que está contido em #main-wrapper se refere à coluna do post. Assim, para aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão emWIDTH.
Tudo o que está contido em #sidebar-wrapper se refere a coluna do perfil. Aqui também os valores de WIDTH devem ser alterados. Cuidado para não desconfigurar completamente o template: obedeça a largura que está estipulada em #outer-wrapper , sem ultrapassá-la, pois todos os elementos da página estão contidos em Outer-wrapper.
Atenção!
Muitas vezes, o que vemos em um navegador não é o mesmo que vemos em outro. Às vezes um template parece perfeito no Firefox e está horrivelmente desproporcional no Internet Explore e vice-versa. Toda vez que fizer qualquer alteração em seu template, tente visualizá-lo em mais de um navegador, para ter certeza de que você não é o único a achar o template lindo....
margin-left: 5px;
width: 550px;
float: left;
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 */
}
#sidebar-wrapper {
margin-right: 0px;
width: 250px;
float: right;
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 */
}
Tudo o que está contido em #main-wrapper se refere à coluna do post. Assim, para aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão emWIDTH.
Tudo o que está contido em #sidebar-wrapper se refere a coluna do perfil. Aqui também os valores de WIDTH devem ser alterados. Cuidado para não desconfigurar completamente o template: obedeça a largura que está estipulada em #outer-wrapper , sem ultrapassá-la, pois todos os elementos da página estão contidos em Outer-wrapper.
Atenção!
Muitas vezes, o que vemos em um navegador não é o mesmo que vemos em outro. Às vezes um template parece perfeito no Firefox e está horrivelmente desproporcional no Internet Explore e vice-versa. Toda vez que fizer qualquer alteração em seu template, tente visualizá-lo em mais de um navegador, para ter certeza de que você não é o único a achar o template lindo....
Alterar a aparência das colunas
Para fazer alterações de bordas e plano de fundo nas colunas do template, procure no código do mesmo:
#main-wrapper {
background-color:;
border: ;
margin-left: 0px;
width: 400px;
float: left;
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 */
}
#sidebar-wrapper {
background-color:;
border: ;
margin-right: 0px;
width: 165px;
float: right;
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 */
}
Acrescente as linhas em negrito, se já não existirem no seu código
Onde #main-wrapper é a coluna de postagem e#sidebar-wrapper a do perfil.
Se você deseja colocar uma cor como plano de fundo da coluna use background-color: e o código da cor. Se deseja uma imagem, coloque background: url(endereço da imagem) repeat;
Em border você estabelecerá, como vimos anteriormente a largura, cor e textura da borda. Aqui valem os mesmos procedimentos. Se você deseja colocar borda somente no topo e em uma das laterais, é só colocar:
border-top: 1px solid #00000; (largura e cor somente como exemplos)
border-left: 1px solid #000000;
Assim a coluna terá borda somente no topo e na lateral esquerda. Se deseja borda em toda volta da coluna é só colocar:
border: 1px solid #000000; (sem precisar estabelecer onde a borda deve aparecer.)
Width estabelece a largura da coluna.
Assinar:
Comentários (Atom)