Série Fazendo meu layout- menu de navegação, slide e paginação numerada - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Série Fazendo meu layout- menu de navegação, slide e paginação numerada

Publicado em 10/06/2019

Série Fazendo meu layout- menu de navegação, slide e paginação numerada
E cheguei para o 4º tutorial prático da Série Fazendo meu layout. Hoje vamos inserir o slide, o menu, a paginação numerada, a navegação entre títulos e outras coisas mais. Vem comigo que temos um monte de trabalho pela frente!

Para começar, como sempre, acesse a página com os códigos específicos dessa série que vamos usar hoje:

Copiar o código


A seguir vá até seu blog de testes, este que estamos personalizando, e clique na aba Tema.
Aí clique em Editar HTML e vamos começar!
Gravei a aula em vídeo, pra não restar pedra sobre pedra nenhuma dúvida.
Aperte o play!


Menu de navegação- a barra de menu
A primeira parte da aula de hoje na Série Fazendo meu Layout: vamos instalar um menu no blog.
Aqui no blog tem vários modelos de menu para blog e você pode escolher qualquer um, desde que seja responsivo.
Eu escolhi este:


Não tem erro, basta seguir o tutorial e tudo dará certo conforme você viu no vídeo do começo do post.
Eu já editei as abas que quero em meu menu pra encurtar o vídeo, e você pode (e deve) editar como desejar.
Se tiver alguma dificuldade maior nessa parte me diz e futuramente eu gravo um vídeo complementar só ensinando a editar as abas e sub abas do menu, ok?
Sigamos.


Slide de posts recentes de uma categoria pré-definida:
Há muitos slides responsivos aqui no blog, mas eu escolhi para esta série este modelo:


Basta clicar no link e seguir o passo a passo do tutorial.
Não tem erro, e ainda tem a execução do tutorial no vídeo deste post.

Paginação numerada e navegação entre os posts:
Aqui começamos a usar os códigos que pedi para acessar no começo da aula.
Vamos inserir a paginação numerada e acrescentar um recurso que sempre me pedem, que é a navegação entre os posts igual eu uso aqui no blog.

Para ter em seu blog é a coisa mais simples do mundo: copie cada um dos códigos que disponibilizei e cole-os como gadget HTML/JAVASCRIPT. Salve, arraste para baixo da área do post e salve novamente.

Deixei configurado, no CÓDIGO DA PAGINAÇÃO NUMERADA, para mostrar 4 posts por página. Altere para mais se desejar mas tenha em mente que se seus posts forem muito grandes ou pesados o Blogger vai fazer sua autopaginação. Então não adianta querer mostrar 10, 14 posts pois não vai rolar.
Tenho notado que até 6 é o ideal, fica a seu critério, ok?

A navegação entre posts é automática, mas você pode alterar o tamanho e o tipo da fonte.
Leia o código, ele te dirá o que fazer.
Não alterando nada, o resultado será exatamente como o meu.


E por hoje terminamos!
Estamos quase finalizando a parte visual da Série Fazendo meu layout; estou ansiosa pra chegar na parte de otimização.
E você?
Tá gostando da série? Tá conseguindo acompanhar?
Tem alguma dúvida sobre o que fizemos até aqui?





