10 de setembro de 2012

Tutorial-Layout Simples e Personalizado [repost]


Estou postando esse tutorial de novo porque o outro ficou ruim, muito bagunçado! Então, resolvi postar novamente mais organizado e patatipatatá. 
Créditos: Cherry Bomb!

Para ver o tutorial, clique em Leia mais!


Base


1. No painel Blogger, vá em Modelo>Personalizar, escolha a segunda opção do modelo Travel.
2. Feito isso, clique em Avançado>Plano de fundo da postagem e escolha qualquer cor, só para destacar na hora de fazer as modificações no design. 

HTML

1. Clique em Modelo>Editar HTML. Agora vamos tirar a bordinha lá de cima, que incomoda muita gente. 
Aperte CTRL+F e procure por  .content-outer .content-cap-top {. Você verá isso:
.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);}
Apague as partes em negrito, cuidado com os pontos e vírgulas. Seu layout ficará assim:


2. Essa parte é totalmente opcional, nós vamos tirar o espaço entre a área de postagem e a sidebar. Aperte CTRL+F e procure por  .main-inner .column-right-inner {. Apague o que está em negrito novamente:
.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;}
Visualize. A sidebar deverá estar "colada" na área dos posts.

3. Agora, vamos modificar o espaço entre a área dos posts e o cabeçalho. Também é opcional, porque... sei lá, mas os  layouts, na maioria das vezes, ficam melhores sem esse espaço, vai ficar tipo assim:
Imagem do cabeçalho do blog Trechy Teen

Te gusta? primeiro, adicione uma imagem no cabeçalho. Feito isso, volte para o HTML. Aperte CTRL+F e procure por /* Tabs. Você verá esse código:

/* Tabs
----------------------------------------------- */
.tabs-inner {
  margin: 1em 0 0;  padding: 0;
Apague o que está em negrito.

Aperte CTRL+F novamente e procure por .main-inner {. Abaixo desse código, acrescente  margin-top: -20px;. Vá modificando o número 20. Se quiser aumentar o espaço, substitua o sinal de menos pelo de mais (+). 

Essas foram as principais personalizações do layout, agora é só acrescentar mais coisas, com tutoriais de vários blogs! 

Gostaram do tutorial? Dúvidas? Comente!

4 comentários:

Tessa disse...[Responder comentário]

Adorei o tutorial, tipo, eu já sabia mas é muito útil mesmo assim.
Beijinhoos,
bobagensdabubu . blogspot . com

Joana Schuartz disse...[Responder comentário]

Geronda, foi você que fez o Layout do Sanduiche de Assunto? Estou precisando muito de alguém que faça Layouts personalizados de graça,você sabe como fazer?

lipa dreher disse...[Responder comentário]

Esse tive que apreender a sozinha, as iniciantes vão amar, beijos seguindo aqui

californiadreams2.blogspot.com.br

Vanessa Barbosa disse...[Responder comentário]

Nossa, me ajudou muito!!
htt://pequenaimperfeita.blogspot.com