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>

Descrição: Primeiro espaço de anúncio, coloque abaixo o código