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:
/* TabsApague 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:
Adorei o tutorial, tipo, eu já sabia mas é muito útil mesmo assim.
Beijinhoos,
bobagensdabubu . blogspot . com
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?
Esse tive que apreender a sozinha, as iniciantes vão amar, beijos seguindo aqui
californiadreams2.blogspot.com.br
Nossa, me ajudou muito!!
htt://pequenaimperfeita.blogspot.com
Postar um comentário