mulherzices
EU NÃO TENHO ATITUDE
NA HORA DA PAQUERA!
pontoperdido
Ponto Perdido
XXX (+18)
A vida de uma mulher peituda
A vida de uma mulher peituda
(+18)
Mega Humorado”
O mito do photoshop
Mega Humorado


desabafa
Canais adulto online agora no VTO DicaHot

Colocar Porcentagem na Scroll Bar (Barra de Rolagem)


bandeiradois
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!!!


Colocar Porcentagem na Scroll Bar (Barra de Rolagem) Colocar Porcentagem na Scroll Bar (Barra de Rolagem) Reviewed by Muca on 5/06/2014 06:31:00 AM Rating: 5