Como Mostrar o Valor Percentual ao Lado da Barra de Rolagem

Personalize a barra de rolagem de seu blog com um sistema que indicará o percentual atingido da página à medida que suba ou desça.

Um dos motivos que muitas pessoas escolhem o uso da plataforma Blogger é imensa quantidade de possibilidades de personalização. Você poderá modificar o template padrão simples, por exemplo, deixando-o com a aparência que mais lhe agradar, configurar de acordo com o tema tratado no contexto de suas páginas, cores, estilos, backgrounds e uma vasta leva de probabilidades possíveis.

Barra de Rolagem (Scroll Bar) com Percentual ao Lado

Uma das possibilidades de personalização no Blogger é a Barra de Rolagem, essa mesma do navegador que você arrasta para cima ou para baixo dependendo do que queira visualizar. No artigoBarra de rolagem do blog no estilo metro, indicamos uma maneira de deixa-la com um efeito diferente e com sua cor preferida. Agora, nesse artigo trazemos uma alternativa que você já deve ter visto em outros blogs e sempre teve vontade de colocar no seu, colocar percentual ao lado da barra de rolagem.

Como você pode notar na imagem ao lado, com a inserção do código que disponibilizamos, aparecerá ao lado dela uma pequena div exibindo o percentual atual da página à medida que role-a para cima ou para baixo. O efeito é perfeito, e você poderá notar por exemplo chegando ao meio da página o percentual marcará os exatos 50%.

Então, se você deseja mais essa alternativa que trazemos para a personalização de seu blog, veja a seguir como fazer.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Colocar valor percentual ao lado da barra de rolagem do blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ABAIXO da tag encontrada, cole o seguinte código:

<style>
    #scroll
    {
        display: none;
        position: fixed;
        top: 0;
        right: 20px;
        z-index: 500;
        padding: 3px 8px;
        background-color: #2187e7;
        color: #fff;
        border-radius: 3px;
    }
    #scroll:after
    {
        content: ” ”;
        position: absolute;
        top: 50%;
        right: -8px;
        height: 0;
        width: 0;
        margin-top: -4px;
        border: 4px solid transparent;
        border-left-color: #2187e7;
    }
</style>

* Em VERMELHO, é a cor de fundo onde  ficará a porcentagem, altere caso desejar.

* Em AZUL, é a cor do texto, altere caso desejar.

>> Pesquise agora por </head>

>> Logo ABAIXO da tag encontrada, cole o seguinte código:

<div id='scroll'></div>

>> Pesquise agora por </body>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

>> Clique em "Visualizar", não encontrando nenhum problema clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Após a conclusão do processo seu blog já possuirá essa nova funcionalidade que será um atrativo a mais aos visitantes de suas páginas e ao mesmo tempo dá um tom ao design. Além disso, a possibilidade de personalização com uma cor predominante de seu blog também leva o aspecto visual a ser notado.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.