Fala aí gente, aqui é o Anon e hoje venho trazer-lhe a seunda parte da sequência de tutoriais de como programar um LayOut! (demorou pros 85 seguidores, em.. ¬¬').
Neste tutorial iremos posicionar tudo que está fora do lugar e programar a "skin" da área das postagens, enfim, vamos lá! Vamos dar início "fatiando" a área das postagens em Cabeçalho, Meio e Rodapé (da mesma forma que você fez anteriormente em Header, Outer e Footer, só que sem termos definidos para essa parte)
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).
NOTA: Uma dica importante: 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" ara 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.
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 {". Iremeos adicionar alguns códigos deixando-o assim:
.post {
background:url(LINK DE SUA IMAGEM)repeat-y;
width:XXpx; /*---Edite a LARGURA---*/
}
NOTAS: 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---*/
}
Bem, 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 vams 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;
}
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" do "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;
}
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;
}
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>
Se você seguiu corretamente todos os paços, ficou mais ou menos assim
Qualquer dúvida que tenham, não se acanhe, e faça seu comentário logo abaixo e/ou tire-a comigo ou com qualquer outro no Chat.
Ufa.. -.-' Bem, é "só" isso nesta parte do tutorial! Espero ter ajudado. E é bom que tenha 90 seguidores pra parte 3 em! Se não irá ter morte no recinto! (kkk)
0 Deixe um Comentário:
Postar um comentário