16 comentários

  1. Olá, um excelente tutorial este! Estou com um problema, quando coloco o gadjet da paginação aparece uma barra branca abaixo. O que será que fiz errado? Vc poderia me ajudar? https://igrejaarcadaaliancapaulinia.blogspot.com/
    Obrigado
    Deus abençoe.

    ResponderExcluir
    Respostas
    1. Não fez nada errado não.
      Faz assim: veja qual é o ID do gadget da paginação, será algo tipo HTML2 (acho que esse é o ID da sua paginação).
      Aí, acima da tag de fechamento da folha de estilos coloque esse trecho:

      #HTML2{background: transparent !important;}

      e salve.
      O fundo vai sumir.
      Mas tem que conferir se o ID é mesmo HTML2, ok?

      Excluir
  2. Oi Elaine, a área do slide está em branco não aparece nada. O que pode ter acontecido?
    Ps.: estou seguindo seu blog e amando. Parabéns!

    ResponderExcluir
  3. Oii, qual gravador de tela você usa? Como faz pra ter esse efeito no clique do mouse? Amo seus vídeos

    ResponderExcluir
  4. Fiz todo o procedimento duas vezes no meu blog de teste. A área do slide abaixo do cabeçalho ficou demarcada mais não aparece nada nela. Eu não tenho nenhum outro elemento no blog de teste que use Jquery, só o botão de voltar ao topo que também usei o seu tutorial pra instalar e ficou perfeito. Será que pode ser isso?

    ResponderExcluir
    Respostas
    1. Como eu te respondi em outro comentário o slide não aparece porque seu blog não tem ao menos 5 posts com imagens de bom tamanho e marcadores em cada um desses posts ☺

      Excluir
  5. Olá Elaine tudo bem? Eu acompanhei desde o início da série e gostaria de saber se algum dessas tutorias se aplicam ao tema Amanda, aliás algumas coisas eu consegui aplicar, mas verifiquei que está h2, sei que não dá suporte para os temas grátis, mas é só para saber o que podemos aplicar no tema Amanda, ou se é especifico para esse tema

    ResponderExcluir
    Respostas
    1. Os códigos disponibilizados nessa série servem especificamente para o Tema Fernanda, conforme explico nos vídeos. Há exceções, como o menu, slide, etc...
      Para obter o mesmo resultado em outros temas como o amanda siga os tutoriais originais linkados no post.
      No caso das heading tags o tutorial original está linkado no post desta série, ele é que deve ser seguido em temas outros que não o desta série.
      Na faq de cada tema eu também listo o que adicionei ou não, o que corrigi, etc...
      bjsss

      Excluir
  6. Olá Elaine em 1 lugar adoro o seu blog excelente dicas, eu fiz o uploud do tema Neila e agora tentei fazer tudo certinho mas algo ficou mal, não entendo porque, vi o video na parte da paginação copiei o seu código tudo no meu blog abri um gadget HTML colei o código coloquei abaixo da zona dos post como esta no video, a única coisa que mudei foi um 4 de post por pagina para um 6 não fiz mais nada mas não ficou nada no meu blog. Eu sei que não da apoiou também já oferece tanta coisa que era pedir demais eu só queria saber se me podia dizer do que fiz de errado porque eu não estou mesmo a perceber, o meu URL é: https://www.blogueiraportuguesa.online/ obrigado e fico a aguardar uma resposta beijinhos grandes de Portugal.

    ResponderExcluir
    Respostas
    1. Alexandra, ao baixar o Tema Noelle a paginação já irá junto.
      Esse código, disponibilizado nesse tema, só serve para esta série.
      Baixe e instale de novo o Tema Noelle e vc verá que a paginação já está lá.
      bjssss

      Excluir
    2. Obrigado Elaine eu entretanto já mudei de templates dos que você oferece o que eu estou com muitas dificuldades é fazer os menus horizontal com as sub abas tu tens algum tutorial só dedicado a este tópico não consigo sair da barra do menu. vou deixar aqui os meus 2 blog com os teus templates e deixa-me dizer-te que estas claro no meu blogroll, beijinhos linda.https://lovexcake.blogspot.com/ este fiz agora o anterior é www.blogueiraportuguesa.online

      Excluir
  7. Oi, Elaine, tudo bem?
    Encontrei agora essa sua série e estou tentando fazer no meu blog, cheguei na parte para mudar a cor do menu de navegação mas quando escolho a cor some, fica como se estivesse transparente, mesmo eu mudando só a cor da letra, você sabe se tem como arrumar esse erro? Se tá tudo certo, é só um bug do blogger mesmo?

    ResponderExcluir
    Respostas
    1. Luisa, eu nunca vi esse erro, mas faz assim: coloque a cor que vc quer e aplique.
      Provavelmente vai se fixar, aí atualize a página e a cor nova deve estar no menu.
      Experimente e me diz :)
      bjssss

      Excluir
    2. Deu certo, obrigada pela ajuda! <3

      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.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
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…