Arreglar Problemas en la Plantilla, Restableciendo Plantillas de Artilugios a los Valores Predeterminados

¿Tienes problemas para que se muestren los comentarios anidados de tu blog, o para que funcione el sistema de comentarios de Google? ¿Has cometido un error al editar el código de tu plantilla y quieres que todo vuelva a estar como antes?

Estas son algunas situaciones que muchas veces he visto que causan preocupación o molestias. Es por eso que hoy quiero hablar contigo sobre una función que existe en el editor de Blogger  llamada: "Restablecer plantillas de artilugios a los valores predeterminados", porque hoy más que nunca, vale la pena hablar de ésto por los cambios y actualizaciones que ha habido en los últimos tiempos en el código de la plantilla. 

En la interfaz anterior también teníamos esta opción, solo que ahora es más visible ya que está colocada en la parte superior del código de tu plantilla, una vez que has ingresado al editor y que identificas, porque aparece como un botón hasta ahora, color gricesito:

Esta función que tiene el editor puede resultar muy útil, ya que nos ayuda a actualizar segmentos del código de Blogger necesarios para un buen funcionamiento de los widgets, cuando éstos no están funcionando.

Si empiezas a usar Blogger o no sabes qué es un widget , éste es un  elemento que muestra contenido en tu blog, por ejemplo una lista de páginas o una lista de entradas populares, en resumen todos aquellos elementos que puedes agregar a tu blog desde la sección de "Diseño" del panel de Blogger.
Para el caso del widget de las entradas del blog, no lo puedes quitar desde la sección de "Diseño", ya que el código está configurado para que no se pueda eliminar tal y como ocurre con el resto de widgets, si no ¿te imaginas el desastre que eso provocaría?

Al usar la función de "Restablecer plantillas de Artilugios a los valores predeterminados" se restaurará el código de un widget volviéndolo a poner en la plantilla con la estructura, y los datos que vienen por defecto. Esto implica que si Blogger ha hecho una actualización o un cambio en el código, y no se agregó a nuestra plantilla, generalmente porque hemos editado el código, dichos cambios aparecerán una vez que utilicemos esta función, en el widget que especifiquemos.

Actualmente, tenemos la opción de elegir a cuál widget queremos usar dicha función solo eligiéndolo, una vez que se presenta la lista de widgets que tenemos agregados en la plantilla, lo cual, es una ventaja importante, ya que si queremos usar esa opción en un solo widgtet lo podemos hacer sin alterar la estructura del resto de los widgets:

En los últimos meses y tal y como te comentaba, hemos tenido muchas actualizaciones en el Widget llamado por Blogger "Blog1". Este widget, es el responsable de que aparezcan tus entradas en el blog y todos los elementos involucrados como la fecha, el número de comentarios, el nombre del autor de la publicación y el sistema de comentarios ya sean anidados o de Google+.

Si algo no está funcionando bien en tu plantilla, por ejemplo, si no funcionan los comentarios anidados, seguramente es porque no tienes actualizadas ciertos segmentos de código, o bien, no tienes algunos segmentos porque los quitaste o no los agregó el creador/editor de una plantilla personalizada, si por ejemplo usaras una.

Qué cambios habrá en la plantilla al restablecer plantillas de artilugios a los valores predeterminados

Dependiendo del widget donde hagas ésto, y como y lo mencionaba,  recuperaras la estructura del código del widget que por defecto agrega Blogger, y se "actualizará" si es que ha habido una actualización. Si has hechos cambios importantes en su estructura, como agregado código HTML, éste será eliminado.

Si hablamos del widget de las entradas, y que es uno de los widgets que más modificamos, por ejemplo para crear resúmenes automáticos usando JavaScript, o los propios códigos de Blogger, entre los cambios más importantes, podemos mencionar los siguientes:

Lo bueno:

• Se habilitan los comentarios anidados de Blogger. Este es uno de los beneficios más importantes,  si es que no funcionan en tu blog, ya que podrás empezar a usarlos.
• Se agregar los microtadatos de shema.org. Esto ayudará a los motores de búsqueda como Google a entender la información de tu blog y mostrar mejores resultados (fragmentos enriquecidos).
• Funcionará el sistema de comentarios de Google+. Si tienes problemas para que funcione este sistema de comentarios, y al activarlo en tu blog no se muestran los comentarios, ésto será resuelto sin lugar a dudas.
• Se restaurarán los elementos de las entradas como: fecha y el número de comentarios sincronizados con Google+, me refiero cuando el número de comentarios no corresponde al número total de comentarios del blog sumados a los de Google+, al utilizar el sistema de comentarios de Google+.
• Aparecerá de nuevo cualquier otro segmento de código que haya sido eliminado ya sea de forma accidental, o intencionalmente y que tenga una función específica como la de mostrar las "reacciones" en las entradas, la ubicación, etc. 

Las limitaciones:

• Visualmente, cambiará el orden de los elementos de la plantilla (fecha, número de comentarios, etc), si por ejemplo habían sido modificados y aparecerán en el orden que por defecto pone Blogger en las plantillas. Aunque los podrás organizar nuevamente yendo a Diseño, en la sección que corresponde a las entradas del blog, en la parte que dice "Ordenar elementos".  
• Si tenías resúmenes automáticos en las entradas (que las entradas no se ven completas y tienes que acceder a ellas con el enlace que dice "leer mas" por ejemplo) ya sea usando JavaScript, u otro sistema, perderás estos cambios, así que tendrás que hacerlo de nuevo. También cualquier otro "cambio" que hayas en cualquiera de los elementos que están en las entradas, como el título, la fecha, etc., se perderá.

Cómo restablecer plantillas de Artilugios a los valores predeterminados.

1. Primero, "Descarga una copia de seguridad de tu plantilla, y esto lo haces yendo a Plantilla > Crear Restablecer copia de seguridad", en la opción que dice descargar plantilla completa.
2. Selecciona la pestaña "Plantilla".
3. Selecciona la opción "Editar HTML" (botón que hasta ahora aparece enseguida de "Personalizar").
4. Haz click en el botón que dice: "Restablecer plantillas de artilugios a los valores predeterminados".
5. Selecciona el widget (marcando la casilla), en el que desees recuperar los valores predeterminados. Refiriéndonos al de las entradas es: Blog1.
6. Haz click en el botón que dice "Recuperar valores predeterminados de los widgets seleccionados".

Cuando debería usar esta función

