16.4.12

Criando um modelo básico para o blogger

Oi flores , tudo bom ?
Vim dizer que eu sempre tive essa dúvida ! Como montar um template básico ? Mas hoje ... Tenho a respota finalmente :)
Vamos ao tutorial ...

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 feinho a primeira vista, mas depois vamos deixá-lo super lindo.

Para isso vá em modelo > Personalizar e escolha o modelo circulado de vermelho.






Depois clique em "Avançado"ali no lado, procure "Plano de fundo da postagem" e escolha uma cor qualquer só para destacar enquanto estivermos fazendo as modificações no HTML.


Clique em aplicar ao blog e depois em voltar para o blogger. Agora vamos mexer no HTML do blog para deixá-lo bonitinho.


Clique em editar HTML e depois em "prosseguir" na mensagem que aparecer.

Vamos começar as modificações. Primeiro vamos tirar aquelas bordinhas de papel horrorosas. Aperte Ctrl+F e procure por .content-outer .content-cap-top {
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.



Seu layout deve ficar assim:



Agora vamos tirar o espaço entre a área das postagens e a barra lateral.
Aperte Ctrl+F 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.


Visualize como ficou e veja que agora a sidebar está coladinha nos posts. Salve as alterações e vá para o layout do seu blog.


Para o próximo passo, precisamos colocar uma imagem de cabeçalho no blog. Eu fiz 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:


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: 1em 0 0;
  padding: 0;
}

Apague o que está destacado.
Aperte Ctrl+F 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. 

P.s todos os créditos ao blog Cherry Bomb 
Se você gostou do post .... comenta :)
Beijookas

Nenhum comentário:

Postar um comentário

Oii , muito obrigada por comentaar , significa muito para mim , e só pra avisar , eu amei seu comentário haha . Vou responder seu comentário dentro de 1 dia .
Mas antes de clicar em "publicar" , vou logo avisando :
- Comentários ofensivos serão ignorados
- Comentários de parceria só na página "Blogrow"
- Quer um post ? É só mandar um e-mail para cupcakederendas@hotmail.com que eu farei o post com muito amor haha .

Beijoos da tia Ana