Cambiar el color de fondo del blog

 Si deseamos cambiar el color de fondo de nuestro blog de Blogger, tendremos que modificar algo el código de las Hojas de Estilo (CSS) de la plantilla.

 Hemos de buscar en la plantilla la línea de código body y cambiar el valor de background por otro código de color en hexadecimal (hex color). También se puede añadir el valor repeat para forzar al color en cuestión a que repita a lo largo y ancho del blog y el valor fixed para que no se mueva a la hora de desplazarnos verticalmente por la página. Esta es la forma más sencilla de hacerlo y el código en cuestión sería semejante al del siguiente ejemplo:

body { 
  margin: 0; 
  text-align: center; 
  font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif; 
  font-size: small; 
  color: #660000; 
  background: #000000 repeat fixed; 
}

Imágenes sin borde en los posts de Blogger

 Algunas plantillas de Blogger están diseñadas para añadir de manera predeterminada un borde a las imágenes que se añaden en los posts. El código de las Hojas de Estilo (CSS) que rige este comportamiento suele ser el siguiente:

.post img {
  padding: 4px;
  border: 1px solid $bordercolor;
}

 Para conseguir que todas las imágenes aparezcan sin borde lo único que hay que hacer es sustituir el valor anterior de border por 0:

.post img {
  padding: 4px;
  border: 0;
}

 Pero si lo que queremos es eliminar el borde de una imagen determinada, tendremos que añadir algo al código de la imagen en cuestión:

<img alt="Útiles de pintar" src="http://img696.imageshack.us/img696/462/tilesdepintura00.jpg" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; margin: auto; text-align: center;" title="Útiles de pintura al óleo" />

----------------------------------------------------------------------------------------------------------------------------------------------------------

Imágenes alineadas horizontalmente en Blogger

 Si deseamos alinear horizontalmente un grupo de imágenes en Blogger (se alinean verticalmente de manera predeterminada), lo que podemos hacer para que queden un poco presentables es incluirlas en una sencilla tabla.

 Los elementos a utilizar en la elaboración del código de la tabla son los siguientes: table (tabla), tbody (cuerpo de tabla), tr (fila de una tabla) y td (celda de datos de una tabla). El código básico a utilizar podría ser el siguiente (con el código específico de este ejemplo resaltado en blanco):

<div style="text-align: center;"><table><tbody><tr><td><a href="http://www.shareapic.net/View-7835218-Castillos-de-España.html" onclick="this.target='_blank'" rel="nofollow"><img alt="Castillo de Coca" src="http://preview.shareapic.net/preview3/007835218.jpg" title="Castillo gótico-mudéjar de Coca" /></a></td><td><a href="http://www.shareapic.net/View-7753842-Castillos-de-España.html" onclick="this.target='_blank'" rel="nofollow"><img alt="Castillo de Coca" src="http://preview.shareapic.net/preview3/007753842.jpg" title="Entrada del Castillo de Coca" /></a></td><td><a href="http://www.shareapic.net/View-7757807-Castillos-de-España.html" onclick="this.target='_blank'" rel="nofollow"><img alt="Castillo de Coca" src="http://preview.shareapic.net/preview3/007757807.jpg" title="Castillo mudéjar de Coca" /></a></td></tr></tbody></table></div>

Forzar a que un enlace se abra en una ventana nueva

 Normalmente, cuando deseábamos que un enlace se abriera en una ventana nueva, simplemente bastaba con añadir a su código lo siguiente: target="_blank" (todavía se sigue utilizando). Pero sucede que el atributo target (marco-destino de un vínculo) ha sido desaprobado en las declaraciones XHTML Strict.

 Una alternativa válida puede ser utilizar el elemento onclick (evento intrínseco: clic del dispositivo señalador) de la siguiente forma: onclick="this.target='_blank'". El código a utilizar sería el siguiente:

<a href="http://AQUÍ poner URL" rel="nofollow" onclick="this.target='_blank'" title="AQUÍ poner TÍTULO"></a>