Restablecer plantillas de artilugios a los valores predeterminados puede ayudarte a arreglar algunos problemas en tu plantilla, ya sea porque la editaste de forma equivocada, o problemas en plantillas que han estado almacenadas por mucho tiempo sin ser actualizadas. Por ejemplo, cuando no funciona el sistema de comentarios anidados de Blogger, o el propio sistema de comentarios de Google+, por ejemplo, no se están mostrando correctamente el número de comentarios (no coinciden con lo que dice el sistema de comentarios de G+) y no has hecho cambios importantes en el widget de las entradas, por ejemplo, configurándolo para que muestre resúmenes automáticos, definitivamente es una buena opción para ti.


Hay que tener en cuenta que al usar ésta función se eliminarán los cambios que hayas hecho en los widgets seleccionados, por lo tanto, es importante guardar una copia de seguridad de tu plantilla, antes de proceder con el cambio. De hecho, una nueva actualización del Editor del código de Blogger, incluye una advertencia que recomienda descargar la plantilla antes de hacer el cambio.

Si tu plantilla tiene implementado el sistema de resúmenes automáticos, y no funcionan los comentarios anidados, pero puedes seguir un buen tutorial para volverlo a poner, entonces creo que vale la pena restablecer plantillas de artilugios para el widget de las entradas (Blog1). Ya que de otro modo, tendrás que actualizar todas y cada una de las partes del código que se necesitan para que se corrijan los problemas que menciono.

También es buena idea hacerlo cuando utilizas una plantilla de terceros que ha estado almacenada por mucho tiempo sin ser actualizada. Y en tal caso, restaurar los valores por defecto solo para el widget "Blog1" que es el de las entradas tu blog (como lo he comentado antes), y donde no haya cambios importantes en cómo se muestran las entradas, porque recuerda que perderás esos cambios.

Si tienes dudas sobre si deberías o no restablecer plantillas de artilugios a los valores predeterminados, considera los cambios importantes que habrá al hacerlo y que mencionaba arriba (lo bueno y las limitaciones) y evalúa sus ventajas en contraposición a tener que agregar un resumen automático si por ejemplo lo tuvieses en tu plantilla o volver a implementar los cambios que hayas hecho. Solo recuerda descargar una copia de seguridad antes de proceder con el cambio y comprobar también por ti mismo los cambios visuales ;)

Para finalizar, te dejo un video que hice hace tiempo, en donde habilitamos los comentarios anidados recuperando los valores predeterminados del widget de las entradas. Pero igualmente sirve para habilitar comentarios de Google+, y todo lo que ya te comenté.

Espero sea útil ;)

Personalizar el Enlace de "Más información" fácilmente usando el código de Blogger

Si utilizas el salto de linea de Blogger para resumir tus entradas, sabrás que por defecto se agrega un enlace a la entrada que dice: "Mas información" y te envía al post completo. Por defecto, dicho enlace no tiene ningún estilo y no resalta del resto del contenido o solo muy poco, lo cual puede hacer que pase desapercibido a simple vista.

Pues bien, este enlace, como otros enlaces que haya en tu plantilla los podemos personalizar fácilmente, dándoles la apariencia del botón del formulario de contacto de Blogger, con una variante que más adelante te explicaré.

Esto lo podemos conseguir, ya que Blogger nos envía cierto código CSS, para manipular la apariencia del botón del formulario de contacto y se vea así de mono como puedes ver.

Lo interesante aquí, es que no es necesario agregar mas código a tu blog, o solo unas cuantas lineas. El CSS que te menciono, no incluye ninguna imagen, así que los botones se crean solo con código CSS.

Bueno, para no confundirte o liarte mucho con tanto rollo, mejor veamos un ejemplo, y en este caso, veremos cómo crear dos estilos diferentes para el enlace de "Mas información" ;)

Opción 1. Personalizar el enlace que dice "Más información" (botones grises)

Si  sigues los siguientes pasos, el enlace de leer más tendrá la apariencia que puedes ver en la imagen de abajo:

En este caso no agregaremos ni una sola linea de CSS, aunque al final de los pasos, he agregado una nota para que puedas cambiar el color del texto y eliminar el subrayado si así lo quieres, usando solo unas cuantas lineas de CSS. Dicho lo anterior vemos cómo lograrlo:

Pasos

1. Desde el panel de Blogger, selecciona Plantilla  luego Editar HTML.
2. Una vez que hayas accedido al editor, haz click en el botón que dice: Plantilla de formato, y luego, pulsa las teclas Ctrl + F simultáneamente.
3. Hecho lo anterior, habrás activado el cuadro de búsqueda del editor. Ahora pega el siguiente texto en el campo: jump-link y pulsa la tecla Enter.
   
4. Una vez que te encuentres en el código en cuestión, ubícate en la linea que está debajo, me refiero a la que empieza así: <a href='data:post.url + ..., y agrega esto, que he coloreado de azul: 
   
   class='contact-form-button'
   
   La linea que te menciono deberá quedar así:
   
   <div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title' class='contact-form-button'> <data:post.jumpText/>
</a>
</div>
...

   
5. Verifica en vista previa y si todo luce bien, guarda los cambios.

¡Y listo!, habrás personalizado el enlace de leer más sin agregar una sola linea adicional de CSS en tu plantilla.

Nota: El color de texto que tenga el enlace (por defecto, el poner el puntero del ratón encima y el enlace visitado), dependerá de cómo esté declarado en la plantilla el color de los enlaces. Todo eso tú lo defines desde el diseñador de plantillas. Por otro lado, el subrayado aparecerá si así está definido que suceda, al poner el puntero del ratón sobre éste.

Si quieres personalizar el color del texto del enlace, por ejemplo ponerlo de otro color y desaparecer el subrayado del texto  puedes usar algo como esto:

.jump-link a{
color: #0c0c0c; /*color de texto*/
text-decoration: none;
}


Y que puedes agregar desde el diseñador de plantillas, usando la opción de Añadir CSS, que encuentras al final, cuando seleccionas Avanzado.

Opción 2. Personalizar el enlace de Más información con botones azules (estilo característico de Google)

Por otro lado, si te gusta el botón azul del formulario de contacto, ésto es para ti ;)

Podemos usar este estilo una y otra vez en los enlaces del blog fácilmente y agregando unas cuantas lineas de CSS. 

Siguiendo con nuestro ejemplo, agregaremos ese estilo al enlace de "Mas información". Dicho enlace tendrá esta apariencia una vez que hayas hecho lo que mas a adelante te diré.

¿Te gusta la idea? Entonces, echa un vistazo a los siguiente pasos para ver cómo lograrlo ;)

Pasos

