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?





8 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

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…