HTML - Criando um layout básico para seu blog u_u

Olá seus lindos... aqui estou eu com meu primeiro post após a reinauguração do blog. E como prometido, vou estrear a Tag de HTML, com um tutorial bem basicão pro iníco de tudo, pra ajudar o seu blog. (Claro, o meu blog não é grande coisa comparado a outros por ae, porém qualquer ajuda é bem vinda né? xD).  

O tutorial de hoje, vai ensinar a fazer uma tema base para o seu blog! Gostou? Então clique em 

Leia Mais e mãos obra <3

1  Primeiro passo, vamos mudar o modelo do blog! O mais utilizado para edições html, e o que mais aceita personalização u_u então vamos selecionar ele, indo em

Modelo > Personalizar >Modelos > Viagem >Travel 2

Ponha também um fundo de postagem, só pra vocês notarem a diferença de como vai ficar o blog ok? u_u se não gostatem é só repedir o processo e mudar pela cor que quiserem.

2 Até ae ta tudo ok certo? Agora você vai voltar em Modelo, e vai clicar em Editar Html. Agora é a hora de prestar atenção nos códigos. Primeiramente vamos tirar a bordinha de papel que tem acima do cabeçalho. Por isso vamos procurar pelo código, dê Ctrl + F e procure por: .content-outer .content-cap-top {

Abaixo desse código, ira aparecer este aqui. Agora você ira apagar SOMENTE a parque que está marcada de azul ok? Muito cuidado com as virgulas! Repare que não são todas que foram marcadas

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

}

O resultado sera esse: 

3 Pronto, agora seu blog precisa de um cabeçalho, você pode fazer um bem simples no PhotoScape, e enfeitar (use imagens png ~que tem o fundo transparente). Depois de feito você vai voltar naquela pagina inicial onde aparece suas postagem, clicar em Layout (está acima de modelo), e lá você vai procurar isso aqui em meio dos gadgets:

Você vai fazer o seguinte passo:  

Editar > Escolher arquivo > Em vez de título e descrição > Salvar

Pronto! 

Agora repare que vai ficar um espaço entre o cabeçalho e suas postagens, então vamos tirar esse espaço, que convenhamos fica mais bonitinho u_u

Vá em Modelo > Editar Html

Ctrl + F e procure por:  /* Tabs, e logo abaixo você verá esse código. Novamente apague o que está marcado com azul

.tabs-inner {

  margin: 1em 0 0;

  padding: 0;

}

Agora dê Ctrl + F novamente e procure por .main-inner {, e abaixo dele você vai acrescentar: margin-top: -20px; Agora bastar mudar o {20} até ajustar ao seu blog, e mudar o sinal de {-} se quiser aumentar o espaço. 

4 Agora aos adicionais. Fizemos o básico de tudo, agora você pode mudar o background do seu blog indo em Modelo > Personalizar > Plano de Fundo. E também adicionar novos gadgets para seu blog, indo em Layout > Adicionar um gadget, Tira a NavBar, também está em Layout bem no canto da tela. Você pode tanto mudar, como desativá-la. 

E pronto, seu modelo ficará mais o menos assim u_ú 

u_u até agora foi só o básico mesmo que eu postei pra vocês seus lindos. Qualquer duvida é só comentar que eu responderei. E em breve mais tutoriais e dicas de html pra vocês deixarem seus blog impecáveis u_u Até a próxima! Bjos da Pão-chan