domingo, 27 de diciembre de 2009

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>

sábado, 26 de diciembre de 2009

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; 
}

════════════════════════════════════════════ eXponsor - Enlaces y Anuncios Patrocinados
════════════════════════════════════════════

martes, 22 de diciembre de 2009

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>

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

sábado, 12 de diciembre de 2009

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>
Exposición de ParísImagen de la Exposición Universal de París de 1900.


-----------------------------------------------------------------------------emails de empresas-----------------------------------------------------------------------------