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

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:

 Modelos prontos para personalizar os comentários do blog

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:

 Instagram no rodapé do blog, ocupando a largura total da página

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:

 Cabeçalhos grátis para blogs

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):

https://template-catherine.blogspot.com.br/

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.

Aprenda aqui como extrair e desagrupar vetores usando o Inkscape

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!