15 janeiro 2013

Como criar um layout básico


Olá galera,tudo bem?Então...Hoje irei ensinar a como criar um layout básico,muitas pessoas estão criando blogs que a maioria são novas na blogsfera,então,não sabem como começar o layout.Clique aqui , ok... então,vamos começar,mas antes,gostaria de dizer,que já que tem várias pessoas começando blogs agora,irei fazer uma maratona de tutoriais para iniciantes,começando com esse tutorial!

Espero que gostem...Continue Lendo...

Primeiro vamos escolher o modelo básico.Iremos usar o Travel(Viagem) na versão que tem umas "bordinhas horrorosas" de papel no cabeçalho.Ele pode parecer bem feio a primeira vista,mas depois iremos deixar ele SUPER LINDO!

Para isso,vamos em -> Modelo -> Personalizar / Veja um exemplo abaixo:


Depois clique em "Avançado" ali no lado,procure por "Plano de fundo da postagem" e marque qualquer cor,só pra destacar enquanto fazemos modificações no HTML.

Clique em "Aplicar ao blog" porque agora iremos mexer no HTML para deixa-lo bonito.


Clique em Editar HTML e procure por: (Para facilitar a sua busca,de CTRL + F)
.content-outer .content-cap-top {
 E apague somente os destacados,nada mais!Atenção para os pontos e vírgulas!

Seu layout deve ficar assim:

Agora vamos juntar a sidebar com a área da postagem,primeiro procure por:
 .main-inner .column-right-inner {
Apague somente oque está destacado,e dessa vez você poderá apagar os pontos e vírgulas!

Visualize e veja que a sidebar está colada com os posts,veja um exemplo:

Não da pra ver direito porque a sidebar está branca.


Para o próximo passo,iremos usar uma imagem de cabeçalho no blog.Eu fiz uma só para dar um exemplo,mas você poderá usar  a sua própria,eu fiz uma imagem transparente(recomendo) para o blog ficar mais bonito,pegue a imagem aqui,não vai ter nada lá,só uma lupa,então com o botão esquerdo,salve a imagem!Lembre-se de fazer uma imagem com a largura de seu blog,veja a largura no designer de modelo.

1° Vá em -> Layout -> Cabeçalho -> Editar

Vai abri uma janela, lá você clica em "Fazer upload da imagem" e escolhe sua imagem de topo. Em posicionamento, marque a opção "Em vez de título e descrição". Quando a imagem for totalmente carregada, é só salvar.

Agora vamos voltar para o Modelo HTML do blog. (Modelo > Editar HTML > Prosseguir)
Iremos retirar aquele espaço chato que fica entre a imagem do cabeçalho e o resto do blog. A maioria dos layouts fica melhor sem aquele espaço, mas se você achar que não precisa tirar, pule essa etapa.

Aperte Ctrl+F e procure por: /* Tabs
Logo abaixo você verá esse código:
.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}
Apague oque está destacado.
Aperte Ctrl+F de novo e procure por .main-inner {
 Logo abaixo desse código, você vai acrescentar essa linha: margin-top: -20px;
Agora é só modificar o número (20) até ficar do jeito que você quer. Altere o número e vá visualizando até não sobrar nenhum espaço.
Se você quiser aumentar esse espaço, é só tirar o sinal de menos (-).

Já fizemos as principais modificações no nosso layout. Depois de salvar o HTML você pode ir para o designer do modelo e colocar uma imagem de fundo para deixar o blog mais bonito. Para isso clique em Modelo > Personalizar > Plano de fundo. Clique no quadrado que tem a miniatura do plano de fundo atual, depois clique em "Fazer upload da imagem" e escolha a imagem que quiser. O meu ficou assim:

Então é isso,espero que tenham aprendido,rs.
E o tutorial continua no próximo post! Beeijos.

Um comentário:

Famous Oficial disse...

Oi , então, quero agradecer muuuuuuuuuuuito, muito mesmo a você, pois seu tuto ficou bem legal e simples obrigado por isso, eu queria fazer um assim pois eu tinha colocado muita coisa no meu outro blog, e não sabi como retirar então eu resolvi fazer tudo de novo , valeu :)