Observações importantes...!
Para o "cabeçalho" você deve cortar do início até onde começa a área de escrita de suas postagens, no caso do layout que disponibilizei ficará ASSIM.Para o "meio" você deve cortar uma pequena arte da área de escrita de suas postagens, no caso do layout que disponibilizei ficará ASSIM.
Para o "rodapé" você deve cortar do fim da área de escrita até o termino geral da área de postagens, no caso do layout que disponibilizei ficará ASSIM.
Faça upload das mesmas em um lugar de sua preferência.
É importante que TODAS as imagens tenham a mesma largura (width).
Agora vamos dar início a parte de programação, acesse a página de editar o HTML, dê um CTRL + F e procure por "#main-wrapper {" (sem aspas).
OBSERVAÇÃO: Encare o "main-wrapper" como um "comando geral" da área das postagens, de forma que, é com ele que define a largura geral e posiciona as postagens.
Abaixo, iremos mudar o "width" (largura) para o tamanho do cabeçalho e adicionar a propriedade "margin" área que nos possibilite o posicionamento da área. O código deverá ficar assim:
#main-wrapper {
width:XXpx; /*---Edite a LARGURA---*/
margin: 0px 0 0 0px; /*---Edite o posicionamento---*/
}
width:XXpx; /*---Edite a LARGURA---*/
margin: 0px 0 0 0px; /*---Edite o posicionamento---*/
}
OBSERVAÇÃO: Você irá usar apenas o primeiro e o ultimo "0px". Se tiver dúvidas escesse ESSA PÁGINA CLICANDO "AQUI".
Agora vamos adicionar as imagens que constituem a área. Começe procurando por ".post h3 {". Iremos apagar tudo que está entre ".post h3 {" e seu fechamento "}" e iremos adicionar alguns códigos deixando assim:
.post h3 {
background:url(LINK DA SUA IMAGEM)no-repeat;
width:XXpx; /*---Edite a LARGURA---*/
height:XXpx; /*---Edite a ALTURA---*/
}
background:url(LINK DA SUA IMAGEM)no-repeat;
width:XXpx; /*---Edite a LARGURA---*/
height:XXpx; /*---Edite a ALTURA---*/
}
.post {
background:url(LINK DE SUA IMAGEM)repeat-y;
width:XXpx; /*---Edite a LARGURA---*/
}
background:url(LINK DE SUA IMAGEM)repeat-y;
width:XXpx; /*---Edite a LARGURA---*/
}
.post-footer {
background:url(LINK DE SUA IMAGEM)no-repeat;
width:XXpx; /*---Edite a LARGURA---*/
height:XXpx;/*---Edite a LARGURA---*/
}
background:url(LINK DE SUA IMAGEM)no-repeat;
width:XXpx; /*---Edite a LARGURA---*/
height:XXpx;/*---Edite a LARGURA---*/
}
.post h3 a, .post h3 a:visited, .post h3 strong {
font-family:Arial; /*---Edite a fonte---*/
font-size:13px; /*---Edite o tamanho da fonte---*/
color:#XXX; /*---Edite a cor---*/
margin-left:XXpx; /*---Edite a distância com relação à esquerda---*/
line-height:XXpx; /*---Edite a distância de cima---*/
}
font-family:Arial; /*---Edite a fonte---*/
font-size:13px; /*---Edite o tamanho da fonte---*/
color:#XXX; /*---Edite a cor---*/
margin-left:XXpx; /*---Edite a distância com relação à esquerda---*/
line-height:XXpx; /*---Edite a distância de cima---*/
}
.post-body {
font-family:Arial; /*---Edite a fonte---*/
font-size:13px; /*---Edite o tamanho da fonte---*/
color:#XXX; /*---Edite a cor---*/
width:XXpx; /*---Edite a LARGURA---*/
margin:0px 0 0 0px;
}
E por fim iremos posicionar os textos do rodapé da postagem, mas tem um problema.. eu sei apenas posicionar Autor e link da página de Comentários, portanto se quiseres remover os demais conteúdos do rodapé da postagem acesse o painel(onde se adiciona gadgets), vá no "Editar" de "Postagens no blog" e deixe marcado apenas as duas opções. Para posicionar os comentários, busque por ".comment-link {" e iremos editar o código deixando-o assim:
.comment-link {
margin-left:XXpx;
line-height:XXpx;
font-famiy:Arial;
font-size:XXpx;
color:#XXX !important;
}
margin-left:XXpx;
line-height:XXpx;
font-famiy:Arial;
font-size:XXpx;
color:#XXX !important;
}
Para posicionar o Autor, busque por "]]></b:skin>". Acima adicione o seguinte código:
.post-author {
margin-left:XXpx;
line-height:XXpx;
font-famiy:Arial;
font-size:XXpx;
color:#XXX !important;
}
margin-left:XXpx;
line-height:XXpx;
font-famiy:Arial;
font-size:XXpx;
color:#XXX !important;
}
Busque por: "<b:if cond='data:post.labels'>" e apague o trecho:
<div class='post-footer-line post-footer-line-2'><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> </div>
<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> </div>
Se você seguiu corretamente todos os paços, ficou mais ou menos assim
Qualquer dúvida que tenham,deixe um comentário!!
0 comentários
Postar um comentário