Colocar Porcentagem na Scroll Bar (Barra de Rolagem)

Nesta postagem compartilho com vocês este código que faz com que apareça porcentagem ao rolar a Scroll Bar. É claro que colocando este código no seu blog, talvez não faça tanta diferença, mas tenho certeza que o Design do seu blog ficará muito melhor e mais criativo.

O Efeito é semelhante a esse na imagem ao lado. Como você pode ver, o código faz com que ao rolar a página apareça a porcentagem do tanto que você já desceu a página. Enfim.

Para colocar o efeito na Scroll Bar do seu blog

Para coloca-la no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag

]]></b:skin>

Tendo encontrado a tag, cole ACIMA dela o seguinte código

/** Porcentagem na Scroll Bar (Barra de Rolagem) by DicasHot **/
#BloggerDicasHotScroll {
display: none;
position: fixed;
top: 0;
right: 10px;
z-index: 500;
padding: 3px 8px;
background-color:#000000;
color: #fff;
border-radius: 3px;
}
#BloggerDicasHotScroll:after {
content: " ";
position: absolute;
top: 50%;
right: -7px;
height: 0x;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: rgb(4, 189, 250);
}
@media screen and (max-width:600px){
#BloggerSpiceScroll{
display:none;
}
/* trickstoo.com scrollbar effect */
::-webkit-scrollbar {
width:14px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#eee;
}
::-webkit-scrollbar-thumb {
background: rgba(28,119,229,0.7);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(116,188,99,0.5);
.hb6{ color:#444; font-size:15px; font-weight:bold; font-style:italic; font-family:georgia; text-decoration:none; padding:6px 15px; border:1px solid #D3D3D3; -webkit-border-radius: 4px; border-radius: 4px; background:#E0F2F7; } .hb6:hover{ background:#ffffff; }

Agora, procure pela tag

</head>

Tendo encontrado a tag, cole ACIMA dela 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 - $('#BloggerDicasHotScroll').height() / 2;
    $('#BloggerDicasHotScroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#BloggerDicasHotScroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Agora, procure pela tag

<body>

Tendo encontrado a tag, cole ABAIXO dela o seguinte código

<div id='BloggerDicasHotScroll'/>

Tendo colado o código, basta salvar e pronto!!!

Carregando atualizações...

Colocar Porcentagem na Scroll Bar (Barra de Rolagem)

DESTAQUES DO MÊS