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


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




7 comentários via Blogger
comentários via Facebook

7 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

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…