1. Estando en el panel de Blogger, selecciona Plantilla,  luego haz click Editar HTML para acceder al Editor.
2. Una vez que hayas accedido al editor, haz click en el botón que dice: Plantilla de formato, y luego, pulsa las teclas Ctrl + F simultáneamente.
3. Hecho lo anterior, habrás activado el cuadro de búsqueda del editor. Ahora pega el siguiente texto en el campo: jump-link y pulsa la tecla Enter. 
4. Una vez que te encuentres en el código en cuestión, ubícate en la linea que está debajo, me refiero a la que empieza así: <a href='data:post.url + ..., y agrega esto: 
   
   class='contact-form-button contact-form-button-submit'
   
   La linea que te menciono deberá quedar así:
   
   <div class='jump-link'> 
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title' class='contact-form-button contact-form-button-submit'> <data:post.jumpText/>
</a>
</div>
...
5. Verifica en vista previa y si todo luce bien, guarda los cambios.
6. Finalmente tendrás que usar un poco de CSS para poner el texto de color blanco y evitar que se subraye el texto, para ello, seleccionas la pestaña Plantilla, luego vas a Personalizar> Avanzado> Añadir CSS y en el cuadro pegas el siguiente CSS.
   
   .jump-link a{
color: #fff;
text-decoration: none;
}

   
   
7. Desde ahí podrás ver aplicado lo anterior, luego, guarda el cambio haciendo click en el botón "Aplicar al blog".

¡Y listo!, habrás personalizado el enlace de leer más agregando solo una regla de CSS en tu plantilla.

Notas Finales

• Los botones se crean sin usar ninguna imagen, solo usando algunas propiedades de CSS3, que solo son soportadas por navegadores modernos, incluyendo Internet Explorer 10. En en versiones anteriores de Internet Explorer, no se verán algunos efectos, como las sombras al poner el puntero del ratón encima, y al hacer click sobre éste, en el caso de la segunda opción. 
• Este tutorial ha sido creado para todos aquellos que usan las nueva (aunque ya no tanto) plantillas de Blogger, me refiero a las del diseñador de plantillas.

Espero sea útil, y que el tutorial sea de tu agrado. No dudes en comentarme cualquier cosa y si te gusta y crees que puede serle útil a alguien, ¡compártelo! ;)

Widget de Opciones Visible solo para el Administrador del Blog

Algo que echamos de menos muchos de los que ocultamos la barra de navegación de Blogger, es la posibilidad de ingresar al editor de entradas para empezar a escribir una nueva entrada cuando estamos en nuestro blog.

Si utilizas las vistas dinámicas, sabrás que Blogger ha integrado dos enlaces que aparecen como iconos, con los cuales es posible acceder con uno al editor de entradas, y con el otro al escritorio.

Pues vamos a hacer algo similar, para que como administrador del blog puedas ingresar tanto al editor de Blogger como al escritorio. No usaremos ninguna imagen, ya que estamos agregando los datos de éstas, usando este herramienta para convertir imágenes en base64, de ese modo no habrá que alojar ninguna imagen, ni afectar la carga del blog. El widget tendrá la apariencia que puedes ver a continuación:

¿Te gusta la idea?, entonces échale un vistazo a los pasos para saber cómo hacerlo ;)

Pasos

1. Copia el siguiente código, y págalo en una nota de tu computadora.
   
   <span class='item-control blog-admin'> <span class="panel_adm"> <strong>Opciones del administrador</strong> <a class="escritorio" href="http://www.blogger.com/home" target="_self" title="Escritorio">Escritorio</a> <a class="post-nuevo" href="//www.blogger.com/post-edit.g?blogID=123456789&from=pencil" target="_self" title="Post Nuevo">Nuevo post</a> </span> </span>
   
   
