12 setembro 2012

Como fazer um layout básico


Como eu disse nesse post, eu vou ensinar a fazer um layout básico tipo o meu e o que eu fiz para o mundo dos gifs, em primeiro lugar cria um blog para o teste e faz o upload do modelo completo.

Escolhe o modelo viagem a 2 opção. Vê em largura se esta 960 e no outro 310. Se não estiver põe. E em avançadas vai a titulo do blog>> e onde está 60px muda para 0px.
No Plano de fundo da postagem escolhe branco e também podes mudar o plano de fundo da barra lateral a teu gosto.
Deve estar mais ou menos assim î o teu blog. Aplica ao blog e carrega voltar ao blogger, agora começa a editar o html.
Carrega F3 e procura por:
 .content-outer .content-cap-top {
Vais encontrar um código igual a este:
.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);
}
E apaga as partes sublinhadas a verde, vê com atenção os pontos e virgulas que estão seleccionadas e  as que não estão.
Agora visualiza se o teu blog estiver assim:

Guarda e procura por:
.main-inner .column-right-inner {
Vais encontrar 2 opções mas vai à primeira onde o código é:
 .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 {
 background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
  margin-right: $(content.padding);
}
 Apaga o código a verde e visualiza se a barra lateral estiver bem coladinha à area dos posts guarda.
Procura por:
/* Tabs
Vais encontrar este código:
.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}
Apaga a parte a verde.
Agora procura:
 .main-inner {
e abaixo dele cola:
 margin-top: -25px;
Visualisa, não vais notar nenhuma alteração, então salva.
 
Agora é o cabeçalho recomendo agora o uso do Inkscape para os desenhos. Faz um desenho fofo com essa base:
                                                       (Clica para ver em tamanho original)
Ou faz tu desde ínicio com 960px de comprimento.
Eu fiz um para o meu blog Marshmelon:
(Clica para ver em tamanho original)
Agora mapeia a imagem que escolheste vê como aqui e coloca-a num widget HTML/JavaScript em cima da area dos posts, espero que gostes, Xauuuu!


2 comentários:

  1. Vou indicar seu post para algumas leitoras que vão lá n blog me perguntar como se cria um lay básico... Seu big tutu vai ajudar mta gente guria *--------------*

    ResponderEliminar
    Respostas
    1. Obrigada Jackie, eu adoro seu blog! *-*

      Eliminar