2 de nov. de 2012

Criando um Layout part 1 - a base


Oi gente, como vai? Uma leitora daqui do blog me pediu para que fizesse um post com dicas e tutoriais de como criar um layout. O big tutorial será dividido em partes, okay? Continuando... Hoje eu vou focar principalmente em como fazer um layout básico. Aconselho a criar um blog de testes e depois fazer o backup no seu outro blog. Quer aprender? Então clique em leia mais.
créditos: aquiaquiaqui e aqui

Bom, nós iremos utilizar o modelo Travel/Viagem, na versão que tem umas bordas feias de papel. Para isso vá em:
Modelo  clique em personalizar:


Vá em Templates  Viagem  selecione o template que está circulado de azul:



Pronto? Então clique em Aplicar ao blog e depois clique em Voltar para o blog. Agora vamos retirar aquelas bordas de papel horríveis do nosso modelo. Vá em:
Modelo  Editar HTML  aperte F3 e procure por:  .content-outer .content-cap-top {

Logo abaixo disso, você irá apagar apenas o que está destacado na imagem, nada mais nada menos! Atenção para os pontos e vírgulas.

clique para ampliar

Clique em visualizar. O seu layout deve ficar assim:

se o seu layout ficou dessa forma, salve.

Para o próximo passo precisamos colocar uma imagem de cabeçalho. Eu fiz uma, como exemplo, mas você já pode utilizar a sua imagem definitiva. Vá em:
Layout  e clique em editar no cabeçalho do blog:

clique para ampliar
Faça o upload da imagem  selecione a opção "em vez do título e descrição"  salve

A maioria dos layouts fica melhor sem aquele espaço chato entre o cabeçalho e o resto do blog. Mas caso você acha que não há necessidade de retirar esse espaço, pule essa etapa.
Aperte F3  procure por: /* Tabs 

logo abaixo você irá encontrar este trecho:
.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}

Apague o que está destacado  procure por:  .main-inner {  logo abaixo do código acrescente:
margin-top: -20px;

Altere o número destacado em negrito até não sobrar nenhum espaço entre o cabeçalho e o resto do blog. Ficou do jeito desejado? Então salve.

Bom gente, logo mais venho com a outra parte de Criando um Layout, okay? Espero que tenham gostado! Comente dizendo o que acharam :)

10 comentários:

  1. ótimas dicas em, legal ajuda muito quem ainda está entrando na blogsfera :)
    ~~ besos
    Bruna.
    Garota da Lua // Official

    ResponderExcluir
  2. Ok Gatinha ><
    Já esta nos Afiliados ♥ Tbm ;]]

    Beijinhos ;*

    ResponderExcluir
  3. Amei a postagem!! Ajuda muito quem usa o modelo travel como eu! Principalmente porque aquela linha quadriculada é muito feia!

    Beijos

    htpp://chuvasdioutono.blogspot.com.br

    ResponderExcluir
  4. Muito legal vc estar postando em seu blog como fazer um layout. Sempre quis aprender mas nunca consigo fazer um layout bonito de verdade, eu até sei fazer mas só sei fazer no artisteer e o resultado fica muito simples mesmo, tipo nem fica com cara de blog para garotas. Vou ficar acompanhado seus posts e aguardo a continuação do tutorial! Beijos

    ResponderExcluir
  5. Adorei esse mega tutorial, estou acompanhando *-*

    ResponderExcluir
  6. gostei do tutorial, apesar de saber fazer lay, eu acho bom dar uma olhada. a gente aprende muito né.

    ResponderExcluir
  7. É de muita utilidade esses tutoriais, parabéns!

    ResponderExcluir
  8. Amei seu blog flor *u* merece um Link-me http://tudoemaisumpouco-lais.blogspot.com.br/

    ResponderExcluir
  9. Oi flor! *u* Seguindo seu doce blog,segue de volta http://desenhosdalais.blogspot.com.br/

    ResponderExcluir
  10. esse tutorial sempre me ajuda muito :3 vlw

    ResponderExcluir

LEIA ANTES DE COMENTAR
-não faço parcerias, apenas afiliações
-"segue meu blog" ou "seguindo, segue de volta" - só seguirei os blogs que eu realmente gostar, okay?
-não aceito tags nem selinhos
-deixe o link do seu blog no fim do comentário para que eu possa retribuir a visita