Texto justificado en los posts de Blogger

 En la mayoría de las plantillas de Blogger, la opción predeterminada de alineamiento de texto para los posts es la de "alineación a la izquierda". Esto se puede modificar en cada una de las entradas mediante el editor de texto, pero si lo que queremos es que todos los posts tengan el texto justificado, tendremos que modificar algo el código de las Hojas de Estilo (CSS).

 Hemos de buscar en la plantilla la línea de código #outer-wrapper y cambiar el valor de text-align: en vez de left (o $startSide), pondremos justify. El código quedaría de la siguiente forma:

/* Outer-Wrapper */

#outer-wrapper { 
 width: 980px; 
 margin: 0 auto; 
 padding: 0; 
 text-align: justify; 
 font: normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif; 
 border: 4px ridge #3399cc; 
 background: #c3d9ff; 
}

Visor de documentos de Google Docs en el blog

 Google Docs nos permite insertar archivos PDF o presentaciones de PowerPoint en el blog, mostrando el contenido en un visor sin necesidad de alojar los archivos en su servicio. Para lograr esto, los documentos deberán ser accesibles y estar alojados en un sitio que los admita.
 He utilizado para este caso un documento en PDF de una página del BOE que he alojado en Xoo Image, un sencillo y gratuito servicio de alojamiento de imágenes y archivos que ni tan siquiera pide que te registres (todo un misterio). El código a utilizar para conseguir todo esto es el siguiente (con la URL que ha sido utilizada en este ejemplo resaltada en blanco):

<div style="text-align: center;"><iframe frameborder="0" src="http://docs.google.com/gview?url=http://img48.xooimage.com/files/f/1/b/boe-304_00-16b8bb6.pdf&amp;embedded=true" style="height: 550px; width: 400px;"></iframe></div>

Centrar una imagen junto con texto en un post de Blogger

 Para centrar una imagen acompañada de un texto en un post de Blogger, podemos simplemente incluir los dos elementos en un mismo bloque div. Dado que las etiquetas img y span no son bloques, debemos añadirlas la propiedad display: block, que transforma cualquier etiqueta inline en una de bloque.

 Este sería el código para centrar la imagen y el texto en un mismo bloque (con la parte del código que rige el centrado resaltada en amarillo):

<div style="text-align: center;"><img alt="Exposición de París" src="http://img10.imageshack.us/img10/1598/exposicinpars00a.jpg" style="display: block;" title="Imagen de la Exposición Universal de París" /><span style="color: #741b47; display: block; font-size: x-small;">Imagen de la Exposición Universal de París de 1900.</span></div>

 Otra forma de hacerlo es incluyendo la imagen en un bloque y el texto en otro, sin olvidar añadir la propiedad display: block. Este sería el código para centrar la imagen y el texto en sus respectivos bloques (con las partes del código que rigen el centrado resaltadas en amarillo):

<img alt="Exposición de París" src="http://img10.imageshack.us/img10/1598/exposicinpars00a.jpg" style="display: block; margin: auto; text-align: center;" title="Imagen de la Exposición Universal de París" /><span style="color: #741b47; display: block; font-size: x-small; text-align: center;">Imagen de la Exposición Universal de París de 1900.</span>

Imagen de la Exposición Universal de París de 1900.

-----------------------------------------------------------------------------accommodation in menorca
Casas de madera Canarias
cetareas
coches seminuevos
desengrasantes
fabrica muebles de baño
fregadoras
hernia discal
naranjas
puertas de armario-----------------------------------------------------------------------------

IE8.js contra las limitaciones de Internet Explorer

 Son varias las alternativas más avanzadas del CSS que aún no han sido implementadas en el navegador Internet Explorer, aunque algunas de ellas ya están funcionando en la versión más reciente de IE8. Para hacer frente a estas y otras carencias, el programador y diseñador de webs Dean Edwards ha creado una serie de scripts que podemos cargar directamente desde nuestra plantilla, sin necesidad de tenerlos que alojar nosotros personalmente. La última versión del script IE7.js/IE8.js se puede consultar en Google Code.

 Para utilizar este script, lo único que hay que hacer es añadir el siguiente código antes del elemento resaltado en rojo:

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->
 </head>