miércoles, 31 de marzo de 2010

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.


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

martes, 30 de marzo de 2010

Optimizar las meta description y meta keywords en Blogger

 Además de optimizar los títulos de los posts, también es conveniente optimizar la META description y la META keywords de nuestra plantilla de Blogger; la primera es una descripción general de la página y la segunda es una serie de palabras clave que deberían de ayudar a los buscadores a identificar el contenido de la página e indexarlo correctamente. Si seguimos las recomendaciones de Google, deberemos diferenciar las descripciones de cada página, porque utilizar descripciones idénticas en todas las páginas del sitio resulta inútil.

 Cuando consultamos el panel de nuestro blog en las herramientas para webmasters de Google y vamos a Diagnósticos → Sugerencias en HTML, podemos observar que hay Metadescripciones duplicadas en bastantes páginas. Para intentar evitar esto, implementaremos el siguiente código condicional en el HEAD de nuestra plantilla, después del TITLE (debajo del código resaltado en rojo):
 <head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> : Silverolusplater</title>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta content='AQUÍ la DESCRIPCIÓN del BLOG.' name='description'/>
  <meta content='AQUÍ PALABRA clave1, PALABRA clave2, PALABRA clave3, PALABRA clave4' name='keywords'/>
</b:if>

lunes, 29 de marzo de 2010

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

sábado, 27 de marzo de 2010

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>


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

jueves, 25 de marzo de 2010

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

Optimizar los títulos de los posts en Blogger

 La forma, o mejor dicho, el orden en el que se presentan los títulos en los buscadores es importante en términos de mejora de posicionamiento. En los buscadores, los títulos de un blog de Blogger aparecen por defecto bajo la forma de "Título del blog: Título del post". Para atraer más visitas al blog, es preferible que los títulos adopten la forma "Título del post: Título del blog".

 Para conseguir esto, lo primero que hay que hacer es localizar en el head de la plantilla la siguiente línea de código:
<title><data:blog.pageTitle/></title>
 ... y sustituirla por el siguiente código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> : AQUÍ TÍTULO DEL BLOG</title>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>

domingo, 21 de marzo de 2010

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

sábado, 20 de marzo de 2010

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

viernes, 19 de marzo de 2010

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

domingo, 14 de marzo de 2010

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

jueves, 11 de marzo de 2010

Casa rural La Escrita, en Arlanza (Bembibre, León)

 Arlanza es una pedanía de la localidad leonesa de Bembibre, perteneciente a la comarca tradicional de Bierzo Alto (comarca castellano-leonesa de El Bierzo). Esta aldea leonesa dista 5 kilómetros de Bembibre y 15 de Ponferrada, la capital de la comarca berciana, que cuenta con un magnífico castillo. En sus alrededores se conservan vestigios de antiguos asentamientos, como La Escrita, El Cocotín o el castro de Tedejo. También hay que destacar la cercanía de la aldea de Labaniego --situada en el monte del Sardonal--, donde se pueden contemplar los restos del antiguo convento de San Fructuoso de Labaniego.

 En Arlanza está situada la casa rural La Escrita, concretamente en la Calle El Potro s/n, 24319 Arlanza (Bembibre [León]). La casa tiene capacidad para dos o tres personas y se alquila de forma completa; está en funcionamiento durante todo el año.

La EscritaCasa rural La Escrita, en Arlanza (Bembibre [León]).
 La Escrita es una casa tradicional que ha sido rehabilitada recientemente, conjugando el respeto a las formas arquitectónicas tradicionales con un toque más moderno y funcional en los interiores. Los materiales básicos empleados en su construcción son la piedra, la madera y la pizarra para el tejado.

 En la planta baja, la casa dispone de una cocina y zona de estar, con vitrocerámica, campana estractora y microondas; tiene televisor, reproductor DVD, equipo de sonido, una pequeña biblioteca con libros e información de la comarca y una estufa calefactora ecológica que utiliza combustible tipo biomasa ("pellets"). La primera planta cuenta con una habitación con cama de 1,40 metros y un baño con bañera de 1,70 metros. Hay ropa de cama y toallas en la casa. Tiene emisores térmicos de calefacción. No se admiten animales dentro de la casa.

