Listas de sidebar en una plantilla con dos barras laterales

 Para establecer los valores de las propiedades de estilo de las listas de sidebar en una plantilla de Blogger a la que hemos añadido una nueva columna lateral, lo primero que hay que hacer es buscar las líneas de código donde están los encabezados .sidebar ul y .sidebar li (/* Sidebar Content */) y renombrarlos como .right-sidebar ul y .right-sidebar li; también hay que añadir .left-sidebar ul y .left-sidebar li.

 El código que ha de regir las propiedades de las listas no ordenadas de las barras laterales quedaría de una forma similar al del siguiente ejemplo:

.left-sidebar ul {
  display: list-item;
  list-style-type: disc;
  list-style-image: none;
  list-style-position: inside;
  margin: 1em 0;
  padding: 0 0 0 1.5em;
  text-align: left;
}

.right-sidebar ul {
  display: list-item;
  list-style-type: disc;
  list-style-image: none;
  list-style-position: inside;
  margin: 1em 0;
  padding: 0 0 0 1.5em;
}

.left-sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 0.25em;
  padding-$startSide: 10px;
  text-indent: -10px;
  line-height: 1.5em;
}

.right-sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 0.25em;
  padding-$startSide: 15px;
  text-indent: -15px;
  line-height: 1.5em;
}

Textos de sidebar en una plantilla con dos barras laterales

 Para establecer los valores de las propiedades de estilo de los textos de sidebar en una plantilla de Blogger a la que hemos añadido una nueva columna lateral, lo primero que hay que hacer es buscar la línea de código donde está el encabezado .sidebar (/* Sidebar Content */) y renombrarlo como .right-sidebar; también hay que añadir el encabezado .left-sidebar.

 El código que ha de regir las propiedades de los textos de sidebar quedaría de una forma similar al del siguiente ejemplo:

.left-sidebar { 
  color: $sidebartextcolor;
  line-height: 1.5em;
}

.right-sidebar { 
  color: $sidebartextcolor;
  line-height: 1.25em;
}

 Para utilizar el valor $sidebartextcolor, previamente debe estar implementado en las variables de la plantilla (/* Variable definitions):

<Variable name="sidebartextcolor" description="Sidebar Text Color"
          type="color" default="#999" value="#800040">

Títulos y elementos de sidebar en una plantilla con dos barras laterales

 Para establecer los valores de las propiedades de estilo de títulos y elementos de sidebar en una plantilla de Blogger a la que hemos añadido una nueva columna lateral, lo primero que hay que hacer es buscar la línea de código donde está el encabezado /* Sidebar Content */.

 Ahora hay que localizar .sidebar .widget y renombrarlo como .right-sidebar .widget; también hay que añadir el encabezado .left-sidebar .widget. El código que ha de regir las propiedades de los elementos de sidebar quedaría así:

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

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

 Para las propiedades de los títulos de sidebar, hay que añadir dos nuevos encabezados: .right-sidebar h2 y .left-sidebar h2, como se puede ver en este ejemplo:

.left-sidebar h2 {
  padding: 5px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #bdbdbd;
  background-color: #d8d8d8;
  background-image: none; 
}

.right-sidebar h2 {
  padding: 5px;
  border-top: 1px solid #ffffff;
  border-right: 0;
  border-bottom: 1px solid #bdbdbd;
  border-left: 0;
  background-color: #d8d8d8;
  background-image: none;
}

Añadir sombras a un texto en un blog de Blogger

 Para añadir sombras a un texto insertado en un blog de Blogger hay que utilizar la propiedad text-shadow en el elemento deseado del código de las Hojas de Estilo (CSS) de nuestra plantilla. Esta propiedad se define con cuatro parámetros, de esta forma: text-shadow: coordenadaX coordenadaY amplitud color;

 La coordenadaX (o offset-x) indica el desplazamiento horizontal de la sombra con respecto al texto en cuestión (valor positivo hacia la derecha y negativo hacia la izquierda); la coordenadaY (o offset-y) indica el desplazamiento vertical de la sombra con respecto al texto (valor positivo hacia abajo y negativo hacia arriba); amplitud (o blur-radius) es el tamaño de la sombra: a mayor valor, el efecto de desenfoque también será mayor; color es el color de la sombra.

 El gran problema que se nos presenta es que esto tan sólo funciona en los navegadores Safari, Opera y Firefox. Para que funcione con Internet Explorer hay que utilizar un filtro (progid:DXImageTransform.Microsoft.Shadow).

 He aquí un ejemplo de código para añadir sombras a un texto (en este caso en el footer):

#footer {
  width: 100%;
  line-height: 1.6em;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: none;
  text-shadow: 2px 1px 5px #36393d;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#36393d, direction=135, strength=5);
}