Seguramente has visto la barra progresiva de color rojo que se mueve en
la parte superior cuando se carga un vídeo en Youtube. Sentí mucha
curiosidad sobre como instalarla en blogger, y me puse en la tarea de
investigar.
Inicie mi búsqueda y encontré un script llamado Nprogresss.js.
Comencé a hacer algunas pruebas con el script original pero no obtenía
resultados, así que profundice en la búsqueda hasta hallar en algunos
blogs anglosajones e hindues este script adaptado para Blogger.
Sin mas que decir, vamos a instalar el Gadget. Esto sera sencillo,
puesto que solo habrá que hacer una operación para instalarlo.
Para eso ve a Blogger-Plantilla-Editar HTML, das un clic dentro de la plantilla y oprimes Ctrl+F y buscas por:<body>
Pega este código justo después:
Pega este código justo después:
<style>#nprogress{pointer-events:none}#nprogress .bar{background:#29d;height:2px;
left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress
.peg{-ms-transform:rotate(3deg) translate(0px,-4px);
-webkit-transform:rotate(3deg) translate(0px,-4px);
box-shadow:0 0 10px #29d, 0 0 5px #29d;display:
block;height:100%;opacity:1.0;position:absolute;right:0;
transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress
.spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}
#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms
linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid
2px transparent;border-left-color:#29d;border-radius:50%;border-top-color:
#29d;box-sizing:border-box;height:18px;width:18px}100%{-webkit-transform:rotate
(360deg);transform:rotate(360deg)}.photo{display:none}</style>
<div id='loadMore'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script src='http://goo.gl/10Okof'/>
El código resaltado en verde es Jquery, si ya lo tienes insertado en tu blog, debes omitirlo.
El código resaltado en azul, define el color de la barra. Modifícalo a tu gusto. Utiliza el selector de colores
El código resaltado en rojo ajusta el ancho de la barra. Cámbialo a tu parecer.
Con esto ya estaría funcionando la barra de carga en tu blog.
Publicar un comentario