Como personalizar o blog passo a passo- modificando o tema-base - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

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

Publicado em 22/01/2018

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:



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:



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!



13 comentários

  1. Boa tarde Elaine
    Acho que consegui,vendo você fazer parece fácil,na hora de colocar em prática é que são elas.Também é um bom exercício para memória.
    Bjs

    ResponderExcluir
    Respostas
    1. Maria, por isso fiz o vídeo, porque ver pode ajudar.
      Faça devagar, reveja o vídeo quantas vezes precisar, faça com calma.
      Devagar dará certo. E sim, é mesmo um exercício bem bom!!!
      bjssss

      Excluir
  2. Oi Elaine! Como faço para desativar as ferramentas de edição? Meu blog está como o seu exemplo, acima, aparecendo essas "ferramentinhas" que dão acesso à edição de cada parte do blog. Não sei se me explico... rs

    ResponderExcluir
    Respostas
    1. Sandra, tem jeito sim, vou ensinar no post sobre a sidebar.
      Mas essas ferramentinhas só aparece pra mim em meu template, e só aparecem pra ti em seu template. Ninguém tem acesso, s[o o dono do blog, e estando logado.
      Eu gosto delas, facilita a vida rsrsrsr

      Excluir
  3. ola elaine como eu faço para colocar bordas na area do post

    ResponderExcluir
    Respostas
    1. Depois que tiver realizado o segundo tutorial da série, aquele que ensina como personalizar a área do post, acrescente, abaixo de .post-outer { o seguinte comando:
      border: 1px solid #CÓDIGO DA COR QUE ESCOLHER;
      1px solid é o tipo e espessura da borda. altere como desejar.

      Excluir
  4. Elaine, só consigo altera com essa orientação se for no tema que você escolheu? estou tendo dificuldade em alterar o cabeçalho

    ResponderExcluir
    Respostas
    1. Jeanne, via de regra o cabeçalho é alterado de forma igual para todos os temas. Qual está sendo a dificuldade?

      Excluir
  5. Olá! o titulo do me blog não está querendo centralizar. o que faço quando isso acontece?

    ResponderExcluir
    Respostas
    1. Rutileia, deu certo? Olhei agora e está centralizado, né?

      Excluir
  6. Olá, fiz o comando para centralizar a imagem no cabeçalho quando não for texto, porem não quer centralizar, fica sempre para a direita, o que pode ser?

    ResponderExcluir
    Respostas
    1. Victor, olhei seu blog e está centralizado.
      Deu certo, né?

      Excluir
  7. Antes de tudo, parabéns pelo trabalho e obrigada por compartilhar o que sabe.
    Estou seguindo o passo a passo, mas na hora de centralizar a imagem do cabeçalho, não consigo salvar a alteração, aparece essa mensagem: org.xml.sax.SAXParseException; lineNumber: 721; columnNumber: 204; O conteúdo dos elementos deve consistir em dados de caractere bem formados ou marcação.
    Se eu simplesmente ignorar, não completo esse passo.
    Poderia me ajudar?

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…