sábado, 6 de marzo de 2010

Imagen de fondo en el pie de un blog de Blogger

 Para insertar una imagen de fondo en el pie de un blog de Blogger, hay que buscar en la plantilla la línea de código donde está el encabezado #footer (/* Footer */) y añadir la propiedad background-image con su correspondiente valor de URL.

 El código quedaría de forma similar al del siguiente ejemplo:
#footer {
  width: 980px;
  height: 122px;
  clear: both;
  margin: 0 auto;
  padding-top: 0;
  line-height: 1.6em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  background-image: url(http://AQUÍ poner URL de la imagen);
}

viernes, 5 de marzo de 2010

Cambiar el color de fondo de la zona útil del blog

 Si deseamos cambiar el color de fondo de la zona útil 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 #outer-wrapper (/* Outer-Wrapper */) y cambiar el valor de background por otro código de color RGB en hexadecimal (hex color). Esta es la forma más sencilla de hacerlo y el código en cuestión sería semejante al del siguiente ejemplo:
#outer-wrapper { 
  width: 980px;
  margin: 0 auto;
  padding: 0;
  text-align: justify;
  font: $bodyfont;
  border: 4px ridge #3399cc;
  background: #c3d9ff;
}

martes, 2 de marzo de 2010

Añadir borde a los títulos de los posts en Blogger

 Para añadir un borde a los títulos de los posts en Blogger, hemos de buscar la línea de código donde está el encabezado .post h3 (/* Posts */) y añadir la propiedad border con sus correspondientes valores.

 El borde se puede personalizar más añadiendo las propiedades border-top, border-right, border-bottom y border-left, como se puede ver en este ejemplo:
.post h3 {
  margin: 0.25em 0 0.25em;
  padding: 2px 8px 2px 8px;
  font-size: 125%;
  font-weight: normal;
  line-height: 1.4em;
  text-align: center;
  text-transform: none;
  border-top: 1px solid #f2f2f2;
  border-right: 1px solid #bdbdbd;
  border-bottom: 1px solid #a4a4a4;
  border-left: 1px solid #bdbdbd;
  color: $titlecolor;
  background-color: transparent;
}

lunes, 1 de marzo de 2010

Títulos de la sidebar y fechas de los posts en Blogger

 En el código de la plantilla Mínima de Blogger, tanto las fechas de los posts como los títulos de la sidebar se definen por defecto bajo el mismo encabezado: h2 (/* Headings */). En otras plantillas existe la línea de código .sidebar h2, para poder definir de manera independiente las propiedades de los títulos de la sidebar.

 Por ejemplo, si lo que queremos es que los títulos de la sidebar y las fechas de los posts se muestren en mayúsculas y minúsculas (no tan sólo en mayúsculas), deberemos cambiar el valor de text-transform; en vez de uppercase hay que poner none:
h2 {
  margin: 1.5em 0 0.75em;
  font: $headerfont;
  line-height: 1.4em;
  text-transform: none;
  letter-spacing: 0.2em;
  color: $sidebarcolor;
}

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