2. Selecciona la pestaña Diseño, y toma nota del id de tu blog, que aparece en la barra de direcciones del navegador, y que puedes identificar porque aparece después de blogID=  como puedes apreciar en la siguiente imagen:
   
   
   
   
   
   
3. Una vez que tengas el Id de tu blog, ponlo en lugar del número que aparece resaltado de rojo (123456789) en el código del paso 1.
4. Luego, agrega el código del paso 1 ya editado a un gadget con la opción HTML/Javascript, en la ubicación que quieras que aparezca, por ejemplo, como primer elemento en la columna lateral y guarda los cambios en Guardar disposición.
5. Finalmente, agrega el CSS, en la opción de Añadir CSS que se encuentra en el diseñador de plantillas (Plantilla > Personalizar > Avanzado > Añadir CSS) y guarda el cambio en "Aplicar al blog".
   span.panel_adm{display:block;background:#f4f4f4;width:220px;height:75px;border:1px solid #e8e8e8}
.panel_adm strong{font-size:15px;display:block;width:100%;border-bottom:1px solid #e8e8e8;text-indent:6px;padding:4px 0;margin-bottom:10px}a.escritorio{background-image: url(data:image/gif;base64,R0lGODlhEgARALMAALu7u6WlpcfHx46OjoODg2FhYZmZmenp6WxsbHd3d93d3VVVVdLS0rCwsPT09EpKSiH5BAAAAAAALAAAAAASABEAAARW0MkpAaA4t/da/hvXfVQojqR5opi6spI6HEdwevGJUMntACsDxXYC2BCiAqUgQgodKoJAQDgFDhPB6yWgKF6LFQOzAnxPGaZoYDgtMr0tJ5EZyDmESQQAOw==);background-repeat:no-repeat;background-position:10% 10%}
a.post-nuevo{background-image:url(data:image/gif;base64,R0lGODlhEgAQALMAAHd3d93d3cfHx2FhYWxsbIODg46OjrCwsFVVVdLS0kpKSvT09AAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAASABAAAARCcMlJZULq1D2P+gFHJUPiIaG4XApiJuqKfUMsfy2ssp8b87nfLBgD4HyxgoBA3LUEAF3M8CHYJAEFQHNdHATd8CYCADs=);background-repeat:no-repeat;background-position:10% 12%}
a.escritorio, a.post-nuevo {display:inline-block;height:22px;padding:4px 0 0 28px;color:#3399cc;font-size:12px}
a.escritorio{margin-right:24px}
a.post-nuevo:hover,a.escritorio:hover{text-decoration:underline !important;}

   

¡Y listo!, ya tendrás un widget que solo podrás ver tú como administrador del blog, y con el que podrás acceder al editor de entradas como al escritorio ;)

Notas finales:

• Puedes cambiar el texto que dice: "Opciones del administrador" por "Mis opciones" o cualquier otro texto.

Espero sea útil ;)

Formulario de Contacto de Blogger en una Página Estática del Blog

Pues ya tenemos juguetito nuevo, me refiero al formulario de contacto que tantos usuarios echaban de menos en Blogger, y ahora, las dudas e inquietudes surgen, pues al ser un widget, el código que viene en la plantilla no se puede incrustar en una página estática tal y como aparece.

La buena noticia es que, con algunos trucos o chapuzas,  podemos hacer que el formulario de contacto aparezca en una página estática.

Básicamente, este truco que te mostraré, consiste en condicionar el formulario de contacto para que se muestre en una página estática que crearemos para este propósito. De ese modo, el formulario se cargará y aparecerá en dicha página. Veamos entonces cómo hacerlo.

Antes de comenzar con ésto, te recomiendo guardar una copia de respaldo de tu plantilla,  y para ello, vas a la pestaña Plantilla, y haces click en el botón que dice: "Crear/Restablecer copia de seguridad" y descargas la plantilla completa.

Cómo lograrlo paso a paso

1. Crea una página, yendo a la pestaña Páginas, luego, en la lista desplegable que dice Página nueva, seleccionas Página en blanco, y ahí agregas el texto que desees que aparezca arriba del formulario.
2. Una vez que hayas creado la página, haz click en la opción "Ver" que aparece debajo del titulo de la página que creaste (al estar en "Páginas"), para que accedas a la página, y copia la URL de ésta, que aparece en la barra de direcciones del navegador.
   
   
3. Copia el siguiente código, y edita lo que resalté de rojo. Donde dice: URL_de_la_página_estática, pones la dirección web (URL) de la página estática que creaste. Donde dice 350px, puedes editar el ancho máximo que tendrá el formulario. Edítalo poniendo el mismo valor, en las dos veces que aparece, tomando en cuenta el ancho máximo que quieres que tenga en pixeles. En font-size:110%, puedes cambiar el tamaño del texto. Al aumentar ese valor: "110%", aumentas el tamaño del texto.
   
   <b:widget id='ContactForm1' locked='false' title='' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;URL_de_la_página_estática&quot;'>
<style type="text/css">
.contact-form-widget {max-width:350px; font-size:110%;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:350px;}.post-footer,.home-link,.feed-liks{position:absolute;top:-9999px;left:-9999px;}
</style>
<!-- b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<data:title/>
</h2>
</b:if -->
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/>
<span style='font-weight: bolder;'>
*
</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/>
<span style='font-weight: bolder;'>
*
</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

   
4. Luego, vas a la pestaña Plantilla, después a Editar HTML y en la lista desplegable "Ir al widget", selecciona "Blog1", para que te lleve al código del widget de las entradas. Ahí ubícate antes de </b:section> tal y como puedes ver en la imagen.
   
   
   
   Haz clic sobre la imagen para verla en su tamaño original
   
   
5. Ya que estés ubicada (o) exactamente "antes" de dicha linea, pega el código del paso 3, mismo que ya editaste.
6. Verifica en vista previa y si todo luce bien, guarda los cambios.

¡Y listo!, ahora el widget con el formulario de contacto aparecerá en una página estática de tu blog ;)

Puedes ver la demostración en esta página estática.


Notas finales

• El código que resalté de azul en el paso 3 es el que hace que aparezca el título del formulario. Puedes eliminarlo, si es que no tienes ninguna intención de que aparezca, ya que, la página estática mostrará el título. Ahora está comentado, (eso quiere decir que agregue: "!--" al principio y "--" al final)  por eso no se interpreta por el navegador.

Otro truco para lograr ésto, ya se ha publicado en Oloblogger.

Última actualización:

04/08/2015. He cambiado la unidad de pixeles en la fuente por una unidad relativa "%".

Truco rápido y sencillo para que el ancho de un elemento en un diseño fijo, se vea completo en la ventana del navegador

Una página con un diseño fijo, es aquel que utiliza un ancho comúnmente definido en pixeles (px). En este tipo de diseños, no cambia el ancho de la página si es visto en distintas resoluciones de pantalla, siempre se mantiene igual, por lo que, si el blog o página es visto en una resolución de pantalla "menor" al ancho que se tiene definido en dicha página, se formará una barra de desplazamiento horizontal para permitir desplazar la página horizontalmente y verla completa.

Si en dicho diseño, se tienen ciertas secciones como la cabecera, con un ancho definido de 100% para que éste ocupe el 100% de la ventana del navegador, al ser vista la página en resoluciones menores que el ancho definido de la página o blog, el fondo de dicha sección no se verá completa, ya que el navegador la cortará, por decirlo así, pues tomará en cuenta la resolución de pantalla en que sea visto.

Nota: Esto no ocurrirá si la cabecera o la sección además de tener definido un ancho en 100% tiene también definida una posición "fixed", es decir, que siempre se mantiene visible al desplazar la página hacia abajo. A ésto se le conoce comúnmente como: "que flota".

Para ilustrar lo que estoy diciendo, en la siguiente imagen se muestra el diseño de una página con diseño fijo. Tiene 960px (pixeles) de ancho, y tiene una cabecera o header (en inglés) con un ancho de 100% lo que hace que éste ocupe el total del ancho de la ventana del navegador.

A continuación  puedes ver una simulación de cómo se vería el mismo diseño, pero visto en una resolución de pantalla de 800 pixeles.

Como puede apreciarse en la simulación, el fondo de la cabecera (header) no se verá completo a la derecha, puesto que la resolución de pantalla es menor que el ancho de la página.

También, la barra de desplazamiento horizontal aparecerá por la misma causa, aunque ésto último sólo se soluciona si todo el blog es fluido (usa porcentajes) o es un diseño de respuesta (responsive en inglés) que es aquel que cambia según la resolución de pantalla del usuario y por supuesto, esté bien diseñado, ya que, puede ser que en un diseño de respuesta se forme una barra de desplazamiento horizontal si algún elemento se está desbordando, es decir si está desplazado a la derecha y rebasa el ancho de la ventana del navegador.

Si el ancho de la página es todavía más grande, por ejemplo de 1200 pixeles, la barra de desplazamiento horizontal se activará desde una resolución menor a dicha medida.

La solución.
Lograr que el fondo del elemento definido con 100% de ancho se vea completo, es más fácil de lo que imaginas, y funcionará incluso en Internet Explorer 7. Sólo necesitas definir un ancho mínimo en el cuerpo de la página o documento, y lo harías así

body {
min-width:980px;
}

El valor del ancho mínimo, que en el código anterior se muestra como 980 pixeles, deberá ser igual al ancho del blog o página.

Pero, ¿a quién le interesa si se ve o no completo el fondo de ciertos elementos en una resolución menor de 800 pixeles? suponiendo que el ancho de la página mide 960 pixeles...

