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à!
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.
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:
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:
- No painel administrativo do blog clique na aba Layout;
- Clique em Editar, na área do cabeçalho;
- 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.
- Salve a organização do Layout.
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
Ao baixar e instalar em um blog de testes seu você terá exatamente o mesmo resultado que eu tive.
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.
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?
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.
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
Dias online
Postagens
comentários
Amei essa série e já estou ansiosa pra outra! Vai lá conferir como ficou no meu blog!
ResponderExcluirhttp://www.blogsorrisosecachos.com.br/ Beijoooos!
Olá Elaine, eu gostaria de fazer uma sub aba na sub aba, mas não consegui, você poderia me ajudar? Obrigado.
ResponderExcluirLuiz, esse menu não é multinível, não tem como inserir sub aba na sub aba...
ExcluirOi 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
ResponderExcluirAbraço!
Este comentário foi removido pelo autor.
ResponderExcluirOi 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
ResponderExcluirMaria, 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!
ExcluirAcredite, vai dar certo!
beijossss
Olá Elaine tudo bem?
ResponderExcluirEstou 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!!
Keila, o primeiro post da série não tem vídeo, só do segundo em diante.
ExcluirVocê 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
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?
ExcluirOi Elaine
ResponderExcluirNem 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
Maria, de qual menu vc está falando?
Excluirbjssss
Desse blog https://cantinhopassatempo.blogspot.com.br/
ExcluirMaria, centralizar de todo não dá, mas tente localizar isso:
Excluirmargin-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
Obrigada,vou testar.
ExcluirBoa noite,bjs.
Boa tarde Elaine
ExcluirDeu 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
Sim, pode ser porque o tema que estás trabalhando é diferente.
ExcluirE também pode ser por causa da área do post, tem que ir testando pois cada tema tem suas peculiaridades...
Elaine,se puder conferir o resultado do blog de teste:https://blogcantinhoteste.blogspot.com.br/
ResponderExcluirO cabeçalho preciso refazer.
Bjs
Seu blog me ajuda muito a tornar melhores meus blogs. Continue!
ResponderExcluirElaine, 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?
ResponderExcluirVivianne, no tutorial e no vídeo eu explico como fazer isso.
ExcluirReleia desde o começo, veja o vídeo, e vc conseguirá com certeza.
beijossss
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.
ResponderExcluirJá 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
O template não é responsivo :( somente o menu... poderia mostrar um template responsivo sem ser o 'nativo' do blogger, pois fica muito feio visualmente.
ResponderExcluirDaniela, 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 :)
Excluirola bom dia Elaine , bom gostaria de saber como reduzir o tamanho das fotos no instagram
ResponderExcluir