Color de fondo de los elementos de la sidebar

 Para establecer el color de fondo de los elementos de la sidebar (o barra lateral) de un blog de Blogger, hay que buscar en la plantilla la línea de código donde está el encabezado .sidebar .widget (/* Sidebar Content */) y añadir la propiedad background con su correspondiente valor de color RGB en hexadecimal. En ocasiones se nos presenta como .sidebar .widget, .main .widget, en cuyo caso hay que separar el código en dos grupos independientes.

 El código quedaría de forma similar al del siguiente ejemplo:

.sidebar .widget { 
  margin: 0 0 0.25em;
  padding: 0 0 0.75em;
  border-top: 0;
  border-right: 1px solid #bdbdbd;
  border-bottom: 1px solid #a4a4a4;
  border-left: 1px solid #bdbdbd;
  background: #c3d9ff;
}

.main .widget { 
  margin: 0 0 1.5em;
  padding: 0 0 1.5em;
  border-bottom: 1px dotted $bordercolor;
}

Código de Goear válido para XHTML

 El problema principal que se nos presenta cuando insertamos el código de audio de Goear en un post es que el elemento embed no es válido, o más bien, no existe en las últimas especificaciones del W3C, sino que fue un invento de la compañía de software Netscape Communications (de aquellos lejanos tiempos en que su navegador aún tenía cierta importancia). Sin embargo, object continúa siendo un elemento válido, así que la solución es utilizarlo añadiéndole el atributo type="application/x-shockwave-flash".

 Este es un ejemplo del código de audio que proporciona Goear:

<object height="132" width="353"><embed src="http://www.goear.com/files/external.swf?file=0758235" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="353" height="132"></embed></object>

 Y este sería el código válido para el mismo audio de Goear, centrado y para un tamaño de 353 de ancho por 132 de alto:

<div style="margin: auto; text-align: center;"><object data="http://www.goear.com/files/external.swf?file=0758235" style="height: 132px; width: 353px;" type="application/x-shockwave-flash"><param name="movie" value="http://www.goear.com/files/external.swf?file=0758235" /><param name="wmode" value="transparent" /><param name="quality" value="high" /></object></div>

 Últimamente se viene observando por parte de los usuarios de Internet Explorer que los reproductores de Goear se autoejecutan, cosa bastante molesta si hay varios de ellos insertados en la misma página. La solución más sencilla es agregar al valor de la URL el parámetro autoplay=0. También puede ser necesario añadir una etiqueta param con el atributo play de valor false, quedando el código de la siguiente forma:

<div style="margin: auto; text-align: center;"><object data="http://www.goear.com/files/external.swf?file=0758235&autoplay=0" style="height: 132px; width: 353px;" type="application/x-shockwave-flash"><param name="movie" value="http://www.goear.com/files/external.swf?file=0758235&autoplay=0" /><param name="wmode" value="transparent" /><param name="quality" value="high" /><param name="play" value="false" /></object></div>

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

Modificar el ancho total del blog

 Para modificar el ancho total de un blog de Blogger, hay que buscar en la plantilla las líneas de código donde están los encabezados #header-wrapper (/* Header */), #outer-wrapper (/* Outer-Wrapper */) y #footer (/* Footer */); a sus respectivas propiedades width hay que añadir un mismo valor de longitud en píxeles.

 En este ejemplo, he añadido un valor de 980 píxeles (un valor óptimo para una resolución de 1024x768):

#header-wrapper {
  width: 980px;
  margin: 0 auto;
  border: 0;
}

#outer-wrapper { 
  width: 980px;
  margin: 0 auto;
  padding: 0;
  text-align: justify;
  font: $bodyfont;
  border: 4px ridge #3399cc;
  background: #c3d9ff;
}

#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://img411.imageshack.us/img411/6596/silverolusplater04awu8.jpg);
}

 En el anterior ejemplo se puede observar que las definiciones principales del pie del blog (o footer) están encabezadas por #footer; esto no es razonable, así que es preferible dividir las propiedades entre #footer-wrapper y #footer, como puede verse en el siguiente ejemplo:

#footer-wrapper {
  width: 980px;
  height: 122px;  
  clear: both;  
  margin: 0 auto;
  background-image: url(http://img411.imageshack.us/img411/6596/silverolusplater04awu8.jpg);  
}

#footer {
  width: 100%;
  padding-top: 0;
  line-height: 1.6em;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

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

Color de fondo del pie de un blog de Blogger

 Para establecer el color de fondo del 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-color con su correspondiente valor de color RGB en hexadecimal.

 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-color: #3f4c6b;
  background-image: none; 
}