No es para preocuparse tanto, puesto que la mayoría de tabletas o tienen una resolución superior de 1024 pixeles de ancho, aunque si las hay de menor resolución, y siendo ésta una solución tan simple, creo que vale la pena implementarla.

Luego veremos cómo crear un diseño que pueda adaptarse a las distintas resoluciones de pantalla de los internautas, así que tienes que estar atento (a) ;)


Referencias:
Ver más información sobre la propiedad min-width.

Cómo lograr que la imagen de la cabecera cubra el ancho del blog completo

¿Tienes pensando usar una imagen en la cabecera que cubra el ancho del blog completo? Ésto es algo que me han comentado desde Twitter y en el blog, así que hoy he preparado un tutorial que te ayudará a conseguirlo.

El cómo luce la imagen de la cabecera después de los cambios, lo puedes ver en la siguiente imagen, considerando que la imagen de la cabecera se agregó desde la sección de "Diseño".

Si observas el ejemplo, verás que la imagen de la cabecera abarca el ancho del blog por completo, sin que haya una separación o margen a los lados o arriba.

Ésto lo podemos conseguir sin tener que ingresar a la edición  HTML de la plantilla, y funcionará en todos los navegadores incluyendo Internet Explorer 7.

No sé si estarás de acuerdo conmigo pero pienso que ésto le da un look más moderno al blog.

Para la demostración, voy a usar la plantilla "Simple de Blogger", ya que por el tipo de diseño, ésto será notorio y además se verá más estético.

¿Es eso lo que siempre has querido hacer, o quieres hacerlo en tu blog? Entonces, veamos cómo lograrlo...

¡Ahh!, pero ¿quieres ver el resultado en un blog? No hay problema, lo puedes ver en este blog.

Cómo lograrlo paso a paso

1. Primero, tienes que tener lista la imagen que vas a colocar en la cabecera, y ésta debe tener el mismo ancho que tiene el blog completo.
   
   Para saber el ancho del blog completo y poder crear tu imagen, solo tienes que ir a: Plantilla > Personalizar  > Ajustar ancho, y tomar nota del ancho en pixeles donde dice "Blog completo".
   
   Como puedes apreciar en la siguiente imagen, éste tiene un ancho de 900 pixeles.
   
   
   
2. Teniendo lista la imagen, vas a Diseño, y desde la sección de la cabecera, subes la imagen. Para ello solo abre las opciones de configuración, haciendo click en "Editar" de dicha sección.
   
   No Marques la opción de "Reducir hasta ajustar", y selecciona la ubicación que quieras.
   
   
   
3. Luego vas a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el recuadro para añadir CSS, agregas esto:
   #header-inner{
margin:-10px 0 0 -10px;
}
   El valor del margen (margin) se lee así de izquierda a derecha: -10px margen arriba, 0px a la derecha, 0px abajo, -10px a la izquierda.
   
4. Ahí mismo verás los resultados; ¡ahora la imagen de la cabecera ocupa el ancho del blog! Solo falta que guardes los cambios en "Aplicar al blog".
   

 ¡Listo!, con unos simples pasos, la imagen de la cabecera ocupa el ancho del contenido de tu blog ;)


NOTA IMPORTANTE

Gracias al comentario de +Iliana Uriostegui, he comprobado que Blogger ha agregado una nueva regla de CSS que afecta el resultado en algunas plantillas, y no es posible que la imagen cubra todo el ancho.

Si a pesar de seguir todos los pasos, no logras el resultado, vas a necesitar usar esta regla:

.header-inner .Header #header-inner {
overflow:visible;
}


La regla anterior hace que la imagen se muestre completa y con las instrucciones descritas en los pasos, consigamos el resultado que buscamos.

Ésto lo agregas yendo a Plantilla > Personalizar > Avanzado > Añadir CSS. Y guardas los cambios en "Aplicar al blog".


¿Buscas inspiración para crear tu cabecera?
Si es así, entonces échale un vistazo a esta entrada:
Empezar a crear tu propia cabecera + 10 Ejemplos de Cabeceras Ilustradas

3 Estilos diferentes para el widget de últimos comentarios con avatar + cómo crear bordes hundidos y con relieve con CSS

Seguramente recordarás y posiblemente tengas el widget de últimos comentarios con avatar del comentarista en tu blog. Es ampliamente personalizable, como ya lo había mencionado, por la estructura que tiene (como fué creado) y porque el código CSS viene de forma separada.

Pues me di un tiempo para crear algunos estilos diferentes para que puedas usar. Además ya antes me habían comentado que querían crear bordes que simulen estar hundidos y otros con relieve usando CSS, así que voy a aprovechar para tratar de explicar esto.

Usando algunas propiedades como bordes, outline, margen, padding, y una buena combinación de colores, podemos crear efectos interesantes sin usar imágenes, creando un look moderno y/o elegante. Con algunas limitaciones en versiones viejas de Internet explorer en algunos casos, pero, sin que se estropee tanto el resultado.

Cómo aplicar el estilo.
Bueno, echa un vistazo a los tres estilo, y lo único que tendrás que hacer es sustituir el CSS (que está dentro de la etiqueta <style>), en el código de este widget. La resaltaré de azul (principio y final),  para que puedas identificarla fácilmente. Claro que si quieres cambiar los colores deberás entender cómo crear los efectos, pero, eso yo te lo voy a decir ;)

Veamos de qué se trata...

1. Estilo "Elegante". Un estilo elegante, que simula bordes hundidos debajo de cada comentario.

CSS

