Centrar imágenes en Blogger utilizando CSS

 Esta entrada es útil tan sólo para los que aún utilizamos las plantillas de Blogger antiguas. He podido comprobar que al utilizar el editor de Blogger para subir las imágenes centradas, en algún blog me aparecen posicionadas hacia la izquierda (usando el navegador Mozilla Firefox).

 Este problema lo he subsanado añadiendo el código correspondiente al elemento HTML img en la entrada, pero he pensado que quizá sea mejor hacerlo vía CSS, buscando en la plantilla (teclas Ctrl+F) la línea de código .post img y añadiendo los parámetros habituales de centrado; si no existe, habrá que probar suerte añadiendo al completo el nuevo código en las Hojas de Estilo en Cascada de la plantilla (siempre antes del valor resaltado en rojo):

.post img {
  display: block;
  margin: auto;
  text-align: center;
}

]]></b:skin>

 Después bastará con subir la imagen con el editor del blog y quedará centrada automáticamente, como en el siguiente ejemplo:

<div style="clear: both;"><a href="http://2.bp.blogspot.com/-FlJ7f3Fh7kw/UHAs-k6-bvI/AAAAAAAAAqg/z5zujRR3PjE/s1600/Mariquita_00.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Mariquita sobre una hoja"><img alt="Mariquita" height="240" src="http://2.bp.blogspot.com/-FlJ7f3Fh7kw/UHAs-k6-bvI/AAAAAAAAAqg/z5zujRR3PjE/s320/Mariquita_00.jpg" title="Mariquita sobre una hoja" width="320" /></a></div>

Activar los marcadores sociales de Blogger

 En las nuevas plantillas de Blogger, los marcadores sociales o botones para compartir vienen activados por defecto. Sin embargo, en las plantillas antiguas es necesario hacerlo manualmente, para lo cual hay que acceder a nuestra cuenta de Blogger y elegir el blog en cuestión → Diseño → Elementos de la página → Entradas del blog → Editar; aquí hay que marcar la casilla Mostrar botones para compartir → Guardar.

 Es probable que aún así los botones para compartir sigan sin aparecer, por lo que habrá que añadir algo de código en nuestra plantilla. Para ello, habrá que ir de nuevo a Diseño → Edición de HTML; aquí hay que marcar la casilla Expandir plantillas de artilugios y buscar la siguiente línea de código:

<div class='post-footer-line post-footer-line-1'>

 Siempre debajo del susodicho código preexistente añadimos este otro en la ubicación deseada (habrá que ir probando con "vista previa" del editor):

<div class='post-share-buttons goog-inline-block'>
  <b:if cond='data:post.sharePostUrl'>
    <b:include data='post' name='shareButtons'/>
  </b:if>
</div>

 Si por casualidad los botones de compartir de Blogger siguieran sin aparecer o desaparecieran misteriosamente a los pocos días sin haber hecho ningún cambio en el código de la plantilla del blog, tendremos que añadir la siguiente línea de código CSS (bajo /* Posts */, por ejemplo):

.share-button {
  display: inline-block;
}

Meta viewport para dispositivos móviles en Blogger

 En las nuevas plantillas de Blogger ya aparece un código condicional que aplica la META viewport. Su función es adaptar la plantilla de Blogger para la correcta visión del blog desde dispositivos móviles.

 En el caso de que sigamos utilizando una plantilla antigua, deberemos insertar el siguiente código condicional en el HEAD, justo encima del código preexistente resaltado en rojo:

<b:if cond='data:blog.isMobile'>
  <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
  <meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>

 También será necesario elegir la plantilla a utilizar para el acceso desde móviles. Para ello, lo mejor es acceder a nuestra cuenta de Blogger desde Blogger in draft (Blogger en borrador) e ir al blog en cuestión → Plantilla → Móvil → Configuración → "Sí, mostrar la plantilla para móviles en los dispositivos móviles" ó "No, mostrar la plantilla para ordenador en los dispositivos móviles"; si hemos elegido la primera opción, finalmente habremos de elegir entre la plantilla predeterminada y seis más → Guardar.

