Como personalizar o blog passo a passo- modificando o tema-base

Na primeira postagem da Série Como personalizar o blog passo a passo nós vimos a apresentação da série, a criação do blog de testes, a escolha do tema-base que vamos personalizar e criamos ao menos 5 posts com texto, imagem e marcadores.
Relembre a primeira parte da série:
Como personalizar o blog passo a passo- 1ª postagem

Fez tudo isso?
Então agora você está pronto para começar de fato a personalização.
E para ajudar você eu gravei em vídeo tudo o que faremos hoje.
Tentei ser o mais rápida possível, então faça um esforço e veja o vídeo todo, assim não terá qualquer dificuldade em realizar essa primeira etapa de reestruturação. O tutorial por escrito está logo abaixo do vídeo, aperta o play e ouça enquanto vai lendo e fazendo o passo a passo!!

Reestruturar e modificar o tema-base nativo do Blogger

Configuração do tema-base
No painel do blog no qual estamos trabalhando clique em Tema e a seguir clique em Personalizar.
Vai abrir a página com o painel do Blogger para as personalizações básicas.
Nessa minissérie eu escolhi trabalhar com um dos modelos do tema Viagem, que neste momento está assim (feio de doer, eu sei...):

Selecione-o caso já não tenha feito isso, aplique ao blog de testes que está usando e configure assim:

⏩ remova o plano de fundo;
⏩ ajuste a largura para 1135px e a largura da sidebar para 340px;
⏩ coloque a cor de fundo que desejar; eu escolhi a cor #faf2ff;

⏩ defina a cor de fundo das postagens em #ffffff;

⏩ defina a cor do plano de fundo das guias em #000000 e a cor selecionada em #ffffff;

⏩ coloque a cor do texto das guias em #ffffff e a cor do texto selecionado em #000000;

⏩ defina a cor e o tamanho da fonte dos posts; no caso do meu teste eu escolhi trabalhar com a fonte Open sans para o texto, tamanho 16px. 

⏩ especifique o tamanho, a cor e a fonte dos títulos dos posts; no caso do meu teste eu escolhi trabalhar com a fonte Montserrat.  

⏩ defina a fonte dos títulos dos gadgets como preferir e a cor defina em #ffffff; também escolhi a fonte Montserrat.

Não se preocupe: tudo isso (cores, fontes, etc) poderão ser alterados depois.
Escolhi essas duas fontes: Montserrat e Open Sans porque elas combinam entre si. Evite escolher fontes demais, o ideal é que usemos de 2 a 3 fontes apenas no blog. Ok?

Fez todas as modificações?

Salve e volte ao painel administrativo do blog.

Nesse momento nosso template estará assim:

Ajustar as configurações do Layout
No painel administrativo do blog clique em Layout.
Abaixo da área Postagens no blog clique  em Editar.
Configure assim:

Salve.

Deletando o fundo escuro semi-opaco:

Agora vamos de fato  modificar o template.
No painel do blog clique então em Editar HTML e dentro da caixa de código-fonte tecle Ctrl+F.
Na barra de busca que expandir cole isso:

https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_50.png

E tecle Enter para localizar.
Aparecerão algumas ocorrências desse endereço.
Assim como na imagem:

Selecione todas as linhas marcadas em amarelo e apague.
Isso vai excluir o fundo semi-transparente escuro do template.
Localize e apague também:

https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_70.png

Salve.
Ficará assim:

Preparar a área do cabeçalho:
A seguir vamos preparar a área abaixo do cabeçalho para receber mais gadgets e também vamos centralizar o cabeçalho.
Na barra de busca digite Cabeçalho e localize.
Aparecerá um trecho assim:

Onde está escrito maxwidgets='1' altere para maxwidgets='4' e salve.
Onde aparece showaddelement='no' altere para showaddelement='yes' e salve.
Onde está locked='true' substitua por locked='false' e salve.

Agora, na barra de busca, digite <img expr:alt='data:title' e tecle Enter.
Aparecerá esse trecho:

Coloque a tag para centralizar o cabeçalho, assim:

E salve.
Isso se aplica quando usamos imagem como cabeçalho.
Para centralizar quando não usamos imagem localize .Header h1 { e abaixo disso digite: text-align: center;
E salve.

Por hoje terminamos.
Na próxima quarta-feira tem a continuação da Série Como personalizar o blog passo a passo.
Vamos aprender como personalizar a área do post: dividir em caixas, personalizar fonte, data, colocar botões de compartilhar e mudar o rodapé dos posts. E muito mais!

Até lá!
Espero você!
Não vá se atrasar, hein!