<style type="text/css">
ul.w2b_recent_comments{width:100%;margin:2px 0 15px 0;padding:0; background:#f2f2f2;border:5px solid #fefefe; outline:thin solid #efefef}.w2b_recent_comments li{background:none !important;padding: 0 !important;margin: 4px 4px 4px; display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #fff}.w2b_recent_comments li:last-child{border-bottom:none}.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 7px 0;position:relative;overflow:hidden} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block}.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 4px 6px 4px;line-height: 1.2;border-bottom:1px solid #dfdddd}.w2b_recent_comments li:last-child span{border-bottom:none} .w2b_recent_comments li a{color:#676f6f; font-weight:bold;text-shadow:0px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;color:#2e9798}</style>

Nota: para eliminar los bordes al fondo del "último comentario", utilizo un selector llamado :last-child, que no soporta IE8 y versiones anteriores, sólo la versión 9, por lo que ese borde será visible en versiones viejas de IE.

El truco: Para crear este efecto en el borde, usamos un borde de 1px en cada elemento de lista (.w2b_recent_comments li), y otro debajo de cada elemento de lista que contiene la etiqueta span, que es donde está el texto del comentario (.w2b_recent_comments li span) y hacemos los ajustes con el margen y el padding para que se junten y queden uno arriba de otro y además se separe de los extremos derecho e izquierdo. Es muy importante que tomes en cuenta los colores que vas a usar, y el borde que queda arriba, debe de ser más obscuro que el de abajo. El segundo borde que queda debajo, debe de ser más claro que el fondo, para los tonos grises el blanco queda muy bien. Los "tonos" de los tres colores deben de ser, de preferencia del mismo orden de colores monocromáticos. Por ejemplo si usamos grises, usas un gris obscuro, otro más claro y otro más claro, hasta llegar al blanco. Si inviertes el orden de los colores en el borde, entonces obtendrás el efecto contrario, es decir, con relieve o levantado.

Lo que puedes editar lo resalté de rojo, y esta es la explicación:

En: .w2b_recent_comments li, puedes cambiar el color de fondo en: background:#f2f2f2.


El borde claro y grueso alrededor del widget lo cambias en: border:5px solid #fefefe, y el último borde (gris) que lo envuelve en: outline:thin solid #efefef. 


Para cambiar el color de los bordes que están debajo de cada comentario, buscas: .w2b_recent_comments li, ahí, en: border-bottom:1px solid #fff cambias el color del borde de arriba. Ese es el primer borde. El segundo borde y que está debajo del anterior, está en: .w2b_recent_comments li span y lo editas en: border-bottom:1px solid #dfdddd.


2. Estilo "Recto y elegante". Otro estilo elegante, que separa los comentarios en cajitas, con bordes dobles que logramos con la ayuda de las propiedades border y outline, para lograr ese efecto. La propiedad outline, es soportada por IE8 y versiones siguientes, y la propiedad border por todas las versiones de ese navegador; con el resto de navegadores no tenemos problemas, el latoso, generalmente es Internet Explorer.

CSS

<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0 0 15px 0;padding:0;background:#f3f3f3;border:1px solid #fff;outline:thin solid #ececec; width:100%}
    .w2b_recent_comments li{background:#f7f7f7 !important;padding:3px !important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px;border:1px solid #fff; outline:
thin solid #e7e7e7}.w2b_recent_comments li .avatarImage{padding:2px;background:#fff;border:1px solid #e7e7e7;float:left;margin:0 4px 7px 3px;position:relative;overflow:hidden}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block}.w2b_recent_comments li span{text-shadow:1px 1px 1px #fff;margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 0 6px 0;line-height: 1.2} 
.w2b_recent_comments li a{color:#1f9495;text-shadow:1px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;}
</style>

El truco: en este caso, usamos borde alrededor de cada elemento de lista de los comentarios (.w2b_recent_comments li), este debe de ser más claro que los fondos usados, y como usamos tonos grises, el blanco queda perfecto: border:1px solid #fff; también tiene fondo gris: background:#f7f7f7 que es más claro que el del contenedor.

Luego usamos la propiedad outline, que agrega también borde en el exterior del widget, y está declarado así: outline:thin solid #e7e7e7.

Hacemos lo mismo con el contenedor de los elementos de lista de los comentarios (ul.w2b_recent_comments), ponemos un fondo color gris más obscuro que el de cada elemento de lista, (citado anteriormente), background:#f3f3f3 y agregamos borde blanco:border:1px solid #fff y un segundo borde alrededor de éste, usando la propiedad outline: outline:
thin solid #e7e7e7.

Los efectos que se logran en este ejemplo es mixto, es decir, algunos bordes lucen hundidos y otros con relieve, pero siguiendo un patrón, y esto depende de cómo quedó colocado el borde blanco y obscuro respectivamente arriba, a la izquierda, a la derecha y abajo.

A ver, a ver, entonces, ¿cómo se forman los bordes dobles?

Es simple, sólo juntamos dos bordes y dependerá de la estructura del elemento donde queremos aplicarlo, si usamos sólo bordes (la propiedad borde), o también necesitemos usar el borde con la propiedad outline.

Este es una imagen que muestra los dos distintos tipos de borde que podemos formar, cuando están en posición horizontal:

3. Estilo "Corrugado". En este caso usamos borde discontinuo (dashed) para crear esa apariencia como de ondas, o como un ticket recortado.

CSS

<style type="text/css">    ul.w2b_recent_comments{list-style:none;margin:0 0 15px 0;padding:0; background:none;width:100%}    .w2b_recent_comments li{background:#c4dcdc !important;padding:3px 4px 3px 0!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px 0; border:1px dashed #fafafa}     .w2b_recent_comments li .avatarImage{padding:2px;border:1px solid #e7e7e7;background:#fff;float:left;margin:0 4px 7px 3px;position:relative;overflow:hidden}.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}            .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block}    .w2b_recent_comments li span{text-shadow:1px 1px 1px #fff;margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 0 6px 0;line-height: 1.2} .w2b_recent_comments li a{color:#064f4c;text-shadow:1px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;}</style>

El truco. Es muy fácil crear este efecto con el borde, simplemente, usamos un color de borde, en cada elemento de lista (.w2b_recent_comments li) del mismo color que usa el fondo donde está puesto el widget. Si por ejemplo el fondo del blog, "donde lo colocas", es blanco, pues usamos blanco.

Entonces,  para cambiar el fondo de cada comentario, buscas:.w2b_recent_comments li y en background:#c4dcdc editas el valor (#c4ddcd). Recuerda conservar la almohadilla.


En border:1px dashed #fafafa editas el color de borde que deberá ser del mismo color de fondo donde lo pongas.


¿fácil, verdad? Para que puedas ahondar en el uso de algunas propiedades que usé, te dejo algunas referencias para que puedas consultar:

Propiedad outline
Propiedad borde
Selector :last-child

Agregar un enlace que dirija al post en cada elemento de las entradas populares

Cuando elegimos la opción de mostrar las entradas populares con la imagen miniatura y el título, pudiera dar la impresión de que le falta algo, ¿no?,  mmm, tal vez lo veas y pienses -no sé no me convence-, esto puede deberse a que vemos un espacio muy grande vacío debajo del título, esa es la percepción visual, por otro lado, está la facilidad para ir al artículo, aunque de manera intuitiva sabemos que el título o la imagen miniatura nos dirigirá al post, esto no es muy evidente...

Pensando en eso, podemos agregar un enlace para que debajo de cada título aparezca un enlace al artículo o post. En la plantilla Cocinando con Adela, hice esto, de ese modo se puede acceder al artículo si hacemos click sobre dicho enlace, al igual  que con el título del artículo o post.

Pero, ¿cómo hacer eso?, bueno, hoy te diré paso a paso cómo hacerlo ;)

Paso 1. Necesitas configurar las entradas populares para que éstas muestren la imagen miniatura en adición al título que siempre se muestra:

Paso 2. Ve a la edición de HTML de la plantilla, marca la casilla de expandir plantillas de artilugios, y luego, identifica el siguiente código:

 <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>

Luego, sustituyes la parte que resalté de rojo por esto:

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a><a class='verpopu' expr:href='data:post.href'><span><br/>Ver Artículo&#187; </span></a></div>

Si quieres, puedes cambiar el texto del enlace "Ver Artículo" por el que quieras.

Paso 3. Verificas en vista previa y si todo luce bien guarda los cambios.

Paso 4. Ahora lo que falta es darle un poco de estilo al enlace y lo hacemos con CSS, entonces vamos a Plantilla > Personalizar > Avanzado > Añadir CSS y lo agregamos, editando los colores, poniendo otras propiedades, etc...

.item-title a.verpopu span {
color:#d5aa00;/*color del texto*/
}
.item-title a.verpopu span:hover {
color:#738931;/*color del texto hover*/
text-decoration:underline;/*subrayado*/
}

En color ponemos el color del texto, y con text-decoration:underline, hacemos que se subraye el texto al poner el puntero del ratón sobre el enlace.

Paso 5. Guarda los cambios en "Aplicar al blog" y listo, ahora tendrás un enlace visible en las entradas populares que te dirigirá a cada post respectivamente.

Crear una caja para el gadget de las etiquetas y agregar efecto fade usando transiciones

Posiblemente ya hayan visto, que en algunos blogs o páginas web,  los enlaces de las etiquetas, se ven con el mismo ancho, con un color de fondo, y tienen algún efecto hover, como el cambio de color del fondo, etc.

Bueno, pues hoy les mostraré, como crear, una cajita contenedora para el gadget de las etiquetas, sin tocar la edición de HTML de su plantilla, y agregaremos un efecto fade o de desvanecimiento, en el color de fondo de cada etiqueta, en el hover (al poner el puntero del ratón encima), para que el cambio de color, se vea suave y coquetón, y lo lograremos en 3 pasos.

El efecto fade o de desvanecimiento, del color de fondo, lo logramos con transiciones, que funcionan perfectamente en navegadores modernos, pero no en Internet Explorer, sin embargo, si se apreciará el cambio de color en ese navegador, pero sin el efecto fade.

Pueden leer sobre las transiciones, en esta página de Mozilla en español.

¡Me encanta este efecto!, se puede conseguir fácilmente, se ve muy mono, y además no utiliza ningún script, ni librería externa, ¡que maravilla!, lástima que en Internet Explorer no fucione, pero bueno, ya sabemos como es ese navegador, ¡que le vamos a hacer!.

Bueno, sin más rollos, veamos como lograrlo:

Instrucciones paso a paso…

Paso 1: Ve a Diseño►Diseñador de plantillas►Avanzado►Añadir CSS, y ahí en el campo, para añadir CSS personalizado, agregamos el siguinte código:

/*ESTILOS DE LOS ENLACES DE LAS ETIQUETAS*/

#Label1 { /*la caja contenedora de las etiquetas*/
margin: 0;
padding:0;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
background-color:#ffebfe;/*el color de la caja o contenedor*/
}
#Label1 h2 { 
padding:10px 5px;
margin:0; 
border-bottom: 1px solid #ffffff;
}
#Label1 ul { 
margin:0; 
padding:0; 
} 

