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.
muy bueno!, le da un toque bastante profesional al sitio
ResponderEliminarAsi es Andres, el blog se ve bien profesional
EliminarQué grande eres! Gracias por volver Diego ;D Te echábamos de menos!
Eliminarhttp://canaltokio.blogspot.com.es
Tesko, que gusto saber que me echabas de menos!
Eliminar¿Existe alguna posibilidad que no tenga el "body" dentro de la plantilla? Dejo el blog en el cual quiero implementar la modificación: http://www.unsam66.com/
ResponderEliminarMuchas gracias!
En tu caso ponlo después de: <body class='loading'>
EliminarMuchas gracias queda de maravilla.
ResponderEliminarHe tenido problemas con la nueva plantilla para encontrar body.
Si alguien mas le pasa que lo peque despues de:
Las XXXX son la palabra B-O-D-Y
Añadido a:
http://paraisodvdrip.blogspot.com.es/
Body buscalo asi: <body class='loading'>
EliminarGracias por la información miren como quedo en mi página
ResponderEliminarEXELENTE !!
http://www.gorobeta.com/
Amigo porque al momento que termina de cargar la pagina la barra nisiquiera termina y se queda hay por un buen rato aqui esta mi blog para que lo veas saludos http://www.infoutilidades.net/
ResponderEliminarAl parecer hay un error en el script
Eliminaryo copio el codigo tal cual y no me funciona, no me van los hipervinculos.....
ResponderEliminarHola, muy bueno el efecto, pero tengo un problema y espero que me puedas ayudar, tengo una plantilla personalizada en mi blog con un slideshow y he agregado el codigo de la barra de youtube y cuando entro al blog, el slideshow deja de funcionar y se queda trabado en 1 sola imagen :c
ResponderEliminar