Como adicionar barra de progresso de leitura gradiente no Blogger

No tutorial de hoje, você aprenderá como adicionar uma barra de progresso de leitura gradiente no Blogger. Você deve ter notado que muitos sites têm algum tipo de marcador animado que é inserido no início de uma postagem para mostrar ao leitor até onde eles estão indo em uma postagem de blog ou artigo de página.

Portanto, este artigo compartilha um tutorial sobre como adicionar uma barra de progresso gradiente ao site do blogger e fornece uma barra de progresso avançada com efeito gradiente.

O que é uma barra de progresso de leitura?

Você deve saber que a maioria dos sites tem algum tipo de indicador localizado na parte superior do site chamado barra de progresso de leitura. A barra de progresso de leitura é uma representação visual de quanto o usuário da postagem leu e quanto a postagem permanece. Isso é feito rastreando o progresso da leitura do visitante na página.

Conforme você rola para baixo, a barra começa a encher e mostra o quanto você leu. Quando você chega ao final da postagem, a barra de progresso se enche. Esses indicadores de progresso de leitura são normalmente usados em postagens de blog e artigos longos para ajudar os leitores a entender a distância que estão lendo uma postagem.

Alguns autores ou proprietários de sites desejam adicionar uma barra de progresso ao site. No entanto, a maioria dos escritores e proprietários de sites não são web designers ou desenvolvedores. Portanto, eles não sabem como adicionar essa barra de progresso. Agora, há um segredo no mundo do desenvolvimento HTML. Siga alguns passos simples.

Como adicionar uma barra de progresso de leitura de gradiente no Blogger?

1. Acessar o painel do Blogger
2. Acesse tema e editar o HTML
3. Use a função (CTRL + F) e encontre por ]]></b:skin> e cole o seguinte CSS logo acima dele.

/* Progress Reading Bar */ .progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;} .progress-bar{height:5px; background: linear-gradient(to right, #ff3030 ,#ff6f00 ,#ffc400);}

<script>
window.onscroll = function() {
myFunction()
};
function myFunction(){
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;
}
</script>

<div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
</div>