domingo, 24 de enero de 2010

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

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

jueves, 14 de enero de 2010

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" />
Útiles de pintar


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

miércoles, 6 de enero de 2010

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="margin: auto; text-align: center;"><table align="center" style="margin-left: auto; margin-right: auto; text-align: center;"><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>
Castillo de CocaCastillo de CocaCastillo de Coca

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