Agora vamos organizar a jornada do leitor para que ele nunca se perca dentro do blog.
Nesta fase, o herói aprende a construir caminhos claros entre os pergaminhos, como um mapa de aventura.
No index.html, adicione esta caixa dentro da área principal:
<div class="caixa">
<h2>🗺️ Mapa do blog</h2>
<ol>
<li><a href="post1.html">O começo da jornada</a></li>
<li><a href="post2.html">Meu jogo favorito</a></li>
<li><a href="post3.html">Itens lendários</a></li>
</ol>
<p>Leia nessa ordem para seguir a aventura do começo ao fim.</p>
</div>
Isso ajuda o visitante a entender por onde começar.
Dentro de cada post, além do “próximo post” e do “recomendado”, vamos criar uma área de navegação:
<div class="caixa"> <h2>🚪 Navegação do pergaminho</h2> <p><a href="index.html">Voltar ao blog</a></p> <p><a href="post2.html">Ir para o próximo pergaminho</a></p> <p><a href="post3.html">Ler um pergaminho recomendado</a></p> </div>
Assim o leitor sempre tem para onde seguir.
No post1.html, você pode deixar a navegação assim:
<div class="caixa"> <h2>🚪 Navegação do pergaminho</h2> <p><a href="index.html">Voltar ao blog</a></p> <p><a href="post2.html">Próximo pergaminho: Meu jogo favorito</a></p> <p><a href="post3.html">Pergaminho recomendado: Itens lendários</a></p> </div>
No post2.html, a navegação pode ficar assim:
<div class="caixa"> <h2>🚪 Navegação do pergaminho</h2> <p><a href="index.html">Voltar ao blog</a></p> <p><a href="post3.html">Próximo pergaminho: Itens lendários</a></p> <p><a href="post1.html">Pergaminho recomendado: O começo da jornada</a></p> </div>
No post3.html, a navegação pode ficar assim:
<div class="caixa"> <h2>🚪 Navegação do pergaminho</h2> <p><a href="index.html">Voltar ao blog</a></p> <p><a href="post1.html">Voltar ao primeiro pergaminho</a></p> <p><a href="post2.html">Pergaminho recomendado: Meu jogo favorito</a></p> </div>
Assim o leitor pode recomeçar a aventura quando terminar.
No final do style.css, adicione:
.mapa-blog {
background: rgba(255,255,255,0.06);
padding: 18px;
border-radius: 14px;
margin-top: 20px;
}
.mapa-blog ol {
padding-left: 22px;
}
.mapa-blog li {
margin-bottom: 8px;
}
E depois troque a caixa do mapa para:
<div class="mapa-blog"> <h2>🗺️ Mapa do blog</h2> ... </div>
Explique para ele que o blog pode ser lido em ordem, como se fosse:
Isso transforma posts soltos em uma pequena aventura.
Ele pode mudar o nome “Mapa do blog” para algo mais legal, como:
Isso reforça a identidade do projeto.
Antes de seguir, o herói precisa conseguir:
Quando isso estiver pronto, o blog vira um reino com estradas bem traçadas.
No próximo capítulo vamos deixar o blog ainda mais especial com:
Aí o reino não vai ser só organizado. Vai começar a ser memorável.