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!