#Label1 ul li { 
margin: 0; 
padding: 0; 
list-style: none;
background: none;
border: none; /*importante en las nuevas plantillas*/
color: #232323;  /*el color de texto*/ 
}

#Label1 ul li a { /*los bloques de cada enlace*/
display: block; /*creamos el bloque*/ 
width:330px; /*el ancho del bloque, tendrás que ajustarlo*/ 
font-size: 19px;/*el tamaño de la fuente o letra*/ 
color:#2d0d01;/*el color de la fuente del enlace*/ 
padding:10px 0 10px 8px;/* para ampliar el bloque*/ 
margin:0;/* para separar cada bloque*/ 
text-decoration: none; 
text-align: left;
background-color: #fde893;/*el color de fondo*/ 
transition: all 1.0s linear; 
-o-transition: all 1.0s linear; 
-moz-transition: all 1.0s linear; 
-webkit-transition: all 1.0s linear; 
border-bottom: 1px solid #ffffff; /*borde abajo para cerrar la caja*/
}

#Label1 ul li a:hover {/*el efecto hover*/
color: #000000; /*el color de la fuente*/
font-weight: normal;
background-color: #f9a6f4;/*el color de fondo*/
}

Actualización, 04/07/2011: Edité el CSS, eliminando una lineas inecesarias, aunque no afectaban, si reduce el número de lineas de código :). Ve esta entrada, en donde puedes ver, como hacer para que la etiqueta seleccionada siempre sea enlace y se mantenga los estilos.

Paso 2: Ahí mismo veremos los cambios en la plantilla, recuerda dar enter, después de una llave de cierre }, para que se interprete el código, luego, edita el ancho de el bloque que viene como 330px, para que cuadre la cajita, y si vas a cambiar la apariencia, edita los colores de fondo, borde y fuente a tu gusto.

Puedes consultar esta tabla de colores.

 Paso 3: Guarda los cambios, haciendo click en APLICAR AL BLOG, y listo!.

Nota: ahí en el código, vienen las notas, entre /*…*/, para que puedas personalizar o saber que hace cada cosa; los valores del margen, como el padding, se leen: arriba, derecha, abajo, izquierda.

IMPORTANTE:

-Edita el gadget de las etiquetas, para que no muestre el número de etiquetas, en donde dice:

Mostrar cantidad de entradas por etiqueta

-Si quieres aplicar esto a un segundo gadget de etiquetas, entonces en lugar de #Label1 usarás #Label2, y tienes que cambiarlo en todo el código, mucho ojo con eso, Blogger los vá nuemerando, en order progresivamente.

-Tienes que ajustar el ancho del bloque, que viene con un valor de 330px, según el ancho de el lugar donde lo pongas, por ejemplo el de la columna lateral, me refiero a esta parte:

#Label1 ul li a {

...

width: 330px;

...

