Série Como personalizar o blog passo a passo- ajustes finais e dicas extras - * Blog Elaine Gaspareto *

Série Como personalizar o blog passo a passo- ajustes finais e dicas extras

Publicado em 19/02/2018


E chegamos à etapa final da Série Como personalizar o blog passo a passo.
Hoje vamos inserir os elementos que faltam ao template, personalizar a área dos comentários, inserir cabeçalho ou logo personalizado, plano de fundo e fazer os ajustes finais!
E eu vou te dar dicas extras de como modificar tudo nele usando o painel administrativo do Blogger e alguns trechos de código HTML.
Vamos trabalhar?

Como sempre eu gravei o tutorial em vídeo.
Ficou longo, eu sei, mas vale a pena caso você tenha alguma dúvida ou queira ter mais segurança ao fazer o passo a passo.
aperta o play!


Se inscreve no canal, ele serve de apoio aos tutoriais do blog, e assim você me ajuda demais!.
Inscreva-se!


Personalizar área dos comentários:
Aqui no blog há muitos tutoriais que trazem códigos prontos para personalizar a área dos comentários.
Veja:


Escolha o modelo que preferir e siga o tutorial que escolher, tudo dará certo!
Se preferir usar o mesmo modelo que eu usei deixarei o código completo na página com os códigos de hoje, ok?

Por padrão a área dos comentários estão assim:


Vamos deixa-los assim:


Se optar por usar o modelo que eu usei basta copia-lo da página com os códigos de hoje, editar as cores e fontes e voilà


Copiar o código


Gadget Instagram no rodapé:
Eu usei este tutorial:


A fonte que escolhi foi a Great Vibes (que também coloquei nos botões de compartilhar).
Escolha a fonte que preferir, aplique o tutorial e suas atualizações do Instagram aparecerão exatamente como em meu tema-base.

