#AarteDeBlogar : Criando um layout básico para o blog

Olá pessoal :) Hora de começar a viagem pela tag #AarteDeBlogar! E nada melhor do que começar pelo design (aparência) do blog não é mesmo? Hoje vou ensinar como criar um layout (modelo) básico para começar a personalizar seu blog! Vamos lá?  ( Clique em leia mais para ver a postagem completa)




1- No painel inicial do blogger, clique na setinha ao lado de Visualizar blog e depois em Modelo como mostra a imagem:

2-  Na página seguinte, clique em Personalizar :

3- A seguir, a página de personalização do blog irá aparecer, clique em Modelos, selecione o modelo Viagem e abaixo selecione a segunda opção como mostra a imagem:

4-  Depois, clique em Plano de fundo e selecione Remover Imagem. Você também pode escolher outro plano de fundo para seu blog, o blogger tem vários, mas você também pode escolher um outro que baixar na net ( veremos isso mais no final do post ).

5-  Você pode ajustar a largura do seu blog como preferir, eu recomendo que coloque no máximo 980x300 pois em computadores com tela pequena pode ficar desregular.

6-  O Layout você pode escolher de sua preferência, mas eu recomendo que deixe assim:

7- Clique em Avançado para personalizar tudo em seu blog, como a cor dos links, da letra, do título da postagem etc; Mas não deixe de fazer isso: clique em Planos de fundo, depois mude para transparente como mostra a imagem:

Percebeu que ficou um fundo estranho, parecendo papel amassado no modelo? Para tirar esse fundo estranho é só ver esse tutorial:

• Antes de sair da página de personalização, não se esqueça de clicar em Aplicar ao blog (botão laranja  que fica em cima no canto direito) se não você perde tudo haha
• Vá em Modelo e dessa vez clique em Editar Html
• Clique em algum lugar nesses códigos e depois aperte Crtl+F e cole na caixa de pesquisa o seguinte código: content-outer .content-cap-top {
• Vai aparecer isso:

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

}

• Apague tudo que está em roxo, mas atenção, cuidado pra não apagar o ponto e vírgula em frente ( ; ) se não dá errado ok? 
• Pronto! o fundo de caderno amassado sumiu!

Agora sim, o blog está novinho em folha para você personalizar como quiser! Veja como:

Colocar fundo no blog:

Primeiro, vamos achar um fundo legal, pesquise no google "Backgrounds" e vai aparecer várias opções, salve a imagem que gostar em seu computador e mãos a obra:

• Vá em modelos, depois em personalizar, como vimos lá em cima e clique em Plano de fundo de novo. 
• Clique em no quadrado escrito "Nenhum" como mostra a imagem abaixo. Depois, na janela que abrir, selecione Fazer upload da imagem, e depois clique em Escolher arquivo. Aí é só escolher a imagem que você salvou, clicar em concluído e pronto!

Aqui vai algumas sugestões de backgrounds para usar no seu blog, é só salvar no seu computador e colocar no blog como foi explicado acima.

 

Qualquer dia faço um post só de backgrounds para blog ta? ^-^

Colocando um banner no blog

Banner é o cabeçalho, ou título do blog, para fazer um é bem simples, mas você vai precisar de um photoshop (eu uso o photoscape) mas outro dia eu faço uma postagem explicando como fazer. Hoje trouxe dois banners prontos para você escolher, olha só:

-x-

Salve o que mais gostou e a seguir faça o seguinte:

• Vá em seu blog e clique em Layout , na aba cabeçalho clique em editar como na imagem:

• Na nova janela que abriu, escolha o banner que você salvou em seu computador e deixa marcada a opção "por trás de título e descrição", clique em salvar e pronto. 

Depois de tudo o que fizemos até agora, seu blog pode estar mais ou menos assim:

E ai, gostaram? Espero que sim ^-^
Em breve vou postar mais dicas para vocês, por hoje é só...
Beijos da Sah :3