Webwait tiempo de carga de nuestra web

Webwait es una herramienta para saber el tiempo que tarda en cargar completamente nuestra web, no hay que olvidar que el tema de la conexión es importante.
Resulta muy útil y puede ser que más de uno pensemos que ya es hora de optimizar nuestro sitio.

Para utilizarla es suficiente con ingresar la url y hacer click en Time it!

Alojar imágenes en Blogger

Me pregunta TRECARUNGA como se alojan las imágenes en Blogger.

En realidad cada vez que subimos una imagen a una de nuestras entradas, estamos alojando la imagen en Picasa, que es el servicio que Blogger utiliza para alojar las imágenes de nuestros blogs.

En el caso de que queramos alojar una imagen que no vamos a usar en una entrada ( por ejemplo la imagen de fondo de nuestro blog) el sistema sería parecido.

En mi caso tengo todas las imágenes que uso en el blog (header, menu, footer, etc) alojadas en Blogger, y guardadas todas ellas al mismo tiempo en una entrada.

Creamos una entrada a la que llamaremos, por ejemplo, "Imágenes del blog" y subimos la imagen que queremos alojar en Blogger como hacemos habitualmente con cualquier imagen que subimos a una entrada.

Guardamos la entrada como borrador, y una vez guardada hacemos "vista previa" de la entrada y pinchamos en la imagen con el botón derecho - propiedades y copiamos su url. Esa url es la que usaremos para mostrar la imagen en el lugar que necesitemos.

Si estáis usando una plantilla no original de Blogger, probablemente tenga sus imágenes alojadas en algún servicio de alojamiento gratuito y no sería extraño que, debido al uso excesivo de ancho de banda, dejaran de mostrarse durante algún periodo de tiempo o en su lugar se mostrasen mensajes de aviso "no deseables".

En Blog and Web podéis consultar una entrada donde nos explican paso a paso como cambiar de alojamiento las imágenes de la plantilla, es decir, llevárnoslas de donde estén para alojarlas en Blogger.

Resizeyourimage herramienta online para redimensionar imágenes

Resizeyourimage es una herramienta online que nos ofrece la posibilidad de recortar cualquier área de una imagen. Los formatos de imagen permitidos son jpg, gif, png y tiff ectc...
Posee un zoom para aumentar o disminuir la imagen así como la opción de rotar.
Con tres pasos es suficiente.

» Subir imagen.
» Ajustar tamaño.
» Guardar imagen.

Es tan útil como rápido y sencillo.

Blogger y los errores de Códigos bX

 Últimamente en mi bandeja de correo llueven las consultas sobre errores bx precedidos de una numeración o letras que a simple vista no tienen sentido alguno. Buscando solución a esos errores acudí a Grupo de Ayuda Google y de ahí directamente a Ayuda de Blogger
Si estáis registrados en Grupo de Ayuda Google podéis acceder sin ningún problema a este enlace donde Gerard (Guía de Google) nos proporciona unas pautas a seguir para intentar solucionar el problema. Resumo los pasos a seguir.

Causas del problema

1.  Un error de Blogger. Problemas internos de Blogger,  la mayoría de veces sucede los días posteriores al lanzamiento de una nueva versión, o de alguna modificación
2.  Error del servidor
3.  Conflictos con la memoria caché o las cookies
4.  Compatibilidad con el navegador
5.  Cambios en la plantilla. Código HTML erróneo
6.  Otros ;)
- Es importante asegurarse que el problema está en Blogger y no en nuestra PC.

Algunas comprobaciones que podemos hacer

1.  Cuando el problema desaparece solo puede deberse a un problema temporal del servidor, con lo que al solucionarse el problema se soluciona el error.
2.  Si pasan los días y el problema continúa intenta realizar la misma operación con otro navegador.
3.  También puedes vaciar la memoria caché y limpiar las cookies.
4.  Comprueba que no se trata de una plantilla mal codificada. Prueba con una plantilla original de Blogger para asegurarte que el problema no viene de la plantilla que deseas instalar.

Si aún sigue el problema...

Podemos recurrir a Ayuda de Blogger. Antes de abrir un nuevo mensaje debemos buscar la solución al problema en los debates abiertos y añadir nuestra consulta en ese mismo debate.
De no encontrar un debate con el mismo problema abriremos un mensaje nuevo en el grupo Ayuda de Blogger con los siguientes detalles:

1.  Código bX y uri que te salen en la pantalla del navegador.
2.  Detalla en qué navegador te aparece el error.
3.  Que estabas haciendo cuando sucedió el error. Qué haces para que vuelva a suceder
4.  Desde cuando te pasa
5.  Importante: En qué blog te sucede el error y ¿te pasa lo mismo en otro?

¡ Suerte!

Eliminar una imagen .gif en la cabecera

Me comenta Colo que tiene un problema con una imagen animada en formato .gif que ha subido a su cabecera desde la parte de "Diseño" de su panel.
Concretamente su problema es que Blogger no le permite retirarla del header como hacemos normalmente con cualquier imagen.

No es la primera persona que me consulta sobre esto mismo, y he comprobado que siempre que esto sucede, la imagen está en este formato (.gif animado).

