Pure Java Script Progress Scrollbar

Pure Java Script Progress Scrollbar

Hoje vamos compartilhar um efeito legal de mastanvan pure javascript progress scrollbar isso traz um efeito legal uma vez que você rola a página do seu blog isso vai trazer uma bara de progresso o que traz um efeito bem legal também é uma forma de interagir com o visitante se deseja adicionar isso no template siga os passos abaixo:

Adicionando efeito Pure JavaScript Progress Scrollbar

Faça login no blogger então va no menu tema editar HTML/JavaScript então 
com as teclas combinadas CTRL+F procure por </body> e antes dessa tag copie e coloque 
o seguinte código: 


<script type="text/javascript">
//<![CDATA[
//Mas Tamvan | Progress Scrollbar
var bar_bg = document.getElementById("scrollbar-bg"),
    body = document.body,
    html = document.documentElement;

bar_bg.style.minWidth = document.width + "px";

document.getElementsByTagName("body")[0].onresize = function() {
    // Update the gradient width
    bar_bg.style.minWidth = document.width + "px";
}

window.onscroll = function() {
    // Change the width of the progress bar
    var bar = document.getElementById("scrollbar"),
        dw  = document.documentElement.clientWidth,
        dh  = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight ),
        wh  = window.innerHeight,
        pos = pageYOffset || (document.documentElement.clientHeight ?
                              document.documentElement.scrollTop : document.body.scrollTop),
        bw  = ((pos / (dh - wh)) * 100);

    bar.style.width = bw + "%";
}
//]]>
</script>

Agora procure por ]]></b:skin> e adicione o seguinte código: 



<style type='text/css'>
#scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 0%;
    height: 4px;
    z-index: 9999;
}

#scrollbar-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#F62869;
}
</style>

Click to comment