Adicione uma Barra de Progresso de Leitura ao Seu Blogger com Este Simples Script
Quer proporcionar uma experiência de leitura mais envolvente aos visitantes do
seu Blogger? Neste artigo, vamos explorar como adicionar uma elegante barra de
progresso de leitura ao seu site. Este script simples não só aprimorará a
estética do seu Blogger, mas também oferecerá uma maneira visual de indicar o
progresso da leitura aos seus usuários.
Como Adicionar ao Blogger:
Antes de começarmos, aqui estão os passos para adicionar este script ao seu
Blogger:
1. Acesse o painel do seu Blogger.
2. Vá para "Modelo" > "Editar HTML".
3. Localize a seção `<body>` no
código HTML e cole o script antes da tag de fechamento `</body>`.
4. No mesmo local, adicione o estilo CSS fornecido na seção `<head>` do seu HTML.
O que Este Código Faz:
Este script cria uma barra de progresso fina que é exibida no topo da página
enquanto os visitantes rolam para baixo. A barra de progresso se expande à
medida que a página é rolada, indicando visualmente quanto da página foi lido.
É uma maneira sutil, mas eficaz, de envolver seus leitores e incentivá-los a
explorar seu conteúdo.
<!-- Barra de Progresso de Leitura -->
<div id="progress-container">
<div id="progress-bar"></div>
</div>
<!-- Script para a Barra de Progresso -->
<script>
document.addEventListener('DOMContentLoaded', function () {
var progressContainer = document.getElementById('progress-container');
var progressBar = document.getElementById('progress-bar');
window.addEventListener('scroll', function () {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
var documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollPercentage = (scrollPosition / documentHeight) * 100;
progressBar.style.width = scrollPercentage + '%';
});
});
</script>
<style>
#progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #ddd;
z-index: 1000; /* Defina um valor alto para a propriedade z-index */
}
#progress-bar {
height: 100%;
width: 0;
background-color: #4CAF50;
}
</style>
Personalizando a Cor da Barra de Progresso:
Se deseja personalizar a cor da barra de progresso, basta ajustar a
propriedade `background-color` no estilo CSS. Por exemplo, para uma barra de
progresso verde, altere `background-color:
#4CAF50;` para
`background-color: #00FF00;`.
Conclusão:
Adicionar uma barra de progresso de leitura ao seu Blogger é uma maneira fácil
de melhorar a experiência do usuário e tornar seu conteúdo mais acessível.
Experimente este script simples e observe como ele pode impactar positivamente
a interação dos seus visitantes com o seu blog.
Experimente Agora:
Crie uma experiência de leitura mais cativante adicionando este script ao seu
Blogger agora mesmo! Não hesite em ajustar as personalizações conforme suas
preferências e estilo.
Espero que este artigo ajude a aprimorar seu Blogger e a proporcionar uma
experiência de leitura mais envolvente para seus leitores!
