Tutorial - Criando uma layout básica

Olá pessoal!

Como dito eu venho hoje apresentar o Crie você mesmo sua layout #1.

Fazer um blog não é fácil, é cansativo demais, porém, no fim vale a pena ver que o blog ficou do seu jeito não é mesmo?

Para começarmos, todos devem ter um banner pronto para sua layout, como o post de hoje vai ficar grandinho, no próximo dia postarei brushes png para vocês montarem seus banners ok?
Como não posso deixar os meninos na mão, coloquei o blog azul e farei dois banners, masculino e feminino, mas usarei o feminino na layout rs.

ANTES DE TUDO, PEÇO PARA QUE FAÇAM EM UM BLOG TESTE.


CLIQUE NAS IMAGENS PARA VER MELHOR.
BANNER:
Primeiro passo: vamos colocar o banner do blog.
OBS: O banner utilizado na layout estará disponível quando o template for disponibilizado como free.
Vá em LAYOUT e encontrará a página abaixo, depois clique em EDITAR.
 Segundo passo: 
Vamos colocar o nome do blog e colocar a imagem, o banner dele ok?
Clique em ESCOLHER ARQUIVO e marque EM VEZ DE TÍTULO E DESCRIÇÃO.
Depois de clicar em Escolher arquivo você vai colocar a imagem que deseja e depois clique em salvar.

LAYOUT
Primeiro passo:
Vai em MODELO depois clique em PERSONALIZAR e coloque MODELO VIAGEM e escolha o azul, como mostrado na imagem abaixo e clique em APLICAR AO BLOG.
Segundo passo:
Clique em PLANO DE FUNDO, REMOVER IMAGEM e colocar a cor que quer, no meu caso eu decidi por azul.
Terceiro passo:
Clique em AVANÇADO, procure por PLANO DE FUNDO DA POSTAGEM e marque branco.
Quarto passo:
Volta para MODELO, EDITAR HTML e vamos deixá-lo sem aquelas bordas.
Quinto passo:
Clique naquelas setinhas que fica na lateral para expandir os códigos, aperte Ctrl+f que abrirá uma caixinha de pesquisa, procure por :

.content-outer .content-cap-top{

Apague tudo que está destacado, atenção para os pontos e virgulas ok?

.content-outer .content-cap-top {
height: $(content.imageBorder.top.space);
background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}
.content-outer {
margin: 0 auto;
padding-top: $(content.margin); }
.content-inner {
background: $(content.background);
background-position: left -$(content.imageBorder.top.space);
background-color: $(content.background.color);
padding: $(content.padding);
}
.main-inner .date-outer {
margin-bottom: 2em;
}


Sexto passo:
Para deixar a coluna colada com o post, procure por:
.main-inner .column-right-inner {
Apague tudo que está destacado, mais uma vez, olhe bem os pontos e virgulas.

.main-inner .column-right-inner {
margin-left: $(content.padding);
}
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-left: $(content.padding);
background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
.main-inner .column-left-inner {
margin-right: $(content.padding);
}
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
.main-inner .column-left-inner,
.main-inner .column-right-inner {
padding: 15px 0;
}


Sétimo passo:
Para deixar o banner coladinho, procure por:
/* Tabs
Abaixo terá o código, apague o que está destacado:
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}

Oitavo passo:
Procure pelo código abaixo:
.main-inner {
Logo abaixo acrescente o código:
margin-top: -20px;
Para modificar o espaço é só alterar o (-20) para deixar de seu agrado. Clique em VISUALIZAR, se tudo estiver ok, clique em SALVAR.

Ufaa, terminamos, fácil né? Pega a prática conforme for fazendo rs.

Beijos e até o próximo tutorial pessoal!

OBS: CRÉDITOS.
Comentários
8 Comentários

8 comentários:

  1. Bem legal sua dica, realmente começar um blog do zero e sem conhecer nada de html é muito difícil e digo por experiência, para dar vida ao meu blog apanhei muito!

    Abraço,
    Diego de França

    Aguardo sua visita ;-)
    Leitor Sagaz | Grupo Amantes da Literatura no Facebook

    ResponderExcluir
  2. boas dicas :D
    eu vivo quebrando a cabeça tentando mudar o meu. =/
    bjs
    http://torporniilista.blogspot.com.br/

    ResponderExcluir
  3. Belas dicas Tamires, tava com dificuldades em escolher um layout para o meu blog, agora só a imagem de cabeçalho que tá dando trabalho pra ficar centralizada haha. Se você poder me ajudar agradeceria muito.

    Abraço.

    Teens in Wonderland

    ResponderExcluir
  4. Acho legal vc postar essas coisas eu sempre me perco nessas horas e não sei nem o basico kkkk
    http://contodeumlivro.blogspot.com.br/

    ResponderExcluir
  5. Muito legal esse tutorial, quando eu estiver com tempo com certeza vou tentar fazer meu próprio layout.
    Beijos, lendocomabianca.blogspot.com

    ResponderExcluir
  6. Adorei o tutorial....morro de preguiça sabia? kkkkkkkkkkkkkkk morro de burrice tbm sou um O pra esse tipo de coisa ahahahah beeijos =*

    Oi para você que adora andar perfumada, cheirosa e hidratada! Estou apaixonada com esse kit lindo, apesar de testar e ver somente a amostra kkk, mas eu estou pensando seriamente em comprar, já falei que to apaixonada? A fragrância é TUDO, ô troço cheiroso sô!

    http://www.blzinteligente.com/2014/07/kit-fleur-de-figuier-roger-gallet.html#more

    ResponderExcluir
  7. Tenho muita vontade de dar um up no meu blog, mas confesso que tenho um pouco de preguiça, porém depois de ver o seu post até dei uma animada aqui...

    Beijo, Van - Blog do Balaio
    balaiodelivros.blogspot.com.br

    ResponderExcluir
  8. Oi Tamires, gostei bastante do tutorial.
    Não sei mexer em nada dessas coisas, sorte que uma amiga minha sabe fazer e se ofereceu para mexer no layout do meu blog, senão estaria perdida... rsrs.

    Vou continuar acompanhando a coluna.

    Beijinhos,

    Rafaella Lima
    Vamos Falar de Livros?

    ResponderExcluir

Obrigada pela visita, seu comentário me deixa muito feliz e pode ter certeza, vou retribuir com muito carinho!