Como Adicionar Paginação às Postagens do Blogger com Links de Sessão

As postagens longas podem ser difíceis de ler em uma única página. A paginação pode tornar a leitura mais agradável, dividindo o conteúdo em partes menores e mais gerenciáveis.

Neste artigo, você aprenderá como adicionar paginação às postagens do Blogger usando links de sessão. Também veremos algumas personalizações avançadas que você pode fazer para ajustar a aparência da paginação.

Implementação:

Para adicionar paginação às postagens do Blogger usando links de sessão, você precisará incluir o seguinte código em sua postagem:

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

Este código criará três partes ocultas para sua postagem. Cada parte terá um número de página associado a ela.

Para exibir uma parte específica, você precisará usar o seguinte código JavaScript:

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, ' '));
}

Este código oculta todas as partes, exibe a parte selecionada e atualiza a URL com o número da parte selecionada.

Personalizações avançadas:

Além de ocultar e exibir partes, você também pode fazer outras personalizações avançadas na paginação. Por exemplo, você pode:

1. Adicionar ou remover partes
2. Alterar a ordem das partes
3. Personalizar as transições de cor

Para adicionar uma nova parte, basta criar um novo elemento `<div>` com a classe `parte-paginada`.

Para remover uma parte, basta excluir o elemento `<div>` correspondente.

Para alterar a ordem das partes, basta alterar a ordem dos elementos `<div>` na página.

Para personalizar as transições de cor, você pode alterar o código CSS. Por exemplo, para alterar a velocidade da transição de cor ao passar o mouse, você pode usar o seguinte código CSS:

#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 */

Este código fará com que a cor dos links de paginação mude em 0,5 segundos com uma animação suave.

Conclusão:

A paginação com links de sessão é uma maneira fácil de adicionar paginação às postagens do Blogger. Com um pouco de esforço, você pode personalizar a paginação para atender às suas necessidades específicas.