Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    Programando LayOut - Parte 02


     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.

    NOTA: Você irá usar apenas o primeiro e o ultimo "0px". Se tiver dúvidas escesse ESSA PÁGINA.
     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;
    }


     NOTA: É 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" 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;
    }


    NOTAS: 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;
    }


    NOTA: 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, 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