Al hora de subirlas desde el elemento "Header" en el panel de "Edición" aparentemente Blogger las acepta sin problemas, pero cuando queremos cambiarla por otra sucede que Blogger se "niega" a deshacerse de la imagen.

Tendremos entonces que ir a la parte de "Edición HTML" de nuestro panel y, sin expandir las plantillas de artilugios, localizar el código que corresponde al header:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='El Escaparate (cabecera)' type='Header'/>
</b:section>
</div>

Copiamos la parte que corresponde a la sección de la cabecera y lo reservamos copiandolo por ejemplo en el "Blog de Notas":

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='El Escaparate (cabecera)' type='Header'/>
</b:section>

El Bloc de notas es un editor de texto de los denominados de texto plano, es decir, que no crea formatos ni incluye en el texto marcas de formato. Esto hace que sea el editor ideal para editar archivos del sistema, ya que al guardarlos no nos va a incrustar en el texto ningún tipo de marcador.
Es realmente simple, con muy pocas opciones de escritura (realmente tan solo nos permite elegir el tipo de letra) y con una capacidad limitada en cuanto al tamaño del texto.
Pero a pesar de estas limitaciones, y precisamente por ellas, tiene una gran utilidad.
El Bloc de notas en Windows se encuentra en Inicio - Todos los programas - Accesorios - Bloc de notas

Una vez copiado y guardado, lo borramos de la plantilla.

Por descontado que nos fijamos muy bien de donde hemos retirado el código para volver a colocarlo luego en el mismo lugar.

Guardamos cambios para a continuación volver a colocar de nuevo el código que hemos copiado y guardado, en el mismo lugar que ocupaba antes.

Si todo ha ido bien, la imagen habrá desaparecido y tendremos nuestro header listo para volver a subir una nueva imagen.

Añadir estilos a una nueva sidebar

Hace tiempo añadíamos una segunda sidebar al blog, los resultados fueron buenos pero en varias ocasiones me han comentado la imposibilidad de personalizar la segunda sidebar de forma que el resultado fuera el mismo que en la primera.
El ejemplo que voy a poner  ha sido realizado en una plantilla Minima, siguiendo los pasos indicados tiempo atrás he añadido una nueva sidebar.

Después he personalizado los títulos.

.sidebar h2{

margin:0px;

color:#fff;

font-size:12px;

font-weight: bold;

background: #86AFB0;

padding: 3px 0px 3px 7px;

border-bottom:6px double #759697;

}

Y añadí color de fondo a la sidebar.

.sidebar {

background:#E2DDCB;

margin: 0px 5px 0px 0px;

padding:6px 13px 6px 13px;

color:#3333;

line-height:1.5em;

}

Explico esto porque es posible conseguir que con los mismos estilos que tenemos para una sidebar la personalización resulte la misma para las dos, eso es posible si en section class añadimos el mismo nombre.

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

</b:section>

</div>

<div id='newsidebar-wrapper'>

<b:section class='sidebar' id='newsidebar' preferred='yes'>

</b:section>

</div>

También puede ocurrir que preferimos todo lo contrario, que las dos tuvieran diferentes estilos.
Lo que hacemos entonces es buscar y copiar lo siguiente:

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

}

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {

margin:0;

padding-top:0;

padding-$endSide:0;

padding-bottom:.25em;

padding-$startSide:15px;

text-indent:-15px;

line-height:1.5em;

}

.sidebar .widget, .main .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

y pegarlo justo después del código que copiamos.

Haremos unos cambios en este último, vamos a sustituir el texto de "sidebar" por "newsidebar"
Luego buscamos (sin expandir la plantilla) lo siguiente:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Y sustituimos sidebar por newsidebar

<div id='newsidebar-wrapper'>
<b:section class='newsidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Ahora ya podemos trabajar en los estilos que copiamos y posteriormente pegamos y los cambios se mostrarán en la nueva sidebar.

Optimizar los titulos en Blogger

Optimizar los títulos aparentemente es algo que carece de importancia pero si la tiene.

Normalmente en los buscadores aparece primero el nombre del blog precedido del título de la entrada, si optimizamos los títulos el resultado será a la inversa, aparecerá en primer lugar el título de la entrada y después el del blog. ¿Y qué más da el orden?
Eso mismo me preguntaba yo, la respuesta es que si los títulos aparecen en primer lugar conseguimos un mejor posicionamiento porque parece ser que Google le da más importancia a las primeras palabras que se encuentran al inicio del título.

Supongamos que tengo una duda sobre el blog y busco en Google "Añadir sidebar" entre los muchos resultados encontraría "Gem@ BLOG añadir sidebar (Columna)" si Google le da más importancia a las primeras palabras debemos tener el título en primer lugar para que esa entrada tenga un buen posicionamiento o al menos intentar que lo tenga.

Nos dejamos la cháchara y pasamos a optimizar los títulos.

En nuestra plantilla localizamos <head> (al principio) justo después encontraremos algo así:

<title><data:blog.pageTitle/></title>

Lo que haremos será sustituirlo por:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<title><data:blog.pageName/> : Aquí ponemos el título del blog</title>

<b:else/>

<title><data:blog.pageTitle/></title>

</b:if>

Hay mucha información en Google sobre como optimizar los títulos, pero esta en concreto y mucha más en Vagabundia