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:
/* TabsVais encontrar este código:
.tabs-inner {Apaga a parte a verde.
margin: 1em 0 0;
padding: 0;
}
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!
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 *--------------*
ResponderEliminarObrigada Jackie, eu adoro seu blog! *-*
Eliminar