Código simplificado de la insignia de perfil de facebook

 Aunque la red social facebook nos facilita una herramienta para editar el widget (artilugio) de la insignia del perfil, para mi gusto el código HTML que se nos suministra se puede simplificar aún más. Si tan sólo elegimos la opción de incluir una foto de perfil en la insignia, aun así nos aparecerá nuestro nombre y una invitación para que los potenciales visitantes creen su propia insignia.

 El código que nos facilita facebook para implementar la insignia del perfil en el blog es el siguiente:

<!-- Facebook Badge START --><a href="http://es-la.facebook.com/Silverolux" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Fulanito de Tal y Cual">Fulanito de Tal y Cual</a><br/><a href="http://es-la.facebook.com/Silverolux" target="_TOP" title="Fulanito de Tal y Cual"><img src="http://badge.facebook.com/badge/1246607629.138.743679704.png" width="120" height="136" style="border: 0px;" /></a><br/><a href="http://es-la.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Crea tu propia insignia">Crea tu insignia</a><!-- Facebook Badge END -->

 Y este es el código simplificado:

<!-- Facebook Badge START --><a href="http://es-la.facebook.com/Silverolux" target="_top" title="Silverolux en facebook"><img alt="facebook" height="136" src="http://badge.facebook.com/badge/1246607629.138.743679704.png" style="border: 0px;" title="Silverolux en facebook" width="120" /></a><!-- Facebook Badge END -->

Centrar una imagen con enlace y junto con texto en un post de Blogger

 Para empezar, inserto una imagen en esta entrada (o post) utilizando el editor actualizado de Blogger; el código que obtengo es el siguiente (he resaltado en rojo la parte del código que a mí me resulta totalmente innecesaria, aunque se puede mantener sin ningún problema):

<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_4a-2T-ux0oY/TNAAUCH-rfI/AAAAAAAAAfA/hxnHEDQTkJU/s1600/Entrada-Castillo+de+Pe%C3%B1afiel_00A.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" nx="true" src="http://4.bp.blogspot.com/_4a-2T-ux0oY/TNAAUCH-rfI/AAAAAAAAAfA/hxnHEDQTkJU/s320/Entrada-Castillo+de+Pe%C3%B1afiel_00A.jpg" width="276" /></a></div>

 Al analizar el código suministrado por Blogger, podremos llegar a las siguientes conclusiones:

• En el bloque div se incluye una clase (class) CSS que no se suele usar y que generalmente no está definida en la plantilla.
• En el enlace se incluye el atributo imageanchor, al que no le encuentro ninguna utilidad en este caso.
• El atributo border es preferible tenerlo definido en plantilla, con CSS.
• El atributo nx me resulta totalmente desconocido.
• En lugar de definir el tamaño con style, se utilizan los atributos height y width, que deben eliminarse si se utiliza alguna clase CSS especial.

 Para centrar la imagen en cuestión, que en este caso ya va enlazada al servidor de Blogger (etiquetada en Álbumes Web de Picasa) y que va a ir acompañada de un texto que añado yo, lo que hago es incluir los tres elementos (enlace, imagen y texto) en un mismo bloque div. También añado los atributos title y alt, con sus respectivas descripciones. Dado que la etiqueta span no se corresponde en modo alguno con bloques, es conveniente añadirle la propiedad display: block, la cual transforma cualquier etiqueta inline en una de bloque. Así, el código a utilizar sería el siguiente:

<div style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_4a-2T-ux0oY/TNAAUCH-rfI/AAAAAAAAAfA/hxnHEDQTkJU/s1600/Entrada-Castillo+de+Pe%C3%B1afiel_00A.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Entrada de la primera barrera del Castillo de Peñafiel"><img alt="Entrada del Castillo de Peñafiel" height="320" src="http://4.bp.blogspot.com/_4a-2T-ux0oY/TNAAUCH-rfI/AAAAAAAAAfA/hxnHEDQTkJU/s320/Entrada-Castillo+de+Pe%C3%B1afiel_00A.jpg" title="Entrada de la primera barrera del Castillo de Peñafiel" width="276" /></a><span style="color: #741b47; display: block; font-size: x-small;">Entrada de la primera barrera del Castillo de Peñafiel (Valladolid).</span></div>

