Série Como personalizar o blog passo a passo- excluir, adicionar e personalizar recursos extras - * Blog Elaine Gaspareto *

Série Como personalizar o blog passo a passo- excluir, adicionar e personalizar recursos extras

Publicado em 05/02/2018

Tempo de leitura:


Nos 3 primeiros posts da Série Como personalizar o blog passo a passo aprendemos um monte de coisa que modificou drasticamente a aparência do tema-base que estamos personalizando.
Hoje vamos adicionar alguns recursos extras não-nativos do Blogger tais como menu fixo e um slide lindo, e mais umas coisinhas...
Vamos?

Acesse o painel administrativo do blog onde está trabalhando, clique em Tema e a seguir em Editar HTML.
Acesse também a página com os códigos que vamos usar hoje:


Excluir itens desnecessários do template


Acesse o código:

Copiar o código

E cole acima de ]]></b:skin>.
Salve.

E para facilitar a vida de quem está começando eu, como tenho feito ao longo da série, gravei em vídeo o tutorial que vamos seguir hoje.
Aperta o play!


Inscreva-se no canal do blog, ele serve de apoio aos tutoriais do blog, e assim você não perde os vídeos extras que publicarei apenas lá.
Inscreva-se!


Adicionar  elementos de página não-nativos ao blog


Perfil com ícones de redes sociais:
Para inserir o gadget Perfil com as redes sociais eu vou usar este tutorial:


Faça tudo conforme explico (menos inserir a fonte especial pois já fizemos isso no 2º tutorial, lembra?) e coloque como primeiro gadget na coluna lateral.
Quando personalizamos a sidebar eu deixei configurado para que esse primeiro gadget não tenha fundo, então aí é o lugar ideal para a foto de perfil, ok?
Fez tudo? Escolheu imagem de perfil, colocou a mini biografia, os links nos ícones das redes sociais, etc...?
Vamos adiante!

Botão Voltar ao topo:
Para inserir o botão Voltar ao topo eu segui este tutorial:



Siga os passos indicados, configure as cores como desejar e salve.
Caso prefira usar outro estilo de botão Voltar ao topo veja as opções que temos aqui no blog:

Acessar os tutoriais


Paginação numerada:
Eu escolhi usar este tutorial:


Configure tudo de acordo com o tutorial, ajuste as cores como desejar e está feito.
Não esqueça de colocar a quantidade de posts a serem exibidos igual ao que estiver no modo Layout, ok?
Caso não goste de paginação numerada pode pular essa parte.


Adicionar slide:
No meu tema-base eu optei por usar o slide de posts recentes que mostro nesse tutorial:


Escolhi mostrar os posts de um marcador específico e não os posts recentes gerais.
Fica a seu critério, tá?
Siga exatamente o que o tutorial ensina e não tem erro.

Também é possível substituir o slide de posts recentes por um slide de destaques.
Caso prefira um slide de destaques use este tutorial:


Acessar o tutorial


Menu responsivo fixo no topo:
Agora vamos instalar o menu fixo no topo.
Escolhi a versão que é responsiva para facilitar quando, na próxima minissérie, formos converter este template em um totalmente responsivo.
Para instalar o menu siga este tutorial:


Acessar o tutorial

Menu instalado?
Configure nomes de abas e links como desejar.
Se preferir deixar sem os links e sem definir os nomes das abas, tudo bem. Por hora importa só que ele esteja aí e funcionando.
Ajuste cores e fontes se desejar e salve.
As cores e as fontes são ajustadas via painel: Tema/Personalizar/Avançado/Plano de fundo das guias/Texto das guais.
Como digo no tutorial que ensina como instalar o menu eu usei variáveis do Blogger para que seja possível personalizar o básico do menu através do painel.
Legal, né?

Neste momento nosso tema-base está assim:


E pensar que quando começamos era assim:


Não é incrível?

Por hoje terminamos.
No próximo tutorial da Série Como personalizar o blog passo a passo vamos personalizar a área dos comentários, adicionar o cabeçalho ocupando a largura total da página e excluir códigos e itens desnecessários do tema-base.
Também vamos fazer os ajustes finais, e vou te mostrar como é possível fazer coisas ainda mais incríveis usando a mesma base que personalizamos.

Aí teremos concluído a parte da personalização do tema-base e vamos poder começar a Série Como tornar responsivo um template nativo do Blogger.
Vai ser incrível!
💜
Muito obrigada por acompanhar a série até aqui!
Se você tiver alguma dúvida ou sugestão diga nos comentários, por favor!
Fale comigo, é ruim ter a impressão que estou falando sozinha...





17 comentários via Blogger
comentários via Facebook

