domingo, 16 de setembro de 2012

2º Parte

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---*/
}
Você deve substituir os "XX" pelo número que dá a largura de sua imagem. Para usar "margin" é importante prestar atenção nos seguintes detalhes.. o PRIMEIRO "0" determina a margem de CIMA, o SEGUNDO "0" determina a margem da DIREITA >, o TERCEIRO "0" determina a margem de BAIXO e por fim, o ULTIMO "0" determina a margem da ESQUERDA.

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---*/
}
É importante que mantenha o link da imagem permaneça DENTRO dos parenteses "()". Agora vamos adicionar o "meio", portanto procure por ".post {". Iremos adicionar alguns códigos deixando-o assim:

.post {
background:url(LINK DE SUA IMAGEM)repeat-y;
width:XXpx; /*---Edite a LARGURA---*/
}
OBSERVAÇÕES: Note que quando aparece "repeat-y" (para que determinada imagem repita horizontalmente) não determinamos a "height" (largura) da imagem. Agora vamos ao "rodapé" da postagem. Procure por ".post-footer {". Iremos adicionar alguns códigos denxando-o da seguinte forma:
.post-footer {
background:url(LINK DE SUA IMAGEM)no-repeat;
width:XXpx; /*---Edite a LARGURA---*/
height:XXpx;/*---Edite a LARGURA---*/
}
Estamos quase acabando.. com certeza você percebeu que os textos de todas as partes da área de suas postagens estão fora de seus devidos lugares... vamos começar a posicioná-los dando início do título da postagem. Procure por ".post h3 a, .post h3 a:visited, .post h3 strong {". Vamos apagar determinadas partes e adicionar alguns codigos, deixando-o assim:
.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---*/
}
Agora vamos posicionar o texto. Procure por ".post-body {". Nesta parte do código iremos definir o posicionamento dos textos de sua postagem. Vamos deixar o código assim:

.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;
}
OBSERVAÇÕES: É impostante que o "width" (largura) seja menor que a largura geral de suas imagens.

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;
}
OBSERVAÇÕES: Em "margin-left", iremos definir a distância do link com relação ao canto esquerdo. Em "line-height", iremos definir a distância do link com relação ao canto de cima. O restante já foi explicado anteriormente.

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; 
}
OBSERVAÇÃO: No caso dos "marcadores" permanecerem, mesmo que tenha removido-os no "postagens no blog".
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 != &quot;true&quot;'>,</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