Entrada de la primera barrera del Castillo de Peñafiel (Valladolid).

La META X-UA-Compatible en Internet Explorer 8

 El navegador Internet Explorer 8 cumple parcialmente con los estándares, a diferencia de las anteriores versiones. Esto puede resultar una complicación añadida más que una solución, puesto que ahora --más que nunca-- se pueden visitar las páginas web utilizando las nuevas mejoras o ignorándolas.

 En realidad, esto no hay quien lo entienda; está claro que estamos muy lejos todavía de que un mismo sitio web se vea de igual forma en todos los navegadores, pero el hecho de que las diferencias existentes entre las distintas versiones de un mismo navegador continúen generando problemas me parece ya un atraso inaceptable.

 Con Internet Explorer 8, los usuarios pueden decidir entre los siguientes modos de compatibilidad: Emulate IE7 Mode, Emulate IE8 Mode, IE5 Mode, IE7 Mode, etc. Para aliviar un poco los problemas de compatibilidad, usaremos la META X-UA-Compatible para informar al navegador de cuál es el modo adecuado de mostrar un sitio. Al atributo content se le pueden dar los valores de IE=5, IE=7, IE=EmulateIE7, IE=8, o bien usar IE=edge, el cual indica que se utilice el modo de compatibilidad más avanzado.

 Este es el código que hay que añadir en la plantilla, concretamente en el HEAD y después de TITLE:

<meta content='IE=8' http-equiv='X-UA-Compatible'/>

Añadir listas largas en un espacio pequeño

 Para mostrar una lista larga en un espacio más reducido del que normalmente ocuparía, lo más sencillo es incluir dicha lista en un bloque contenedor al que se han de aplicar las propiedades overflow, height y width, con sus respectivos valores:

<div style="height: 145px; overflow: auto; width: 300px;"><ul>
<li>AQUÍ TEXTO1.</li>
<li>AQUÍ TEXTO2.</li>
<li>AQUÍ TEXTO3.</li>
<li>AQUÍ TEXTO4.</li>
</ul></div>

• Castillo Santuario de Javier.
• Castillo de Marcilla.
• Castillo Palacio de Olite.
• Colegiata de la Fortaleza de Alquézar.
• Castillo de Íscar.
• Castillo de Loarre.
• Castillo de Monzón, Huesca.
• Torre del Castillo de Samitier.
• Patio de armas del Castillo de Aínsa.
• Castillo de Coca.
• Entrada del Castillo de Mombeltrán.
• Castillo del Condestable Dávalos.
• Castillo de Arévalo.
• Castillo de La Mota.
• Castillo de Turégano.
• Castillo de Cuéllar.
• Castillo de Pedraza.
• Castillo de Monleón.
• Alcázar de Segovia.
• Castillo de Tiedra.
• Castillo de Ucero.

 Lo mismo que hemos hecho con una lista no ordenada lo podemos hacer con imágenes. En este ejemplo, las imágenes utilizadas aparecen centradas:

<div style="text-align: center;"><div style="height: 218px; margin: auto; overflow: auto; text-align: center; width: 200px;"><a href="http://AQUÍ URL1" onclick="this.target='_blank'" rel="nofollow" title="AQUÍ TÍTULO1"><img alt="AQUÍ TÍTULO breve1" src="http://AQUÍ URL de IMAGEN1" title="AQUÍ TÍTULO visible al pasar CURSOR1" /></a> 
<a href="http://AQUÍ URL2" onclick="this.target='_blank'" rel="nofollow" title="AQUÍ TÍTULO2"><img alt="AQUÍ TÍTULO breve2" src="http://AQUÍ URL de IMAGEN2" title="AQUÍ TÍTULO visible al pasar CURSOR2" /></a> 
<a href="http://AQUÍ URL3" onclick="this.target='_blank'" rel="nofollow" title="AQUÍ TÍTULO3"><img alt="AQUÍ TÍTULO breve3" src="http://AQUÍ URL de IMAGEN3" title="AQUÍ TÍTULO visible al pasar CURSOR3" /></a></div></div>

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

