Yo, como una gran cantidad de amigos Bloggers, tengo conocimiento de todas las reglas para que nuestros blogs sean rápidos a la hora de cargar, pero como todos también comparto la falta de seguimiento de las mismas ya que termino cargando mi plantilla de un sinfín de imágenes y scripts que la ralentizan in eternum. Tal es así que se necesitaría que todo el mundo contara con 6 Mb de velocidad para no evitar morir durante la espera.
La consecuencia más evidente es que muchas de nuestras visitas se aburren de esperar y abandonan el intento de entrar en nuestro querido sitio.
Hoy voy a compartir un truco que nos permite instalar una barra de progreso falsa realizada únicamente con animaciones CSS3. La ventaja radica en que en lugar de un gif animado que se repite de manera un tanto aburrida, contemos con una barra de avance porcentual tal como las que presenta cualquier intalador de windows, solo que falsa.
Digo falsa porque el tiempo de avance es fijo y en el ejemplo se ha definido en 15 segundos. Un tiempo prudencial para mantener entretenido al visitante y así evitar que se aburra y abandone la visita. Claro que usted puede jugar con los dieferentes timers y los colores de la implementación como para personalizarlo y que se destaque en su blog.
El trabajo ha sido creado por John djogan un diseñador Indonés que realiza plantillas muy hermosas sobre el tema Animé.
Instalar éste cargador en tu blog no lo hará mucho más pesado de lo que ya es.
Te debo una demo para la próxima, pero es muy fácil de instalar y en caso de que no te guste, puedes borrarlo facilmente.
No olvides hacer un resguardo de tu plantilla antes de realizar cualquier modificación. De esa manera podrás recuperar tu plantilla en caso de algún problema.
CSS
Ir al blogger => template => Edición de HTML, copia el CCS de abajo justo por encima del code
]]> </ b: skin>
Despues de la etiqueta <body> deberás copiar y pegar el siguiente código.
Si querés cambiar el color de fondo o el de la linea de progreso deberás sustituir los siguientes puntos por los de tu agrado.
En:
#sliderloadingwrapper{
sustituir por tu color rgba elegido:
background: rgba(95, 130, 187, 0.2);
y en
#sliderloader {
sustituir por el nuevo color HTML :
background-color: #8CA5CE;
Si tienes dudas puedes ver http://www.december.com/html/spec/colorrgbadec.html
y
http://www.w3schools.com/html/html_colors.asp
Así como está, este truco afectará a todas las entradas de tu blog, si lo que deseas es que aparezca en la página de inicio unicamente, utiliza las meta etiquetas html condicionales de la siguiente manera:
encierra el segundo código (el que colocaste luego de la etiqueta <Body>) entre estas dos meta etiquetas
.<b:if cond='data:blog.url == data:blog.homepageUrl'>
coloca aquí el código del segundo recuadro HTML
</b:if>
Espero que te de resultado.
Lo vi en:
http://djogzs.blogspot.com/
.png "English"){kind=small}
Hola¡ Me gusta. ¿Se podría quitar el pajarito de twitter?
ResponderEliminarHola amiga. Usted se confunde con la barra de Twitter que he puesto bajo el blog y que puede ver como instalarla en:
Eliminarhttp://ciudadblogger.com/2013/03/twitcker-para-mostrar-los-tuits-en-forma-de-marquesina.html
en este post hablo de otra barra que puede ver por ahora en mi BlogOPinar
http://blogopinar.blogspot.com.ar
y no tiene pajarito de twitter
Cariños
¡Oooooh! ;-(
ResponderEliminarPues no tengo, ni twittillo ni problemas de carga. :((
Esperaré $.)
Hay verificación ;-?
;)
Lástima que con el cambio que tuvo hoy blogger en la edicion de plantillas html, YA NO ESCUENTRO NADA DE LOS CODIGOS QUE BUSCO PARA PEGAR ANTES O DESPUES LOS QUE TU FACILITAS...
ResponderEliminarTodo es cuestión de tiempo y costumbre, pero todas las funciones están. Para buscar sigue siendo ctl+F solo que ahora se abre un campo "search" en el ángulo superior derecho, donde debes colocar el código y dar enter. El código buscado se remarcará en color (resaltará).
EliminarEl CCS se encuentra básicamente oculto, así que si quieres buscar algo así como "skin" deberás presionar sobre los triangulitos negros que figuran junto a los números de línea a la izquierda y se expandirá para mostrar el contenido.
A mi tampoco me hace gracia, pero se parece más a los editores comerciales.
Saludos.
Me puedes ayudar ?
ResponderEliminar