Adicionando Paginação às Postagens no Blogger usando HTML, CSS e JavaScript

Transformando Suas Postagens no Blogger com Paginação: Um Guia Detalhado


Se você deseja elevar suas postagens no Blogger para um novo patamar, a adição de paginação pode ser a chave para uma experiência de leitura mais agradável. Vamos mergulhar em um tutorial completo que não apenas ensina a implementar o código, mas também explora personalizações avançadas para deixar sua página de postagem irresistível.


Passo 1: Incorporando o Código


Vamos começar com o básico. Abra sua postagem no Blogger, vá para a visão HTML e cole o seguinte código no local desejado dentro da tag `<body>`.

      
      <!-- Código HTML de Paginação -->
<div id="parte1">
   <!-- Conteúdo da primeira parte -->
  <p>Seu conteúdo aqui...</p>
</div>

<div id="parte2" style="display: none;">
   <!-- Conteúdo da segunda parte -->
  <p>Seu conteúdo aqui...</p>
</div>

<div id="parte3" style="display: none;">
   <!-- Conteúdo da terceira parte -->
  <p>Seu conteúdo aqui...</p>
</div>

<div id="pagination">
   <span>Página:</span>
   <a href="?page=1">1</a>
   <a href="?page=2">2</a>
   <a href="?page=3">3</a>
</div>

<script>
   
   function exibirParte(numero) {
      // Ocultar todas as partes
      for (var i = 1; i <= 3; i++) {
         document.getElementById('parte' + i).style.display = 'none';
      }

      // Exibir a parte selecionada
      document.getElementById('parte' + numero).style.display = 'block';

      // Atualizar a URL com o número da parte
      window.history.replaceState(null, null, "?page=" + numero);

      // Adicionar classe "active" ao botão da página atual
      var botoesPagina = document.querySelectorAll('#pagination a');
      botoesPagina.forEach(function (botao, index) {
         if (index + 1 === numero) {
            botao.classList.add('active');
         } else {
            botao.classList.remove('active');
         }
      });
   }

   // Verificar se há um parâmetro 'page' na URL e exibir a parte correspondente
   window.onload = function () {
      var paginaParam = getParameterByName('page');
      if (paginaParam !== null) {
         exibirParte(parseInt(paginaParam));
      }
   };

   // Função para obter parâmetros da URL
   function getParameterByName(name) {
      var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
      return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
   }


</script>

<style>
   #pagination {
      margin-top: 20px;
      text-align: center;
   }

   #pagination a, #pagination span {
      display: inline-block;
      padding: 12px 20px;
      margin-right: 5px;
      background-color: #ff9800; /* Laranja */
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      font-size: 20px; /* Tamanho aumentado para [1] [2] [3] */
      transition: background-color 0.3s;
   }

   #pagination a:hover {
      background-color: #f57c00; /* Laranja mais escuro ao passar o mouse */
   }

   #pagination a.active {
      background-color: #e65100; /* Laranja ainda mais escuro para a página ativa */
   }

   #pagination span {
      background-color: #f2f2f2; /* Cinza claro para a indicação de página */
      color: #333; /* Cor do texto para melhor legibilidade */
   }
</style>

      
    


Passo 2: Personalizando Cores


Agora, vamos adicionar um toque pessoal. Encontre a seção do código CSS marcada como `#pagination a, #pagination span`. Aqui, você tem controle total sobre as cores. Mude as propriedades `background-color` e `color` para refletir seu estilo.

Passo 3: Explorando Personalizações Avançadas


3.1 Adicionando uma Nova Página:


Para adicionar uma nova página, copie e cole um novo `<a>` dentro de `<div id="pagination">`. Certifique-se de atualizar os números de página conforme necessário.

<a href="?page=4">4</a>

3.2 Removendo uma Página:


Para remover uma página, exclua o respectivo `<a>`.

3.3 Mudando a Ordem das Páginas:


Mude a ordem alterando a posição dos elementos `<a>` dentro de `<div id="pagination">`.

3.4 Personalizando Transições:


Ajuste a transição de cor ao passar o mouse. Encontre a seção CSS marcada como `#pagination a:hover` e experimente valores diferentes.

Conclusão:

Agora, você não apenas implementou a paginação, mas também personalizou conforme suas preferências. Explore, experimente e crie postagens envolventes no Blogger. Se surgirem dúvidas, compartilhe-as abaixo. Desfrute da jornada de aprimorar suas postagens com este guia abrangente!

Next Post Previous Post
No Comment
Add Comment
comment url




sr7themes.eu.org