Añadir barra de progreso estilo Youtube

Hoy nos vamos a centrar en implantar un nuevo cacharrito para nuestro blog de Blogger, o también se puede implantar en otra plataforma o en una web, perfectamente. Trata de una barra de progreso al estilo Youtube. No sé si alguna vez os habéis fijado que al entrar en la famosa plataforma de vídeos, al cargar todos los elementos que conforman la página web, aparece en la parte superior una barra de progreso muy fina y de color rojo, que cuando termina de cargar todos sus elementos o la pagina por completo, desaparece, dicha barra.

Barra de progreso, Demo!
Pues bien, una vez explicado la descripción de éste artilugio, vamos ha agregarlo en Blogger, por ejemplo, ahora te mencionaré los pasos a seguir para añadirlo a tu plataforma Blogger, paso a paso, cómo veréis a continuación:
Primeramente añadiremos los estilos CSS de la Barra:

1. Ves a Blogger
2. Ingresa en Plantilla
3. Ahora en Editar Html
4. Y busca con Ctrl+F la etiqueta ]]></b:skin>
5. Y antes de dicha etiqueta, es decir; ]]></b:skin>
6. Copia y pega el siguiente CSS.

/*! NProgress (c) 2013, CSS code Aizum Blog */
#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 sólo te queda añadir el script antes de </body>:

1. Busca con Ctrl+F la etiqueta </body>
2. Y antes de dicha etiqueta, es decir; </body>
3. Copia y pega el siguiente script.
4. Si ya tienes jQuery, no lo vuelvas a insertar, omite ese paso.

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

Get free premium widgets for your blog and website.