Como personalizar o blog passo a passo- modificando o tema-base - * Blog Elaine Gaspareto *

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

Publicado em 22/01/2018

Tempo de leitura:

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!





8 comentários via Blogger
comentários via Facebook

8 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

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.
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…