Como colocar percentual na barra de rolagem do seu blog

Essa personalização particularmente eu acho muito bonita, essa personalização vai mostrar um percentual conforme o tamanho de suas páginas, é totalmente automático.

O Blogger tem muitas possibilidades de personalização, uma delas é a personalização da Barra de Rolagem, essa mesma do navegador que você arrasta para cima ou para baixo dependendo do que queira visualizar.

Fiz uma postagem que vai deixar ainda melhor essa barra Aprenda a colorir a barra de rolagem de sus blog, 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.

O percentual atual da página aparece à medida em que ela rola 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%.

Bom se você se interessou em saber como isso funciona de verdade, basta seguir o tutorial conforme lhes repassarei e dará tudo certo.

Recomendo 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 Completo do Seu Blog.

Certamente você se interessou nesta belezura, então siga me os bons.
Acesse seu Blogger, vá em "TEMA" 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: #ffffff;
        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>

Altere se necessário

O trecho 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".

About Odnei Sales

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.