Big Tutorial: Criando um Layout

13/04/2012

Á pedido de uma leitora, hoje trouxe um Big Tutorial, sobre como criar um layout. Hoje só vou ensinar como fazer a base do layout, e toda semana trarei dicas e tutoriais de personalização. Recomendo que façam o layout em um blog de Teste, e depois passem para o original. Vamos lá!:





1) Vá em Modelo >Personalizar e escolha Viagem, no modelo Travel (segunda opção)


2) Vá em Plano de Fundo e clique em remover imagem


3) Vá em Ajustar larguras, e deixe a largura do blog em 980 e a da barra lateral em 350 (não sei se isso influencia em outros passos)


4) Vá em Layout e deixe assim:


5) Vá em avançado e em Plano de fundo deixe as duas opções em transparente


6) Vá em Título do blog e deixe em 0px, na cor transparente


7) Vá em Plano de fundo da postagem e deixe branco


8) Vá em Plano de fundo da Barra lateral, deixe a moldura transparente e edite a cor do plano de fundo como quiser


Agora é só ir personalizando as cores dos links, texto... Depois de editar tudo, salve e volte no Modelo> Editar HTML.

Retirar a borda do template:

Pressione Ctrl + F e procure por:

content-outer .content-cap-top {

Apague as partes destacadas:

( Imagem do blog Go Imagine)

Juntar a coluna lateral com a da postagem:


Pressione Ctrl + F e procure por:


.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

 Apague as parte destacadas:


( Imagem do blog Go Imagine)

Juntar o cabeçalho com a área das postagens:

Pressione Ctrl + F e procure por:

/* Tabs

Um pouco depois dessa tag, apague o seguinte código:

margin: 1em 0 0;

Abaixo de padding: $(content.padding) 0; acrescente o seguinte código:


margin-top:-10px;


Vá alterando o número até que junte.


 O layout fica assim meio sem graça, é só ir personalizando. Veja alguns tutoriais aqui.
Espero que tenham gostado do big tutorial, alguma dúvida é só comentar :)

11 comentários:

  1. Boa tarde!! otima dica para principiantes...adorei!! beijos e boa sexta 13!

    ResponderExcluir
  2. Ameiii, aguardo mais posts, hihi
    perfeitateen.blogspot.com

    ResponderExcluir
  3. Super dicas, hem flor!!
    baixei meu template da net.. mas modifiquei bastante
    Sempre estou mudando aqui e ali ..
    da uma trabalho né , rsrs
    bjus
    Te convido a participar do super sorteio de uma linda rasteira: http://makesemelissa.blogspot.com.br/2012/04/1-sorteiodo-blog-rasteira-splatt.html

    ResponderExcluir
  4. Muito bacana esse tutorial. Me ajudou bastante! Beijoss

    http://ligadanamoda.blogspot.com.br/

    ResponderExcluir
  5. Adoro seus posts de tutoriais!
    Posso dar uma sugestão de tutorial? Ensina pra gente como trocar o botão de pesquisa do blog por aquele botão de pesquisa bonitinho com imagem.
    Bjo

    ResponderExcluir
  6. Nossa, ótimo tutorial e muita paciência pra ter criado né.. *-*

    ResponderExcluir
  7. Mega ótimas, dicas !
    Eu adoro ficar passando em blog, de tutoriais e ficar vendo de como criar layout's além de você aprender mais dicas ainda.. Você vai pegando experiencia e melhorando mais e mais né ? Beijos ! Gostei do post:: Uma maravilha =D

    www.interligada-i.blogspot.com

    ResponderExcluir
  8. Gostei muito do tutorial tava procurando, quero tentar fazer meu proprio lay!!
    adorei teu blog tambem, mui fofo
    visita! http://adolescenciaemmente.blogspot.com.br/

    ResponderExcluir
  9. Olá!! Eu comecei fazer, e estava dando tudo certo, até chegar a parte do html. Quando eu copio os códigos, e colo lá, eles não são encontrados :( já tentei v´parias vezes, e não consegui. O que eu faço? \Me ajude por favor! Obrigada

    ResponderExcluir
    Respostas
    1. Olá!
      Deve ser por quê quando você copiou o código ficou um espaço em branco no começo, é só apagar esse espaço que eles são encontrados. Espero ter ajudado :)

      Excluir