Como criar um layout básico 27/01/2014
Uma amiga minha pediu este tutorial que ela é mais iniciante que eu,bjs pra voce Isaah.Bem este tutorial é otimo,antes de tudo ja vou avisando quando terminar a base faca um backup,para salva,imagina todas vezes que voce fazer um layout tambem fazer a base,poxa,coloca ja a base pronta neh.
Pra quem nao sabe dar CTRL+F,é precionar o ctrl no teu teclado,e nao tirar,enquando preciona ctrl,clique no f.Preste bastante atenção em todos os passos para não errar!Creditos CB que agora esta desativado.
Primeiro vamos escolher o modelo básico. Vamos usar o Travel (Viagem) na versão que tem umas "bordinhas" de papel no cabeçalho. Ele pode parecer bem feio a primeira vista, mas depois vamos deixá-lo super fofo.
Para isso vá em modelo > Personalizar e escolha o modelo circulado de vermelho.
Clique em editar HTML e depois em "prosseguir" na mensagem que aparecer.
Logo abaixo disso, você irá apagar apenas o que está destacado em verde na imagem, nada mais nada menos! Atenção para os ponto e vírgula.
Tirar espaço entre a área das postagens e a barra lateral
Use se quiser,eu mesmo nao uso
Agora vamos tirar o espaço entre a área das postagens e a barra lateral.Aperte Ctrl+F no teclado novamente e procure por: .main-inner .column-right-inner {
Apague somente o que estiver em destaque novamente. Dessa vez você pode apagar os ponto e vírgula.
Se quiser aproximar o cabecalho a area de post
Use se quiser,eu mesmo nao uso
Para o próximo passo, precisamos colocar uma imagem de cabeçalho no blog. A Liah fez uma só para dar o exemplo, mas você já 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:
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 no teclado e procure por: /* Tabs
Logo abaixo você verá esse código:
tabs-inner {Apague o que está destacado.
margin: 1em 0 0;
padding: 0;
}
Aperte Ctrl+F no teclado de novo e 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. Se seguiu todos os passos vai ficar mais ou menos assim:
Se quiser salvar esta base va em Modelo> Fazer backup/Restaurar > Fazer download do modelo completo,e ira fazer donwload da sua base feita,recomendo renomiar para saber,e sempre usar quando for fazer teu layout,e nao precisar fazer a base novamente.A base já está feita, agora é só você mudar as cores no designer do modelo e aplicar outros tutoriais para deixar o blog mais elaborado.
A nova interface do blogger está dando problemas na hora de enviar uma imagem de fundo, então se você não conseguir, volte para a interface antiga do blogger clicando em voltar, no topo do painel do blogger.Querem mais algum tutorial é so pedir pela minha ask,ainda mais tutorial basicos como Tirar o sublinhado e coloque efeito fade nos links,Substituir os links "Início", "Postagens anterioriores" e "Postagens mais recentes" por imagens,Colocar Fontes diferentes no seu blog,entre outros.Bjs da Dessa-cha,espero que tenham gostado,todos creditos a CB.
Ask clicando aqui
7 Comment(s)
