Fazendo meu layout - Parte 1

Um dos sonhos de qualquer blogueira é fazer um layout divo para seu blog, não é? Mas muitas ainda não sabem como se faz um layout, aliás, quase ninguém sabe. Eu fiz o curso de Web Design e posso dizer, modificar os códigos disponibilizados no blogger é "mamão com açúcar" perto de começar uma página da internet do zero. Como muitas blogueiras me pediram, hoje vou iniciar uma série de posts ensinando a fazer o seu próprio layout. Essa é uma ótima opção pra quem não tem dinheiro pra investir num layout pago, além de você aprender a lidar com HTML para quem sabe, no futuro, começar suas próprias encomendas de layouts.

Mas antes de tudo um aviso. É necessário muita atenção e paciência para se fazer qualquer coisa em HTML. Um errinho e seu blog pode estragar todinho. Jogue a preguiça de lado e vamos lá!

O post de hoje ensina a tirar alguns códigos para tornar a aparência mais bonita. Bem básico!

Primeiro, crie um novo blog e escolha o modelo Travel (viagem), o que tem um fundo todo branco. Recomendo que todo(a) blogueiro(a) tenha mais de um blog. Um que você posta as coisas publicamente e outro (ou outros) para a criação de layouts, testes de tutoriais, etc.

Depois de seu blog pronto siga os passos abaixo.

Vá em Modelo  Clique em Personalizar.

Depois, na guia Avançado, escolha uma cor para o fundo da postagem.

No canto superior direito clique em "Aplicar ao blog".

Agora é a parte que exige mais atenção. Vamos mexer nos códigos HTML. 

Primeiro vamos tirar as bordinhas de papel que são horrorosas.

No painel do blog, clique em "Modelo", depois em "Editar HTML".

Vai abrir uma caixinha cheia de códigos. Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3. Note que abriu uma caixinha de pesquisa no canto superior direito da página. Cole nela o seguinte código.

content-outer .content-cap-top {

Note que a essa parte se destacou no código geral.
Agora, apague os trechos destacados abaixo.

.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);
}

Feito isso clique em "Salvar Modelo".

Agora vamos colocar um plano de fundo no blog. Há dois modos de se fazer: pelo design de modelo e pelo HTML.

PELO DESIGN DE MODELO

No painel do blog, clique em "Modelo", depois em "Personalizar"

Na aba "Plano de fundo" clique no local indicado na figura abaixo.

Na página que se abre escolha um plano de fundo ou faça o upload da imagem do seu computador. Feito isso, clique em "Aplicar ao blog".

PELO HTML

No painel do blog, clique em "Modelo", depois em "Editar HTML".

Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3.

Pesquise por:

body {

Abaixo dele deve estar assim:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

Apague a linha destacada em azul e cole no lugar esse código:

background: url(URL DA IMAGEM)repeat fixed;

Coloque o url da imagem no local indicado, visualize e depois salve.

Pronto! O seu layout já está aparentemente bonito. Veja o meu como ficou:

No próximo post vamos aprender a personalizar a sidebar, a coluna lateral do blog.

Beijos e até mais!