17 comentários:

  1. Olá Elaine tudo bem ??
    A 1ª caixa com os códigos está com defeito, não abre , dá page Not Found.

    ResponderExcluir
    Respostas
    1. Luciana, já corrigi. Hoje só tem os códigos de exclusão, os demais possuem cada um seu próprio tutorial :)

      Excluir
    2. Gratidão imensa, estou aqui fazendo a festa, encrementando meu cantinho, tão bom quando vemos tudo ficando harmonioso !! Não tenho palavras para te agradecer !! =D

      Excluir
    3. Elaine, mais uma dúvida, eu de novo kkkkkkk
      No caso do menu responsivo fixo no topo, para ser responsivo tem que ficar fixo no topo, não pode ser abaixo do título do blog ?? Acho bem mais bonito abaixo do cabeçalho.

      Excluir
    4. Luciana, não precisa ser não, pode ser abaixo do cabeçalho, desde que o menu em si seja responsivo...

      Excluir
  2. Boa tarde Elaine
    Você não tem ideia de como estou me sentindo,achava que para mim aquela parte do HTML era intocável.Quando você postava os tutoriais,ficava querendo muito,mas e o medo de fazer e dar errado.Agora com essa série e o passo a passo,está ficando tranquilo,todo dia treino um pouquinho e claro logo vou aplicar no blog.
    Beijos,que Deus te retribua em dobro, em triplo...

    ResponderExcluir
  3. no meu nao da certo o slide e o rodape do blog.. fiz tres blogs de testes ja e estou seguindo certinho o seu tutorial só que quando em um da certo uma coisa outra coisa nao da kkk nao sei oque eu to fazendo de errado

    ResponderExcluir
  4. Olá Elaine, boa noite! Eu acredito ter seguido rigorosamente o tutorial e o fiz algumas vezes seguidas, mas não tive o mesmo sucesso que você.
    Por favor, poderia me ajudar dando uma dica de onde posso ter errado?
    O endereço do meu blog é https://curvefitmodafitness.blogspot.com/
    Obrigada!

    ResponderExcluir
    Respostas
    1. Curve Fit, não tem como eu saber onde está o erro porque não vi exatamente como vc fez.
      Mas a dica é: baixe o template que disponibilizo ao final do tutorial e vá comparando o que tem nele com o que vc está fazendo, até achar onde está o erro.
      Aliás, qual exatamente foi o problema? O slide?

      Excluir
    2. Olá Elaine, obrigada pelo retorno! Sim, a personalização do slider não ficou no mesmo formato que o seu e de outras pessoas que vi. Vou acompanhar os vídeos até o fim e depois faço a comparação como sugeriu. Outra dúvida, você acredita que possa ter havido alguma atualização do blog padrão do blogger que pode ter entrado em conflito com os códigos de personalização, por exemplo a biblioteca JQuery?

      Obrigada novamente pela atenção!

      Excluir
    3. Não, nenhuma atualização afetaria a personalização.
      E mesmo quando há alguma alteração em geral não afeta nenhum desses códigos...

      Excluir
  5. Oi Elaine, primeiramente, obrigada pelos tutoriais, estou tendo a oportunidade de deixar meu blog do jeitinho que quero, estou muito agradecida de verdade, compartilho suas postagens para mais e mais pessoas encontrem esse blog maravilhoso.
    Estou com dificuldade em excluir coisas desnecessárias, não dá certo. Já tentei refazer essa parte do tutorial, mas mesmo assim não some. O que eu faço?

    ResponderExcluir
  6. Primeiramente obrigada, nem acredito que estou fazendo meu próprio template, estou compartilhando postagens do blog para que mais pessoas conheçam esse lugar maravilhoso que você criou aqui.
    Estou tendo dificuldades nos códigos extras, eu refaço essa parte do tutorial, mas mesmo assim as coisas desnecessárias não somem, o que eu faço?

    ResponderExcluir
    Respostas
    1. Kalita, vc seguiu certinho o tutorial?
      O que exatamente não desapareceu?
      Qual o endereço do blog?

      Excluir
    2. Oi, meu blog de testes é esse aqui https://templatekatherina.blogspot.com/
      Assinar: Postagens (Atom) e Tecnologia do Blogger. não somem. Além disso, meu Instagram ficou estranho, mesmo eu tendo adicionado a fonte, o que eu faço.

      Excluir
    3. Kalita, não sei o motivo de não funcionar. A melhor sugestão que posso dar é: baixe o template que disponibilizo ao final da série e instale-o. Aí vá conferindo parte por parte o que eu fui fazendo, até descobrir onde está errando...
      Olhei o código fonte e não achei o erro, por isso faça o que sugeri, baixe, instale e confira item por item até descobrir o problema. Sim, dá trabalho rsrs mas é assim que a gente aprende...
      bjsssss

      Excluir
    4. Obrigada pela atenção e carinho que tem com nós leitores. Vou seguir o seu conselho!

      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…