Esta barra de rolagem basicamente, mostra o percentual de uma página durante a rolagem. Ele pode vir a ser extremamente útil para que os seus visitantes vejam o quanto da página já percorreu, As vezes os usuário não tem muita paciência para ficar rolando paginas sem saber onde vai parar. Com isso ele pelo menos vai saber quanto falta rolar.
Neste artigo vou mostrar a vocês como adiciona-lo em seu blog Blogger.
Vá até Painel do Blogger e selecione o blog no qual você gostaria de acrescentar valor percentual na barra de rolagem. Clique em Modelo >> Editar HTML e procure pela tag ]></b:skin>. e logo acima dela cole o seguinte código CSS.
#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;
}
Depois de adicionar o código CSS, procure pela tag </head> e logo depois cole o seguinte código. (Dica: Certifique-se de colar o código entre a tag </head> e a abertura da tag <body>.
<div id='scroll'></div>
Por fim, procure pela tag </body> e logo acima dela cole o seguinte código JavaScript. Este é o código que irá garantir a exibição do percentual na sua barra de rolagem.
<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>
Feito isso, salve o modelo usando o botão "Salvar modelo" que se encontra no canto superior esquerdo do editor.
Pronto: Se tudo ocorreu da maneira correta, seu blog contará com uma barra de rolagem equipada com o valor percentual. Alguma Duvida? comente, Podemos te ajudar.
Nenhum comentário:
Postar um comentário