{

…y ¿cómo cambiar los bordes?

Si quieres cambiar los bordes de la caja, necesitas saber que:

El borde de  #Label1 h2 es el borde debajo del título del gadget.

Los bordes que están en #Label1 :  son los bordes de la caja contenedora.

...en  #Label1 ul li a, son los bordes de los bloques que creamos, para cada enlace de la etiqueta.

Los bordes se leen así:

border-top: 1px solid #ffffff; /*borde arriba*/
border-left: 1px solid #ffffff; /*borde a la izquierda*/
border-right: 1px solid #ffffff; /*borde a la derecha*/
border-bottom: 1px solid #ffffff; /*borde de abajo*/

En donde:
1px, es el grosor del borde.
solid, es el tipo de borde, puedes usar: dotted (lineas punteadas), o dashed (lineas separadas).
#ffffff, es el color del borde.

...y ¿la DEMO?

Puedes verlo en acción en este Blog, con el título de Categorías.


Recuerda: Esta caja se va a ver igual en todos los navegadores, simplemente, el efecto fade o de desvanecimiento del cambio de color, al poner el puntero encima de cada bloque con el enlace, no se verá en Internet Explorer, pero si el cambio de color.

La fuente que se muestra en los enlaces, es la que tiene la plantilla del DEMO, si usas las nuevas plantillas, o las plantillas que tiene las variables, para las fuentes, y quieres que la fuente del título del gadget, se vea igual, agrega esto en  #Label1 h2..

font: $(body.font);
font-size: 19px; /*el tamaño de la fuente*/
line-height: 200%; /*para mover el titulo verticalmente*/

Si tienes dudas o inquietudes no dudes en decírmelo, prometo no morder... .


Otras referencias de las transiciones:
Sexy interacción con transiciones

Colocar una notita o un post-it en la columna lateral del blog

Ya son varios los que me han preguntado cómo poner una notita en el blog, como la que tengo añadida en mi columna lateral, al principio, así que hoy te diré cómo hacerlo.

Usaremos una imagen pequeña  de un post-it, pero igualmente puedes usar otra imagen que servirá para escribir ahí una notita sobre algún evento nuevo del blog, una noticia importante etc.

Empezaremos por la forma más sencilla, y aunque deben tomarse en cuenta algunas cosas que abajo explicaré.

Es muy rápido y fácil de lograrlo, excepto por algunas diseños de plantillas, que necesitarán, crear una nueva sección.

El truco consiste en poner la nota como fondo al widget que usamos, y luego crear una clase, para ajustar el texto de la nota.

Primero, tienes que tener lista la imagen del post-it o la que vayas a usar como fondo...

Puedes usar esta imagen (copiar la URL), pero de preferencia alójala tu mismo en Blogger. También puedes buscar otra con diferentes colores, formas etc, en esta entrada.

Ahora, veamos cómo ponerla en el blog ;)

Instrucciones paso a paso

Paso 1. Ve a Diseño y agrega un gadget con la opción HTML/Javascript, en la columna lateral de tu blog y ponlo en primera posición, escribe el texto que quieras, ponle un título, sólo para identificar el Id del widget.

Paso 2. Ve a edición de HTML de tu plantilla y con ayuda de Ctrl F busca el nombre del título que le pusiste al widget, vamos a suponer que le pusiste Nota, entonces buscarás Nota y estará en esta linea de código:

<b:widget id='HTML1' locked='false' title='Nota' type='HTML'>

En este ejemplo, el id es HTML1, y con él vamos a trabajar.

Nota: si nunca has agregado un widget HTML/JavaScript, el Id del Widget, será HTML1, quise explicar cómo obtener el Id para evitar confusiones.

Una vez que tengas el Id del widget, puedes eliminar el título del gadget, y así no necesitarás quitarlo usando CSS. Es mejor asi no necesitaras la  regla que he resaltado con fondo amarillo abajo en el CSS que facilito.

Paso 3. Vamos a Diseño ► Diseñador de plantillas ► Avanzado► Añadir CSS, y agregamos en el campo correspondiente el siguiente código CSS, asegurándote de dar enter después de una llave de cierre, "}", por ejemplo, para que este sea interpretado. Si lo prefieres, lo pegas en la edición de HTML de la plantilla antes de ]]></b:skin>.

/* Notita o post-it*/
#HTML1 {
background: transparent url(url_de_la _imagen) no-repeat left top;
width: 320px; /*el ancho del widget*/
height: 279px; /*el alto importante para que se vea la imagen completa*/
margin: 0;
padding:0;
}
#HTML1 h2{
position:absolute;top:-9999px; left:-9999px;/*aquí eliminamos el título.Si lo quitaste, no necesitas poner esta regla y que he resaltado con fondo amarillo*/
}
.nota{
margin: 0;
padding: 45px 32px 0 24px; /*padding para ajustar el texto*/
font-size: 14px; /*el tamaño del texto*/
color: #2b1f19; /*el color del texto*/
line-height: 140%; 
}

Con el código anterior, estamos identificando a nuestro widget, que es HTML1,  le pusimos la imagen de la nota. También creamos la clase nota, que nos servirá para mover hacia adentro el texto que colocaremos, creando un relleno (padding),  para que quede dentro de la notita.

IMPORTANTE: Recuerda editar en el código anterior, el Id si este fuera diferente a HTML1, tal vez sea HTML2, o HTML3, etc.

Paso 4. Guardas los cambios en APLICAR AL BLOG, o en Guardar Plantilla.

Paso 5. Ahora necesitarás ajustar el texto, para ello, vamos a Diseño ► Elementos de la página, y luego, editamos el widget, agregando la clase que creamos que es nota, entonces el contenido se verá así:

<div class="nota">
aquí todo mi contenido...</div>

Paso 6. Guarda los cambios y listo! ya tiene una nota en tu columna lateral y puedes editar el contenido cada vez que lo necesites ;)

Funciona en todos los navegadores, incluyendo IE6 (Internet Explorer 6) salvo por el problema de usar una imagen con fondo transparente.

Puntos importantes

• Si la nota no está en primera posición de la columna, es necesario que el ancho sea igual al ancho de la columna lateral, si es que tenemos fondo o background en el widget de la columna, que es cuando tenemos los widgets separados como en el caso de mi blog, de otro modo el fondo del widget de arriba se irá hacia abajo por un extremo, considerando el ancho de la imagen que utilices en IE7, lo mismo pasará si usas una imagen (la nota) con fondo transparente.
• Si usas una imagen con fondo transparente, IE6 mostrará la transparencia de color gris.

Luego explicaré cómo hacerlo creando una nueva sección.

Tip: Puedes poner varias notas identificando el widget, para agregarlo en el código y usar la misma clase las veces que quieras.