Criando um layout básico (Modelo Travel)

Criei uma Ask!  Se quiser alguma coisa, é só pedir aqui.

Hey guys ~u~ (isso era para ser uma carinha, entendam...)

Tudo bem com vocês? Comigo está tudo bem! Eu poderia pedir um favor a vocês? Bem, eu faço aula de guitarra, comecei um tempinho atrás, e precisava de umas músicas não tão difíceis para tocar. É que tipo, a maioria das músicas que eu curto ou  é muito difícil ou é de piano ou sei lá o que! Mas enfim, se souberem alguma música não tão complicada para tocar, por favor me falem. Agradeço desde já!

Bom, como prometido, ou não, hoje trouxe um simples tutorial, normalmente usado como base nos layouts. Eu sei que a maioria nem vai precisar, mas não custa nada postar não é? Afinal, sempre existe alguém que talvez possa precisar... Vamos ao tutorial?

1- Primeiramente, vamos escolher o modelo básico. Usaremos o Travel (Viagem), na versão que tem umas "bordinhas" de papel (que será tirado ao final do tutorial).

Para isso, vá em Modelo -> Personalizar. Escolha o modelo circulado de vermelho conforme a imagem: (clique na imagem para ampliá-la!)

Depois, vá em Avançado, e procure por "Plano de fundo da postagem".  Escolha uma cor qualquer, só para destacar as modificações no HTML.



Clique em aplicar ao blog, e depois em voltar para o blogguer. Agora, vamos para a parte mais complicadinha, vamos mexer no HTML do blog para deixá-lo bonitinho.

2- Vá novamente em Modelo, só que dessa vez vá em Edital HTML, clicando em "prosseguir" na mensagem que aparecer em seguida.



Agora vamos começar as modificações. Primeiro, vamos tirar as benditas bordinhas de papel. Clique no meio da tela (onde aparece aquele monte de letrinhas), depois dê Ctrl F e cole na caixinha que apareceu no canto direito (Search) o código abaixo:

.content-outer .content-cap-top {

Logo abaixo disso, apague apenas o que está destacado em verde na imagem abaixo. Nada mais, nada menos! E atenção para os pontos e vírgulas! 



Depois de fazer isso, clique em Visualizar Modelo. Seu layout deverá ficar assim:



3- Para o próximo passo, precisamos colocar uma imagem de cabeçalho no blog. Eu fiz uma só para dar o exemplo, mas você á pode usar a sua imagem definitiva. Lembre-se sempre de fazer uma imagem da largura do seu blog (Veja qual é a largura no designer de modelo).

Lá em layout clique em "Editar" no gadget do cabeçalho:



Vai abri uma janela, lá você clica em "Fazer upload da imagem" e escolhe sua imagem de topo. Em posicionamento, marque a opção "Em vez de título e descrição". Quando a imagem for totalmente carregada, é só salvar.

Agora vamos voltar para o Modelo HTML do blog. (Modelo -> Editar HTML -> Prosseguir).

Iremos retirar aquele espaço chato que fica entre a imagem do cabeçalho e o resto do blog. A maioria dos layouts fica melhor sem aquele espaço, mas se você achar que não precisa tirar, pule essa etapa.

Aperte Ctrl+F e procure por: /* Tabs

Logo abaixo você verá esse código:

.tabs-inner { margin: 1 em 00;  padding: 0; }

Apague o que está destacado.
Aperte Ctrl F e novamente procure por:  .main-inner { 

Logo abaixo desse código, você vai acrescentar essa linha: margin-top: -20px;
Agora é só modificar o número (20) até ficar do jeito que você quer. Altere o número e vá visualizando até não sobrar nenhum espaço.
Se você quiser aumentar esse espaço, é só tirar o sinal de menos (-).



Já fizemos as principais modificações no nosso layout. Depois de salvar o HTML você pode ir para o designer do modelo e colocar uma imagem de fundo para deixar o blog mais bonitinho. Para isso clique em Modelo -> Personalizar -> Plano de fundo. Clique no quadrado que tem a miniatura do plano de fundo atual, depois clique em "Fazer upload da imagem" e escolha a imagem que quiser. O resultado será assim:



(No exemplo acima, a sidebar está coladinha a área de postagens. É que no tutorial original, do Cherry Bomb, eles ensinam também como retirar o espaço dos mesmos. Eu só não coloquei aqui porque acho que não é tão necessário. Mas caso queira saber, o tuto está aqui.)

A base é essa. Agora basta mudar as cores no designer do modelo e aplicar outros tutoriais para deixar o blog mais elaborado. Caso tenham alguma dúvida, perguntem aqui ou mesmo na ask.

Créditos do tutorial: Liah, Cherry Bomb