Eliminar itens desnecessários e corrigir formatação:
Agora vamos excluir algumas coisas desnecessárias do template, coisas que não vamos usar.
Na aba Tema do template tecle Ctrl+F e na barra de busca que expandir digite
/* Tabs
Tecle Enter para localizar e selecione até achar
/* Headings
Apague tudo que estiver antes de /* Headings.
Salve.

Em /* Headings coloque .sidebar antes de  h2 { ficando assim:
.sidebar h2 {
Salve.

Personalizar o cabeçalho:
Na barra de busca digite
<b:if cond='data:skin.vars.body_background.image.isResizable'>
Localize, selecione como na imagem abaixo:


E apague.
Salve.
Esse código serve para redimensionar automaticamente o header, mas nós não queremos isso nesse momento. Então, apague sem dó!

Cabeçalho ocupando a largura total da página:
Para fazer isso vou usar este tutorial:


Acessar o tutorial


Crie seu cabeçalho como desejar ou se preferir use um dos modelos gratuitos que disponibilizo ao final deste post.
Siga o tutorial para instalar o plano de fundo, crie o nome do blog conforme explico no tutorial e deixe tudo pronto.

Se, ao invés de usar um plano de fundo na largura total da página você preferir usar um cabeçalho mais simples, também pode!
Nesse caso não siga o tutorial Cabeçalho ocupando a largura total da página.
Crie seu cabeçalho e o insira via modo Layout, assim:

  1. No painel administrativo do blog clique na aba Layout;
  2. Clique em Editar, na área do cabeçalho;
  3. A seguir clique em Escolher arquivo e aí faça o upload do cabeçalho que deseja usar; espere a imagem carregar, defina que ela apareça Em vez do título e descrição, e salve.
  4. Salve a organização do Layout.
Caso queira usar um plano de fundo no blog ao invés da cor sólida faça assim: acesse a aba Tema e clique em Personalizar.
A seguir, no painel, clique em Plano de fundo.
Clique dentro da caixinha Imagem do plano de fundo e clique em Fazer upload da imagem.
Localize o background que deseja usar, carregue a imagem, defina se deseja que ela role ou não com a página, defina o alinhamento, e salve.

Veja também:



E terminamos!
A parte de personalização do template está concluída!
Olha como ficou o Template Catherine pronto (clique sobre a imagem ou sobre o link abaixo dela e veja online):



Nesse template você pode aplicar todo e qualquer tutorial meu e sempre dará certo.
Também pode modificar, como mostrei no vídeo acima, tudo do template: cores, plano de fundo, cabeçalho/logo, fontes, disposição dos elementos de página, inserir todas as otimizações e técnicas de SEO que ensino no blog, etc...


Baixar grátis o Template Catherine


E, conforme prometi no começo da série disponibilizo abaixo o template do meu blog de testes.
Ao baixar e instalar em um blog de testes seu você terá exatamente o mesmo resultado que eu tive.


Baixar o Template Catherine


Cabeçalhos e logos grátis para blog- baixe e use!


Também estou disponibilizando alguns presentes extras pra você usar em seu blog.
Estão todos em formato png com fundo transparente e podem ser usados no Template Catherine ou em algum outro que preferir.

Aqui tem mais templates grátis pra você baixar e usar os cabeçalhos.

Clique sobre a imagem e ela será aberta em tamanho real, aí salve em seu computador e use em seu blog.









Baixar o Template Catherine

Créditos:
Todos os cabeçalhos e logos foram feitos usando vetores Freepik.



IMPORTANTE!
Assim como qualquer template que eu disponibilizo aqui você não pode vender, nem disponibilizar em seu blog.
O jeito certo é compartilhar e direcionar seus leitores para que baixem diretamente aqui no blog.
Não disponibilize nem os cabeçalhos e muito menos o Template Catherine em seu blog.
Diga aos seus leitores onde eles estão e cada pessoa baixa daqui.
Ok?


Mas espero que, muito mais do que baixar, você se aventure, faça os tutoriais todos da Série Como personalizar o blog passo a passo e descubra a beleza de fazer sua própria personalização, e veja como é lindo quando a gente consegue!


Como tornar responsivo um template nativo do Blogger?

A próxima série que vamos ter aqui no blog vai ensinar como tornar responsivo este e qualquer outro template nativo do Blogger.


Pra não perder o início da nova série você pode:

→ Seguir o blog via gadget Seguidores: basta clicar em Participar deste site ali na lateral do blog e concluir o processo;

→ Pode curtir nossa fanpage: todos os posts têm seu link enviados pra lá no momento em que são postados. Basta clicar em Curtir!




→ Cadastre seu email e receba a atualização direto nele, assim que for postada.
Digite seu endereço de email:


Ou seja: mil maneiras de você não perder!
A gente se vê muito em breve na nova Série Como tornar responsivo um template nativo do Blogger!
Espero por ti, não vá se atrasar, hein!




25 comentários via Blogger
comentários via Facebook

25 comentários:

  1. Amei essa série e já estou ansiosa pra outra! Vai lá conferir como ficou no meu blog!
    http://www.blogsorrisosecachos.com.br/ Beijoooos!

    ResponderExcluir
  2. Olá Elaine, eu gostaria de fazer uma sub aba na sub aba, mas não consegui, você poderia me ajudar? Obrigado.

    ResponderExcluir
    Respostas
    1. Luiz, esse menu não é multinível, não tem como inserir sub aba na sub aba...

      Excluir
  3. Oi Elaine! Muito legal essa série, pena que minha cabeça já não dá conta. Nessas horas queria ser jovem de novo, neurônios novinhos em folha! rsrs
    Abraço!

    ResponderExcluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Oi Elaine. Eu adoro tudo o que vc ensina, mas ainda não usei. Não entendo muito de computador e como meu blog foi feito com um template pronto faz tempo, tenho medo de não conseguir modificar. rsrsrs

    ResponderExcluir
    Respostas
    1. Maria, segue o passo a passo em um blog de testes, um pouco de cada vez e vc vai se surpreender em como é fácil e divertido!
      Acredite, vai dar certo!
      beijossss

      Excluir
  6. Olá Elaine tudo bem?
    Estou seguindo seu passo a passo...novíssima nessa área e estou com muitas duvidas...mais não encontrei o primeiro vídeo,vc pode me ajudar colocando o link.Obrigada bjos!!

    ResponderExcluir
    Respostas
    1. Keila, o primeiro post da série não tem vídeo, só do segundo em diante.
      Você pode localizar todos os posts e os vídeos correspondentes clicando na aba Série de tutoriais, no menu, e aí clica em Série Como personalizar o blog passo a passo.
      Se tiver dificuldades ao longo do caminho deixe sua dúvida nos comentários e eu ajudo assim que possível.
      beijossss

      Excluir
    2. Realmente...voltei lá e e consegui,obrigada... só que agora nos posts,segui certinho...juro..só aparece um post ao invés de três...como o seu o que faço?

      Excluir
  7. Oi Elaine
    Nem acredito,hoje pela primeira vez mexi no HTML do blog.Não fiz aquela mudança radical,mas coloquei várias coisas:botões de compartilhar,postagens relacionadas e páginas numeradas.Aos poucos vou deixando a aparência do blog bem melhorada.Obrigada por esse aprendizado.Quando aumentar as medidas,o menu vai ficar descentralizado,não queria mudar gostei tanto do tutorial,tem como centralizar?
    Bjs

    ResponderExcluir
    Respostas
    1. Maria, de qual menu vc está falando?
      bjssss

      Excluir
    2. Desse blog https://cantinhopassatempo.blogspot.com.br/

      Excluir
    3. Maria, centralizar de todo não dá, mas tente localizar isso:

      margin-left: -10px; /*MARGEM DO ESQUERDA, ALTERE SE PRECISAR */

      E alterar o valor -10px para mais ou para menos, até ajustar como deseja.
      Pode dar certo, tem que testar...
      bjssss

      Excluir
    4. Boa tarde Elaine
      Deu certo,aumentei as medidas do meu blog e consegui centralizar o menu.Outra coisa,não consegui alterar a posição de autor e data,será porque fiz sem alterar a área de postagem ou porque o meu tema é diferente.
      Beijos

      Excluir
    5. Sim, pode ser porque o tema que estás trabalhando é diferente.
      E também pode ser por causa da área do post, tem que ir testando pois cada tema tem suas peculiaridades...

      Excluir
  8. Elaine,se puder conferir o resultado do blog de teste:https://blogcantinhoteste.blogspot.com.br/
    O cabeçalho preciso refazer.
    Bjs

    ResponderExcluir
  9. Seu blog me ajuda muito a tornar melhores meus blogs. Continue!

    ResponderExcluir
  10. Elaine, amei esse template, mas não sei como fazer para colocar o nome do meu blog (onde está o Catherine), se não me engano, na verdade me deu um branco e não sei como fazer, me ajuda por favor?

    ResponderExcluir
    Respostas
    1. Vivianne, no tutorial e no vídeo eu explico como fazer isso.
      Releia desde o começo, veja o vídeo, e vc conseguirá com certeza.
      beijossss

      Excluir
  11. Oi Elaine, depois de seguir passo a passo esses tutoriais que você disponibilizou, vim lhe agradecer, pois tenho um blog e eu sempre usava templates baixados na internet. Eu tinha vontade de ter o meu próprio template e graças a você, meu blog está como quero. Você explicou tudo direitinho e deu tudo certo no meu blog, eu fiz algumas modificações, mas obrigada mesmo.
    Já tem um bom tempo que ando acompanhando seu blog e é um dos meus favoritos.
    Deus abençoe sua vida por compartilhar coisas assim que faz muita diferença na vida da gente.

    Andreia Paula Blog

    ResponderExcluir
  12. O template não é responsivo :( somente o menu... poderia mostrar um template responsivo sem ser o 'nativo' do blogger, pois fica muito feio visualmente.

    ResponderExcluir
    Respostas
    1. Daniela, tem outra série no blog que ensina como tornar responsivo um template nativo, dá uma olhada no menu, na aba Séries de tutoriais :)

      Excluir
  13. ola bom dia Elaine , bom gostaria de saber como reduzir o tamanho das fotos no instagram

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