Añadir texto informativo en el footer de un blog de Blogger

 Para añadir un texto informativo en el footer de un blog de Blogger --como el nombre del autor, la plantilla utilizada o las licencias--, lo primero que hay que hacer es buscar en la plantilla la línea de código donde está el encabezado de estilos #footer (/* Footer */) y añadir debajo de él otros dos nuevos: .author (para las propiedades de los datos del autor del blog) y .credits (para las propiedades de los datos de la plantilla utilizada). Este sería el código que habría que insertar en la plantilla (debajo del código resaltado en rojo):

#footer {
  width: 100%;
  line-height: 1.6em;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: none;
}.author {
  float: $startSide;
  padding-left: 20px;
  color: #b02b2c;
  font-family: Arial, Verdana, sans-serif;
  font-weight: normal;
  font-size: 10px
}

.credits {
  float: $endSide;
  padding-right: 20px;
  color: #b02b2c;
  font-family: Arial, Verdana, sans-serif;
  font-weight: normal;
  font-size: 10px
}

 Ahora vamos a Escritorio de Blogger → Diseño → Elementos de la página y añadimos un gadget en el footer con el siguiente código:

<div class="author">
AQUÍ AÑO ¦ <a href="http://AQUÍ URL del BLOG" title="AQUÍ TEXTO visible al pasar el CURSOR"><span style="font-size: medium;"><strong>AQUÍ nombre del BLOG</strong></span></a></div>
<div class="credits">
AQUÍ datos de PLANTILLA <a href="http://AQUÍ URL"><span style="font-size: small;"><strong>Blogger</strong></span></a></div>

 Utilizando el código de estos ejemplos, el texto de la información del blog aparecería a la izquierda del footer y el texto del tipo de plantilla a la derecha del mismo.

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

Color de fondo del contenedor de contenido en Blogger

 Para establecer el color de fondo del contenedor de contenido (contenedor de posts + contenedor/es de barra/s lateral/es) en un blog de Blogger, hay que buscar en la plantilla la línea de código donde está el encabezado #content-wrapper (/* Outer-Wrapper */ o /* Content-Wrapper */) y añadir la propiedad background-color con su correspondiente valor de color RGB en hexadecimal. Como en otras ocasiones, en lugar de la propiedad background-color se puede utilizar la de background.

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

#content-wrapper {
  width: 100%; 
  position: relative;
  margin: 0 auto;
  padding: 0;
  background-color: #f0f8ff;
  background-image: none;
}

Añadir una nueva barra lateral en Blogger

 A la hora de añadir una nueva sidebar (o barra lateral) en un blog de Blogger, lo primero que hay que hacer es buscar en la plantilla el encabezado /* Outer-Wrapper */ y centrarse en el siguiente código:

/* Outer-Wrapper */

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

#main-wrapper {
  width: 410px;
  padding: 10px 8px 10px 8px;
  float: $startSide;
  border-top: 2px solid $bordercolor;
  border-right: 1px solid $bordercolor;
  border-bottom: 2px solid $bordercolor;
  border-left: 1px solid $bordercolor;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
  width: 220px;
  padding: 10px 8px 10px 8px;
  float: $endSide;
  border: 0;
  background-color: #eeeeee;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

 Empezaremos por renombrar #sidebar-wrapper como #right-sidebar-wrapper y añadiremos una nueva línea de código para la nueva columna lateral: #left-sidebar-wrapper (con propiedades y valores similares a los de la otra columna lateral). También hay que modificar el ancho total del blog, teniendo en cuenta que la suma del ancho del left-sidebar-wrapper, del main-wrapper y del right-sidebar-wrapper debe ser siempre ligeramente inferior al ancho del outer-wrapper (no hay que olvidar aplicar el mismo cambio de ancho total al header-wrapper y al footer [o footer-wrapper]). Es conveniente añadir al main-wrapper la propiedad margin-left con el correspondiente valor de longitud en píxeles, para separar el contenedor de los posts del de la nueva columna lateral.

 El código que deberemos de implementar será similar al del siguiente ejemplo:

