Big Tutorial - Criando seu próprio layout

Oi garotas
Lembram que num post passado tinha uma enquete sobre o que vocês queriam ver num próximo post? Então, a maioria dos votos foram no Big Tutorial, então aqui está. Esse post vai ser beeem grande, se preparem haha.
PS: Quem votou em alguma das outras duas opções, não fique triste, mais pra frente posto elas também, ok?

Vou ensinar vocês a personalizar seu próprio layout, começando do modelo básico do blogger.

Clique em "Ler mais" para ver o tutorial.



Recomendo que crie um blog de teste para fazer esse tutorial, ou faça backup do seu modelo atual. Pra evitar problemas, é sempre bom né?

+ Clique nas imagens para vê-las em tamanho maior.

01. Vá em Modelo - Personalizar - Modelos e escolha o ultimo (Viagem) azul e branco, como mostra abaixo:

02. Escolha um background e salve em seu computador. Eu separei alguns para vocês: 01 | 02 | 03 | 04
Agora clique na flechinha logo ao lado de "Remover Imagem", e clique em Fazer Upload da Imagem - Escolher Arquivo, como mostra abaixo:

03. Vá para Layout e escolha esse (o resto do tutorial vai ser em cima desse modelo):

04. Em Ajustar Larguras escolha 1030, 270 e 240, como na figura:

05. Clique em Aplicar ao Blog e vá para Avançado - Texto da Página:

Escolha uma das seguintes fontes: Arial, PT Sans Narrow , Neucha , Josefin Sans ou Calibri. Deixe num tamanho legível. As cores: preto ou cinza.

06. Em Planos de Fundo deixe os dois transparentes:

07. Em Título do Blog deixe tamanho 0px e a cor transparente:

08. Em Cabeçalho da Data coloque a mesma fonte que usou no Texto da Página, e escolha uma cor de sua preferencia.

09. Em Plano de Fundo da Postagem coloque branco.

10. Em Título da Postagem escolha a fonte que preferir:

Recomendo: Calligraffitti, Coming Soon, Corsiva, Covered By Your Grace, Crafty Girls, Homemade Apple, Indie Flower, Just Another Hand, Lobster, Rock Salt, Schoolbell, Sue Ellen Francisco, Sunshiney, Unkempt, Walter Turncoat. 

Coloque num tamanho um pouco maior e uma cor de sua preferencia (não muito clarinha para não ficar ruim de ler).

11. Em Texto do Gadget coloque a mesma fonte que usou para o Texto da Página.

12. Em Plano de Fundo da Barra Lateral coloque a Cor da Moldura transparente. A Cor do Plano de Fundo pode deixar como estiver, vamos mudar mais pra frente.

13. Clique em Aplicar ao Blog e Voltar Para o Blogger. Agora vá em Editar HTML.

14. Vamos tirar o espaço entre as postagens e a sidebar. Para isso, usando o Ctrl+F procure pelo seguinte:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Quando encontrar, apague apenas as partes destacadas em azul na imagem abaixo:

Visualize: se as 3 barras estiverem juntinhas, salve.

15. Agora, para tirar aquela imagem horrível de "papel" por trás do blog, localize:

content-outer .content-cap-top {

Então apague as partes destacadas em azul:

Visualize: se esse negócio horrível tiver saído, salve.

16. Agora vamos arredondar os cantos do rodapé. Procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Logo abaixo disso cole o seguinte:

-webkit-border-bottom-right-radius: 20px;-moz-border-radius-bottomright: 20px;border-bottom-right-radius: 20px;

Então procure por:

 .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

E logo abaixo cole:

-webkit-border-bottom-left-radius: 20px;-moz-border-radius-bottomleft: 20px;border-bottom-left-radius: 20px;

Visualize, se os cantos do rodapé estiverem arredondados, salve.

17. Agora vamos escolher uma cor para cada uma das barras laterais. Usando o CTRL+F, procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Logo abaixo cole o seguinte, e com a ajuda dessa tabela faça as mudanças:

background: #C0FF3E; /*Cor da barra lateral direita*/

Visualize, se estiver tudo certo, salve e procure pelo seguinte: 

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Logo abaixo cole o seguinte, fazendo as devidas substituições:

background: #006400; /*Cor da barra lateral esquerda*/

18. Para mudar as cores dos links do seu blog, use esse tutorial.

19. Vamos personalizar o título das postagens?
Em Editar HTML procure por:

h3.post-title {

Logo abaixo cole o seguinte:

text-align: center;  

Visualize, se o título estiver centralizado, salve. Agora use esse tutorial para tirar o sublinhado, personalizar as cores e colocar efeito fade.

20. Agora vamos colocar um cabeçalho. Separei algumas bases pra vocês (se usarem, lembrem de dar os devidos créditos à criadora): 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09
Abra a imagem, edite colocando o nome do seu blog e salve. Para coloca-lo no lugar vá em Layout e abra o gadget do cabeçalho. Carregue a imagem, e selecione "Por trás do título e descrição" e desmarque a opção "Reduzir para ajustar", como mostra abaixo:

21. Agora você precisa juntar o cabeçalho com o resto layout. Então faça o seguinte:
Em Editar HTML, localize:

.main-inner .column-center-outer {

Logo abaixo cole:

margin-top: -40px;

Vá alterando o número até juntar direitinho e salve.
Agora procure por:

.main-inner .column-center-inner { 

Logo abaixo cole:

margin-top: -40px;

Altere o número até que as postagens fiquem na posição certa. Salve.

22. Seu layout já esta bem bonitinho, você só precisa fazer algumas personalizações pra deixar ele com a sua cara. Para isso, use esses tutoriais:
Barra de rolagem | Seleção colorida | Blockquote personalizado | Comentários personalizados | Como colocar divisória entre os posts | Caixa de pesquisa personalizada | Favcon personalizado | Negrito, itálico e sublinhado personalizados | Caixa de afiliados | Tags, autor e comentários abaixo do Título  | Borda entre a sidebar e a barra de postagens | Todas as imagens com cantos arredondados 

23. Agora que seu layout já esta prontinho, que tal colocar os créditos à esse tutorial em algum lugar dele? Muito obrigada a quem fizer isso (:

<br /><a href="http://depois-da-primavera.blogspot.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxMhWmt5xa11WrxExl_T12aJGJBR31cptlwQx8gLFOdCOX1HbpASmFNihx1pQVC8lCnxxat_dBNHTAvXqGMrI1GzWWKRIqVaymJFV3yxq6uRNwptEEA73gEPzzUryYZIKbGHytWjHkqKY/s1600/Sem+T%C3%ADtulo-1.png" /></a> <br /> Bom meninas, é isso. Qualquer dúvida me perguntem que vou tentar o máximo ajudar, ok?<br /> Ah, só para constar, uma parte desse tutorial aprendi no blog<b> </b><a href="http://goimagines.blogspot.com/" target="_blank">Go Imagine</a>. (:</div>

Bom, é isso por hoje. Espero que tenham conseguido fazer um layout bem legal. E qualquer dúvida não pensem duas vezes antes de me perguntar, vou fazer o máximo pra ajudar, ok?

Eu queria agradecer ao blog Go Imagine porque foi lá que aprendi o comecinho desse tutorial. (: