barra de progreso estilo youtube para blogspot

Que tal amigos del blog, lo mas seguro es que la mayoría de todos nosotros utilizamos el servicio de youtube, el cual tiene una barra de progreso (en la parte superior) que nos indica cuando la pagina empieza a cargar y cuando la pagina esta lista, en este articulo les voy a mostrar como instalarla en nuestro blog (aplica tanto para blogger o cualquier otra plataforma).


Entramos al administrador de blogger e ingresamos al menú Plantilla y en Editor Html.-

Buscamos el siguiente código en el editor.-

]]></b:skin>

Y pegamos el siguiente código antes del código anterior.-

#nprogress {
  pointer-events: none;
}
#nprogress .bar {
  background: #FF0905;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 999;
  top: 15px;
  right: 15px;
}
#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;
  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}
@-webkit-keyframes nprogress-spinner {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Ahora nos dirigimos hasta el final del editor y antes de la etiqueta </body> pegamos el siguiente código.-

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>
<script src='http://azteca.programandowebs.com/host/barra.js'/>
<script>
NProgress.start()
$(document).on("ready", function(e){
    NProgress.set(0.4);
    NProgress.inc();
});
$(window).on("load", function (e){
    NProgress.done();
});
</script>

Listo, ya tenemos instalada nuestra barra de progreso en nuestro blog, espero les sirva, ya que en mi opinión le da un estilo mas profesional al blog y al usuario se le da un indicio de que algo esta pasando, cualquier duda como siempre estoy a sus ordenes, saludos.