Post longo no blogue do Blogger - Como dividir em partes

 

Se o post no blogue é muito longo, convém dividi-lo em várias partes

 

Dividir um post longo no blogue do Blogger, com links de navegação através de botão "Página Anterior - Próxima Página".

Explicação:

HTML

1 - Colocar o código HTML e JavaScript no HTML do blogue.

2 - O código HTML contém 6 páginas, que podem ser aumentadas ou reduzidas.

3 - Se o post é muito longo, convém dividi-lo em várias partes, caso contrário, se o dividirmos apenas em 2 ou 3 partes, o resultado pode não ser o esperado, ou seja, quanto mais longo for o post, mais ele deve ser dividido. A simulação num blogue de testes é uma boa ideia.

4 - No código HTML, que está dividido por páginas, apenas é necessária a colocação de parte do texto do post, de preferência já formatado com os parágrafos, imagens e vídeos, se existirem. O recurso a um post "Rascunho" facilita. Depois do post pronto, só temos que clicar no modo HTML, copiar tudo e colar no espaço respetivo.

JAVASCRIPT

1 - Cor do Fundo do Botão (background-color): Configura a cor de fundo do botão. No exemplo, usei #f0f0f0 (cinza claro).

2 - Cor do Texto do Botão (color): Define a cor do texto dentro do botão. No exemplo, usei #000000 (preto) para contraste.

3 - Borda do Botão (border): Define a cor e o estilo da borda do botão. Aqui, usei 2px solid #ffffff para uma borda branca.

4 - Botões Arredondados (border-radius): Dá um toque de design com bordas arredondadas, usando 4px.

5 - Efeito Hover (hover): Altera a cor de fundo e do texto quando o utilizador passa o mouse sobre o botão, para melhorar a interatividade.

Como Personalizar:

Mudar as Cores: Substitua os valores hexadecimais (#xxxxxx) pelas cores que você preferir.

Tamanho e Estilo: Pode ajustar o tamanho do botão, espaçamento e outros estilos de acordo com as suas necessidades.

<!-- Página 1 -->
<div class="pagina" id="pagina1">
    <h2>Página 1</h2>
    <p>Conteúdo da primeira página.</p>
    <button onclick="mostrarPagina(2)" class="botao">Próxima Página</button>
</div>

<!-- Página 2 -->
<div class="pagina" id="pagina2">
    <h2>Página 2</h2>
    <p>Conteúdo da segunda página.</p>
    <button onclick="mostrarPagina(1)" class="botao">Página Anterior</button>
    <button onclick="mostrarPagina(3)" class="botao">Próxima Página</button>
</div>

<!-- Página 3 -->
<div class="pagina" id="pagina3">
    <h2>Página 3</h2>
    <p>Conteúdo da terceira página.</p>
    <button onclick="mostrarPagina(2)" class="botao">Página Anterior</button>
    <button onclick="mostrarPagina(4)" class="botao">Próxima Página</button>
</div>

<!-- Página 4 -->
<div class="pagina" id="pagina4">
    <h2>Página 4</h2>
    <p>Conteúdo da quarta página.</p>
    <button onclick="mostrarPagina(3)" class="botao">Página Anterior</button>
    <button onclick="mostrarPagina(5)" class="botao">Próxima Página</button>
</div>

<!-- Página 5 -->
<div class="pagina" id="pagina5">
    <h2>Página 5</h2>
    <p>Conteúdo da quinta página.</p>
    <button onclick="mostrarPagina(4)" class="botao">Página Anterior</button>
    <button onclick="mostrarPagina(6)" class="botao">Próxima Página</button>
</div>

<!-- Página 6 -->
<div class="pagina" id="pagina6">
    <h2>Página 6</h2>
    <p>Conteúdo da sexta página.</p>
    <button onclick="mostrarPagina(5)" class="botao">Página Anterior</button>
</div>

<!-- Script JavaScript -->
<script>
    function mostrarPagina(numero) {
        var paginas = document.getElementsByClassName('pagina');
        for (var i = 0; i < paginas.length; i++) {
            paginas[i].style.display = 'none';
        }
        document.getElementById('pagina' + numero).style.display = 'block';
    }
</script>

<!-- Estilos CSS -->
<style>
    .pagina {
        display: none;
    }
    #pagina1 {
        display: block;
    }
    .botao {
        background-color: #f0f0f0; /* Cor de fundo do botão */
        color: #000000; /* Cor do texto do botão */
        border: 2px solid #ffffff; /* Borda do botão */
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 4px; /* Bordas arredondadas */
    }
    .botao:hover {
        background-color: #ffffff; /* Cor de fundo do botão ao passar o mouse */
        color: #000000; /* Cor do texto ao passar o mouse */
    }
</style>
    

Talvez lhe interesse conferir os artigos da nossa etiqueta específica "Dicas Blogger"