/* Outer-Wrapper */

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

#left-sidebar-wrapper {
  width: 210px;
  padding: 10px 8px 10px 8px;
  float: $startSide;
  text-align: center;
  border: 0;
  background-color: #eeeeee;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
  width: 475px;
  margin-top: 4px;
  margin-left: 5px;
  padding: 10px 8px 10px 8px;
  float: $startSide;
  border-top: 2px solid $bordercolor;
  border-right: 1px solid $bordercolor;
  border-bottom: 2px solid $bordercolor;
  border-left: 1px solid $bordercolor;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#right-sidebar-wrapper {
  width: 235px;
  padding: 10px 8px 10px 8px;
  float: $endSide;
  border: 0;
  background-color: #eeeeee;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

 Por último, hay que añadir a la plantilla el siguiente código debajo de la línea resaltada en rojo (renombrando el elemento div id='sidebar-wrapper'):

<div id='content-wrapper'>
   
<div id='left-sidebar-wrapper'>
<b:section class='left-sidebar' id='left-sidebar' preferred='yes'>
</b:section>
</div><div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>

<div id='right-sidebar-wrapper'>
<b:section class='right-sidebar' id='right-sidebar' preferred='yes'>
</b:section>
</div>

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

Color de fondo de los títulos de los posts

 Para establecer el color de fondo de los títulos de los posts en un blog de Blogger, hay que buscar en la plantilla la línea de código donde está el encabezado .post h3 (/* Posts */) 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:

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

Añadir borde a los títulos y a los elementos de la sidebar

 Para añadir bordes a los títulos y a los elementos de la sidebar (o barra lateral) en Blogger, hemos de buscar las líneas de código donde están los encabezados .sidebar h2 y .sidebar .widget (/* Sidebar Content */) y añadir las propiedades border con sus correspondientes valores.

 Será necesario jugar con los valores de las propiedades border-top, border-right, border-bottom y border-left, para evitar superposiciones y otros efectos indeseados (cada plantilla es un mundo).

 Así podría quedar el código para añadir el borde de los títulos de la sidebar:

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

 Y así quedaría el código para añadir el borde a los elementos de la sidebar:

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

Añadir borde al contenedor de posts en Blogger

 Para añadir un borde al contenedor de los posts en Blogger, hemos de buscar la línea de código donde está el encabezado #main-wrapper (/* Outer-Wrapper */) y añadir la propiedad border con sus correspondientes valores. Si queremos utilizar el valor $bordercolor, hay que asegurarse previamente de que está en la lista de variables de la plantilla (/* Variable definitions):

<Variable name="bordercolor" description="Border Color"
          type="color" default="#333" value="#0066CC">

 Y lo mismo habrá que hacer con el valor $startSide, que equivale a left:

<Variable name="startSide" description="Start side in blog language"
          type="automatic" default="left" value="left">

 El código que va a definir 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:

#main-wrapper {
  width: 465px;
  padding: 10px 8px 10px 8px;
  float: $startSide;
  border-top: 2px solid $bordercolor;
  border-right: 1px solid $bordercolor;
  border-bottom: 2px solid $bordercolor;
  border-left: 1px solid $bordercolor;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

Color de fondo de los títulos de la sidebar

 Para establecer el color de fondo de los títulos 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 h2 (/* Sidebar Content */) y añadir la propiedad background-color con su correspondiente valor de color RGB en hexadecimal. En ocasiones ocurre que .sidebar h2 no aparece en la plantilla, en cuyo caso hay que implementarlo en la zona de /* Sidebar Content */, que es donde suelen estar las propiedades de la sidebar.

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

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

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>

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