La EscritaZona de estar de la casa rural La Escrita, en Arlanza (Bembibre [León]).
 El propietario de la casa es Jesús Javier Ortiz Trapote, una de las personas más inquietas e imaginativas que conozco y todo un ejemplo de cómo se puede ser emprendedor y empresario sin perder por ello la calidad humana. Para los que quieran alquilar La Escrita, aquí les dejo más información:

■ Dirección: C/ El Potro s/n, 24319 Arlanza (Bembibre [León]).
■ Teléfono: 619 64 46 32
■ E-mail: ortiztra@hotmail.com
■ Web: http://www.labaniego.es/
■ Precios:
  • Fin de semana: 122 euros.
  • Semana: 250 euros.
  • Quincena: 480 euros.
  • Noche extra: 40 euros.
 Para estancias más largas es preciso consultar el precio con el propietario. Se requiere un pago previo del 25% del precio total para formalizar la reserva (mediante transferencia bancaria).

domingo, 7 de marzo de 2010

Casa rural La Nogala, en Labaniego (Bembibre, León)

 Labaniego es una pedanía de la localidad leonesa de Bembibre, perteneciente a la comarca tradicional de Bierzo Alto (comarca castellano-leonesa de El Bierzo). Esta aldea leonesa dista unos 6 kilómetros de Bembibre y 16 de Ponferrada, la capital de la comarca berciana. En sus alrededores se conservan vestigios de antiguos asentamientos, como La Escrita, El Cocotín o el castro de Tedejo. También hay que destacar la presencia de los restos del antiguo convento de San Fructuoso de Labaniego.

 En Labaniego está situada la casa rural La Nogala, concretamente en la Calle El Cristo s/n, 24319 Labaniego (Bembibre [León]). La casa tiene capacidad para cuatro personas y se alquila de forma completa; está en funcionamiento durante todo el año.

La NogalaCasa rural La Nogala, en Labaniego (Bembibre [León]).
 La Nogala es una casa tradicional decorada con esmero. Sus interiores rústicos --con mobiliario de estilo tradicional berciano-- hacen de la casa un lugar ideal para descansar y disfrutar de la naturaleza. Los materiales básicos empleados en su construcción son la piedra, la madera y la pizarra para el tejado. Dispone de dos habitaciones dobles: la situada en la primera planta cuenta con una cama de 1,35 metros y la situada en la zona abuhardillada cuenta con dos camas individuales. Hay ropa de cama y toallas en la casa. Tiene calefacción eléctrica, cocina equipada, microondas, televisor, equipo de sonido, lavadora, estufa de leña y una pequeña biblioteca con libros e información de la comarca. Hay también un jardín exterior y una parrilla a disposición de los huéspedes. No se admiten animales dentro de la casa (consultar con el propietario condiciones particulares al respecto).

La NogalaSalón comedor de La Nogala, en Labaniego (Bembibre [León]).
 El propietario de la casa es Jesús Javier Ortiz Trapote, una de las personas más inquietas e imaginativas que conozco. Para los que quieran alquilar La Nogala, aquí les dejo más información:

■ Dirección: C/ El Cristo s/n, 24319 Labaniego (Bembibre [León]).
■ Teléfono: 619 64 46 32
■ E-mail: ortiztra@hotmail.com
■ Web: http://www.labaniego.es/
■ Precios:
  • Fin de semana: 125 euros.
  • Semana: 270 euros.
  • Quincena: 500 euros.
  • Noche extra: 42 euros.
 Para estancias más largas es preciso consultar el precio con el propietario. Se requiere un pago previo del 25% del precio total para formalizar la reserva (mediante transferencia bancaria).

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


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

sábado, 6 de marzo de 2010

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

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

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