Botones flotantes para compartir de Facebook, Twitter y Google +1

Hace ya algo de tiempo vimos cómo poner los botones de compartir de Facebook y Twitter en la parte superior de las entradas, pero ahora veremos cómo ponerlos en modo flotante tal como el ejemplo de este mismo post, verás que aun con subir o bajar el scroll de la página los botones permanecen ahí (en el lado izquierdo).

Además del botón Me gusta de Facebook, el botón para twittear, se ha incluido el botón +1 de Google.

Veremos cómo ponerlos de dos formas, o mejor dicho, con dos funciones diferentes, la primera será para que sólo se muestren en las entradas y que su función sea compartir (o recomendar) la entrada donde se ha hecho click en el botón.

La segunda opción será mostrarlo en todas partes inclusive en la portada, pero con la diferencia que no será para compartir las entradas, sino el blog completo.

El procedimiento es sumamente sencillo, sólo hay que entrar en Diseño | Edición de HTML, marcar la casilla Expandir plantillas de artilugios, y pegar antes de ]]></b:skin> lo siguiente:

table#RedesSociales{
position:fixed;
top:150px;
left:5px;
z-index:200;
}

Ahora busca esta línea:

<!-- clear for photos floats -->

Debajo de ella agrega este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<tr><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></td></tr>

<tr><td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td></tr>

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr>

</tbody></table>
</b:if>

Guarda los cambios y listo. Ese servirá para que se compartan las entradas individuales, así que no se verán en la portada, sólo ingresando a un post.

Pero si lo que quieres es compartir o que se recomiende la URL de tu blog y no las entradas, entonces en lugar de ese código, el que pondrías sería este:

<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<tr><td>&lt;iframe allowTransparency=&#039;true&#039; frameborder=&#039;0&#039; scrolling=&#039;no&#039; src=&#039;http://www.facebook.com/plugins/like.php?href=http://nombre-de-mi-blog.blogspot.com&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#039; style=&#039;border:none; overflow:hidden; width:73px; height:60px&#039;&gt;&lt;/iframe&gt;</td></tr>

<tr><td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Título del blog' data-url='http://nombre-de-mi-blog.blogspot.com' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td></tr>

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone href='http://nombre-de-mi-blog.blogspot.com' size='tall'/></td></tr>

</tbody></table>

En este caso, hay que poner los datos que se indican en color rojo. Si usas un dominio propio entonces no pongas .blogspot.com sino la extensión de tu dominio propio. Por ejemplo, en lugar de ciudadblogger.blogspot.com sería ciudadblogger.com

En ambos casos podemos cambiar la posición de los botones, eso se controla en el primer código.

top:150px; es la distancia que habrá desde arriba, con un valor más alto los botones se bajarán.

left:5px; es la distancia que tendrán desde al lado, left indica que estarán a la izquierda, si los quieres a la derecha cambia left por right

Y listo. Otra forma de ofrecerle a los lectores la posibilidad de que valoren nuestro blog y entradas en las diferentes redes sociales.

Botón Google+1 (PlusOne) en una barra flotante

Sé que ya muchos están usando el botón Google+1 en el blog para que los usuarios puedan recomendar las entradas que les parecen interesantes. Pero también podemos colocar el botón +1 (Plus One) para que se recomiende no la entrada sino la página principal del blog.
Y para ya no poner nada en las entradas (por si ya tienes ahí el botón) vamos a colocar el botón Google +1 en una barra flotante abajo de la página, de esta forma tus lectores podrán recomendar tu blog.

Puedes ver el ejemplo en esta misma entrada, al final aparece una barra. En ella se muestra un texto que invita a los lectores a recomendar el blog, luego, tal como hicimos para poner un mensaje al hacer click en el botón +1 haremos que el primer mensaje desaparezca al hacer click y que en su lugar se muestre un mensaje de agradecimiento, y al hacer click nuevamente para deshacer el voto se mostrará un mensaje diferente.

Como sé que a muchos les puede parecer molesto tener siempre la barra visible, he incluido una cookie (a duras penas lo hice) para que el lector sólo lo vea una vez por semana, aunque por supuesto este tiempo lo puedes configurar a tu gusto.

Empecemos. Primero entra en Diseño | Edición de HTML y pega antes de </head> esto:

<script type='text/javascript'>
//<![CDATA[
// Cookies
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
//]]>
</script>

Ahora pega antes de ]]></b:skin> estos estilos:

/* Barra Plus One
----------------------------------------------- */
#barraPlus1 {
position:fixed;
bottom:0px;
left:0;
height:24px;
background:#000; /* Color de la barra */
width:100%;
padding:5px;
filter:alpha(opacity=70); /* Transparencia de la barra */
-moz-opacity:0.7; /* Transparencia de la barra */
-khtml-opacity: 0.7; /* Transparencia de la barra */
opacity: 0.7; /* Transparencia de la barra */
z-index:900;
}
#mensajePlus1, #textoPlus1 {
color:#D8D8D8; /* Color del texto */
font-family:Verdana; /* Tipo de fuente */
font-size:16px; /* Tamaño del texto */
vertical-align: middle;
display:table-cell;
}
.botonPlus1 {
display:table-cell;
padding-left:20px;
}
.cerrarTextoPlus1 {display:none !important;}

A continuación busca la etiqueta <body> o esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo de cualquiera de ellas dos agrega este código:

<script type='text/javascript'>
//<![CDATA[
// barra Google +1 (ciudadblogger.com)
function saludoPlus1(plusone) {
var div_ty = document.getElementById("mensajePlus1");
if (plusone.state == "on") {
document.getElementById('textoPlus1').className='cerrarTextoPlus1';
div_ty.innerHTML = "¡Gracias por recomendarnos! Tu voto es importante para nosotros.";
} else {
document.getElementById('textoPlus1').className='cerrarTextoPlus1';
div_ty.innerHTML = "Parece que ya no te gustamos, ojalá nos des otra oportunidad.";
}
}
//]]>
</script>

<div align='center' id='barraPlus1'>
<span id='textoPlus1'>&#191;Te ha gustado el blog? Qué tal si nos regalas un +1</span>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<div id='mensajePlus1'/><span class='botonPlus1'><g:plusone callback='saludoPlus1' href='http://nombre-de-mi-blog.blogspot.com'/></span>
</div>

<script type='text/javascript'>
//<![CDATA[
var divName = document.getElementById("barraPlus1");
if(!readCookie('cookiePlus1')) {
divName.style.display='block';
createCookie('cookiePlus1', 'cookiePlus1', 7); // Número de días que dejará de verse
}
else {
divName.style.display='none';
}
//]]>
</script>

Ahora vamos a personalizar todo esto. En el segundo código, el de los estilos, está señalado en color verde algunas áreas que se pueden modificar como el color de fondo, tamaño de la letra, etc. Ahí mismo se controla la transparencia que tiene la barra, con un valor más alto se hace menos transparente, con uno más bajo se hace más transparente.

El primer texto en rojo es el mensaje que aparece cuando el lector recomienda el blog, el segundo texto es el mensaje cuando deja de recomendarlo, y el tercero es el mensaje que aparece por defecto cuando carga la página.
Un poco más abajo se señala dónde se debe cambiar la dirección de tu blog.

Por último, en color azul verás el 7, ese es el número de días que dejará de verse la barra estática, transcurrido ese tiempo el lector podrá verla de nuevo, a menos claro que él haya borrado las cookies de su navegador. Ese valor puedes cambiarlo por el que quieras.
Yo en mi ejemplo lo he puesto para que dure unos minutos nada más, así que cuando actualices esta página, dejes un comentario o ingreses a otra entrada dejará de verse, pero después estará ahí de vuelta.

El resultado me parece que puede ser muy óptimo para recomendar el blog con el botón +1 de Google, sobre todo porque podemos seguir usando el botón que recomienda las entradas, y al mismo tiempo usar este que recomendará el blog, no las entradas.

Poner emoticons en Blogger estilo Facebook

AVISO

Este truco sólo funciona en el sistema antiguo de comentarios. Si usas los comentarios anidados visita esta entrada de Vagabundia.

Las palabras no siempre son suficientes para expresar alguna emoción, sobre todo en el mundo cibernético donde todo tiene el sentido connotativo que cada uno le da. Es ahí cuando los emoticonos salen a nuestro rescate para poder reflejar algún estado de ánimo o gesto que a veces es más fácil expresar con una imagen.

Por esa razón muchos optan por usar emoticons en los comentarios del blog, y es eso mismo lo que haremos con esta entrada. Veremos cómo agregar emoticons en el blog estilo Facebook, es decir, con los mismos emoticons que usa Facebook en su chat y muro. Puedes verlos funcionando en este blog de pruebas.

Estos son los emoticones que verás:

Estos emoticons (emoticones, emoticonos, smiles, o como le quieras llamar) aparecerán sólo en los comentarios, y para ello usaremos un script de Vagabundia que ingeniosamente hace que los emoticons sólo se ejecuten en el cuerpo de los comentarios para no interferir con otras áreas.

Primero entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y agrega antes de </head> el siguiente script:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function emoticonComentario(emoticon) {
if(!document.getElementById) {return;}
bodyText = document.getElementById(emoticon);
cambiarLetra = bodyText.innerHTML;

// :)
cambiarLetra = cambiarLetra.replace(/:\)/g,'<img src="https://lh5.googleusercontent.com/-20cNHpka-fA/TikBlTXm_KI/AAAAAAAABkE/1orU58ycSu8/fb_sonrisa.gif" />');

// :(
cambiarLetra = cambiarLetra.replace(/:\(/g,'<img src="https://lh6.googleusercontent.com/-Ngrhi8wn99E/TikBlrW-FvI/AAAAAAAABkI/P8RTNKLS51Y/fb_triste.gif" />');

// ;)
cambiarLetra = cambiarLetra.replace(/;\)/g,'<img src="https://lh6.googleusercontent.com/-kkd84kPmUTw/TikBkw_9z2I/AAAAAAAABj0/WV9RQds939U/fb_guino.gif" />');

// :P
cambiarLetra = cambiarLetra.replace(/:\P/g,'<img src="https://lh4.googleusercontent.com/-P9hko0sZZVY/TikBk4BH0xI/AAAAAAAABj4/o5aVYyp1wgU/fb_lengua.gif" />');
cambiarLetra = cambiarLetra.replace(/:\p/g,'<img src="https://lh4.googleusercontent.com/-P9hko0sZZVY/TikBk4BH0xI/AAAAAAAABj4/o5aVYyp1wgU/fb_lengua.gif" />');

// :D
cambiarLetra = cambiarLetra.replace(/:D/g,'<img src="https://lh5.googleusercontent.com/-r4q9ruMcMzM/TikBkhvFEgI/AAAAAAAABjw/r3VC-agWwu8/fb_feliz.png" />');
cambiarLetra = cambiarLetra.replace(/:d/g,'<img src="https://lh5.googleusercontent.com/-r4q9ruMcMzM/TikBkhvFEgI/AAAAAAAABjw/r3VC-agWwu8/fb_feliz.png" />');

// XD
cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://lh5.googleusercontent.com/-c_OC_4PKFA8/TikBl3rowvI/AAAAAAAABkM/gJQ-HpMUnQk/fb_XD.gif" />');

// :S
cambiarLetra = cambiarLetra.replace(/:S/g,'<img src="https://lh6.googleusercontent.com/-AVOvM9rn4J8/TikBkhVSwLI/AAAAAAAABjo/nJSmAIyp_2k/fb_duh.gif" />');
cambiarLetra = cambiarLetra.replace(/:s/g,'<img src="https://lh6.googleusercontent.com/-AVOvM9rn4J8/TikBkhVSwLI/AAAAAAAABjo/nJSmAIyp_2k/fb_duh.gif" />');

// X(
cambiarLetra = cambiarLetra.replace(/X\(/g,'<img src="https://lh5.googleusercontent.com/-4UuPzxsrXK4/TikBlXlKttI/AAAAAAAABkQ/q80e-j7wW88/fb_molesto.gif" />');

// :'(
cambiarLetra = cambiarLetra.replace(/:'\(/g,'<img src="https://lh5.googleusercontent.com/-XN7rGa_1A2k/TikBlPKbVoI/AAAAAAAABj8/Xf3enr9F1Go/fb_llorando.gif" />');

// 8)
cambiarLetra = cambiarLetra.replace(/8\)/g,'<img src="https://lh3.googleusercontent.com/-DX-1dhWNd3c/TikBk3WWMTI/AAAAAAAABkA/SVdLGSpluJ0/fb_gafas-sol.gif" />');

// :O
cambiarLetra = cambiarLetra.replace(/:\O/g,'<img src="https://lh3.googleusercontent.com/-QvPqYhMjpRA/TikBkFKJQ3I/AAAAAAAABjk/UpLTAo4iB8w/fb_asombrado.gif" />');
cambiarLetra = cambiarLetra.replace(/:\o/g,'<img src="https://lh3.googleusercontent.com/-QvPqYhMjpRA/TikBkFKJQ3I/AAAAAAAABjk/UpLTAo4iB8w/fb_asombrado.gif" />');

// :*
cambiarLetra = cambiarLetra.replace(/:\*/g,'<img src="https://lh5.googleusercontent.com/-nSRdDIsdgvo/TikBkMR3LNI/AAAAAAAABjc/6TgLJFw8dVE/fb_beso.gif" />');

// :A
cambiarLetra = cambiarLetra.replace(/:A/g,'<img src="https://lh4.googleusercontent.com/-_tmsynPKz0Y/TikBkHEK7hI/AAAAAAAABjs/9ovP65vuRbw/fb_angel.gif" />');
cambiarLetra = cambiarLetra.replace(/:a/g,'<img src="https://lh4.googleusercontent.com/-_tmsynPKz0Y/TikBkHEK7hI/AAAAAAAABjs/9ovP65vuRbw/fb_angel.gif" />');

// 3:
cambiarLetra = cambiarLetra.replace(/3:/g,'<img src="https://lh3.googleusercontent.com/-IYQvsMUfT_M/TikBkT9sDCI/AAAAAAAABjg/q9fQtjh9ZOY/fb_diablo.gif" />');

bodyText.innerHTML = cambiarLetra;
}
//]]>
</script>
</b:if>

Ahora busca esta parte:

<p>
<data:comment.body/>
</p>

Y cámbiala por este código:

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
emoticon = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
emoticonComentario(emoticon);
</script>

Luego busca esta línea:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Muy posiblemente la encontrarás dos veces, justo debajo de la segunda que encuentres agrega esto, que es la imagen que se mostrará arriba del formulario de comentarios:

<img border='0' src='https://lh5.googleusercontent.com/-UQcOiZ_Q2oc/TikBe74M1jI/AAAAAAAABjY/t-zm-AQjY1w/emoticons.png'/>

Y listo, tendrás estos emoticonos en tu blog. Estas imágenes son tomadas del mismo Facebook y tienen el contorno ligeramente marcado de blanco, por lo que se recomienda usarlo en blogs con colores claros para que no se note ese pequeño borde alrededor de ellas.
O si lo prefieres puedes cambiar los iconos por los tuyos, sólo busca las URLs de las imágenes del primer código que corresponden a cada juego de caracteres, los he señalado en color verde para que sean más fácil de encontrar.

Que los disfruten

Mostrar resumido el feed del blog

El feed lee las entradas de forma plana, sin estilos o efectos que tengas en ellas. Es por eso que a veces es necesario que el lector vea la entrada desde el blog y no desde el feed, así que una forma de hacer que el lector de nuestro feed ingrese al blog para leer el contenido de la manera que lo hemos redactado, es presentar el feed en forma resumida, mostrando sólo un párrafo del post.

[Ver el feed de Ciudad Blogger]

Hay dos formas de mostrar los feeds resumidos, una es usando sólo Blogger y otra es usando Feedburner, veamos pues ambas formas.

Usando el feed de Blogger

Si tu feed es administrado sólo por Blogger, y NO usas Feedburner, entonces puedes mostrar estos contenidos resumidos. El "inconveniente" con esta opción es que toma aproximadamente los primeros 400 caracteres de la entrada y nada más. Además, la opción de agregar un texto al pie de los feeds sólo es posible cuando el feed se muestra de forma completa.

Aun así, puedes mostrar los feeds cortos, sólo ingresa a Configuración | Feed del sitio, si estás en el Modo avanzado selecciona Corto donde dice Permitir feeds del blog.

Si estás en el Modo básico selecciona Corto donde dice Feed de entradas del blog. Guarda los cambios y listo.

Usando el feed de Feedburner

Si tu feed es administrado por Feedburner también podemos mostrar el feed de forma resumida pero siendo nosotros quienes decidamos el número de caracteres a mostrar, y además de eso tenemos la opción de agregar un texto adicional al pie del resumen.

Primero hay que cambiar la configuración en Blogger, así que vamos a Configuración | feed del sitio, si estás en el Modo avanzado selecciona Completo donde dice Permitir feeds del blog.

Si estás en el Modo básico selecciona Completo donde dice Feed de entradas del blog.

Recuerda que donde dice Publicar URL redireccionada del feed debe estar la URL de tu feed de Feedburner.

Ahora ingresa a tu cuenta de Feedburner, luego entra en Optimize | Summary Burner, ahí puedes elegir el número de caracteres que se mostrarán en el resumen del feed, y debajo agregar un texto si lo deseas. Da click en Activar y listo.

De esta última forma, quienes lean tu feed ya sea desde un lector de feeds o los que se suscriben por correo verán sólo el número de caracteres que elegiste para el párrafo así como el texto al pie del feed donde podrás indicarles que se trata sólo de un resumen y que deben ingresar a la entrada para poder leer completo el artículo.

Antes de realizar estos procedimientos considera si tu feed verdaderamente necesita mostrarse en forma resumida, pues recuerda que mucha gente se suscribe al feed justamente para no tener la necesidad de ingresar a la página para leer el contenido.

Boton Google +1 con mensaje al hacer click

Con la llegada del botón +1 (PlusOne) y su prometedor éxito, es seguro que la mayoría ya sabe cómo agregar el botón +1 de Google en el blog. ¿Pero, qué posibilidades tiene el botón para ser configurado?

La verdad es que si partimos del punto que podemos hacer un callback para leer funciones Javascript entonces las posibilidades son muchas.

Una de esas posibilidades es poder mostrar un texto en el botón +1, un mensaje cuando el usuario nos regale un voto y otro mensaje para cuando el usuario quiera deshacer la recomendación.

Puedes ver el ejemplo en este botón, si le das click para recomendar aparecerá un mensaje de agradecimiento, después de eso dale click nuevamente y aparecerá un mensaje distinto.

Ahora vamos a ver cómo ponerlo en el blog. Entra en Diseño | Edición de HTML y marca la casilla Expandir plantillas de artilugios.
Si lo quieres debajo del título de la entrada entonces busca esta línea:

<div class='post-header'>

O si lo quieres al final de las entradas entonces busca esta línea:

<div class='post-footer'>

En cualquiera de los casos, agrega debajo de una de esas líneas lo siguiente:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// mensaje Google+ (ciudadblogger.com)
function saludoPlusOne(plusone) {
var div_ty = document.getElementById("mensajePlusOne");
if (plusone.state == "on") {
div_ty.innerHTML = "¡Gracias por recomendarnos! Tu voto es importante para nosotros."; document.getElementById('mensajePlusOne').className='msgPlusOne';
} else {
div_ty.innerHTML = "Parece que ya no te gustamos, ojalá nos des otra oportunidad."; document.getElementById('mensajePlusOne').className='msgPlusOne';
}
}
//]]>
</script>

<div align='right'><g:plusone callback='saludoPlusOne'/>
<div id='mensajePlusOne'/></div>

Ahora antes de ]]></b:skin> pega los estilos:

.msgPlusOne {
background:#0B0B3B;
color:#A4A4A4;
padding:10px;
font-style:italic;
}

Esos son los estilos que tendrá el recuadro donde aparecerá el mensaje, puedes establecer otros o simplemente no ponerlo si es que no quieres que tenga alguna apariencia. Lo que está en color rojo son los mensajes que mostrará, el primero es el mensaje que aparece cuando se hace click para recomendar, y el segundo para cuando ya no le gusta al lector.

Y habiendo hecho eso tendrás el botón +1 de Google que muestra un mensaje al hacer click.

Errores comunes al poner los códigos CSS

Sin importar qué tanto tiempo tengamos con los blogs nada nos exenta de cometer errores al intentar hacer un cambio en la plantilla. Así que de repente ponemos un código por aquí, otro por allá, damos Vista Previa y nada... o todo se ve igual o no se ve como debería verse. Las razones pueden ser muchas, pero hoy nos centraremos en los problemas habituales que cometemos al poner estilos CSS en la plantilla del blog.

Los estilos, cuando van antes de ]]></b:skin> debemos asegurarnos de nunca eliminar nada alrededor de donde lo pongamos.

Algo bastante (pero bastante) común, es que al ponerlo se elimina la llave de cierre del código anterior. Por ejemplo aquí:

.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}

Hola, yo soy un contenedor con la clase .negro

Hola, yo soy un contenedor con la clase .azul

Ahí sin querer hemos eliminado la llave de cierre de la clase .negro, eso hará que aunque los estilos de .negro sigan funcionando, los estilos de .azul no tendrán efecto alguno.

Pero si lo pones bien, sin eliminar la llave de cierre no habrá problema alguno.

.negro {
background:#000;
color:#fff;
}
.azul {
background:#58ACFA;
color:#000;
}

Hola, yo soy un contenedor con la clase .negro

Hola, yo soy un contenedor con la clase .azul

Un simple y llano caracter puede hacer la diferencia entre que algo funcione o no, ya sea la llave de cierre, el punto y coma al final de cada declaración de estilo, el punto antes de la clase, etc.

Es por eso que siempre debemos asegurarnos de no eliminar nada al momento de poner un código.

Otro error menos común pero que también sucede es al momento de poner anotaciones o comentarios en los estilos CSS. Cuando ponemos un comentario para identificar un código debe ser de esta manera:

/* Estilos de ejemplo */
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}

Pero nunca deberá ser de esta manera:

<!-- Comentario -->
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}

O de esta otra:

// Comentario
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}

Esas dos últimas formas erróneas sólo se usan y son aceptables en códigos que van dentro del <body> incluso dentro del <head> pero nunca antes de ]]></b:skin>

Algunas veces te encontrarás con estilos que están encerrados entre <style type="text/css"> y </style>

En esos casos los estilos van antes de </head> o después de <head> pero no antes de
]]></b:skin> de lo contrario los estilos no podrán funcionar y se generará un espacio arriba de la plantilla e incluso se mostrarán estos caracteres: -->

Así que, si ponemos los códigos sin eliminar nada, si ponemos las anotaciones bien, y si todo lo colocamos en el lugar correcto no deberán surgir estos problemas de que las cosas no se ven como se deberían ver, al menos no referente al CSS.

Google y los dominios co.cc desindexados

AVISO

Goole ha indexado nuevamente a los dominios co.cc, o al menos a la mayoría de ellos, así que ya pueden utilizarse de nuevo con sus debidas precauciones.

Algunos se enteraron desde Twitter, pero otros aún no lo saben y me han estado preguntando porqué sus blogs han dejado de aparecer en las búsquedas de Google.

Los dominios gratuitos co.cc por muchos años han sido una opción para quien requiere de un dominio propio pero aún no puede pagar por él, quizá no es la extensión más atractiva pero las opciones de redireccionamiento y manejo de DNS han sido un punto a su favor, no por nada existen más de 5 millones de usuarios en todo el mundo que los usan.

Sin embargo, al ser un servicio gratuito muchos utilizaron estos dominios para crear sitios de SPAM, y en menor número sitios que contenían troyanos. Así que el pasado 1 de julio, Google tomó la decisión de desindexar todos los dominios .co.cc por lo que ya no aparecen más en los resultados de las búsquedas de Google. Una decisión poco afortunada para los millones de sitios que han trabajado por años para ocupar un lugar en la red, y que éstos, sin deberla han tenido que pagar los platos rotos.

Pero Google no es el único, Facebook desde hace ya varios meses tomó una medida similar impidiendo que contenido proveniente de dominios co.cc pudiera ser compartido en la red social.

Ante estos problemas, si tu blog es uno de los casi 11 millones y medio con extensión co.cc la mejor opción es regresar a blogspot (a menos que te importe poco aparecer en Google), para ello sólo entra en Configuración | Publicación | Cambiar por: blogspot.com

Otra opción, que sugiere NIcoNico (colaborador del foro de ayuda de Blogger) es apelar ante Google para que tu dominio sea reconsiderado y pueda ser indexado nuevamente.

Para ello debes primero verificar la propiedad de tu blog a través de las Herramientas para Webmasters de Google. [Ver primeros pasos de esta entrada]

Y luego, llenar el siguiente formulario y enviarlo:

https://www.google.com/webmasters/tools/reconsideration?hl=es

En dicho formulario debes explicar por qué crees que tu dominio debe ser incluido nuevamente y demostrar que tu blog no contiene SPAM, pishing, o cualquier otra infracción que incumpla con las directrices para webmaster. Y después a esperar...

Estas son decisiones drásticas y quizá poco justas para la mayoría, pero desde siempre Google ha estado un tanto arisco con los dominios gratuitos, no porque no sean de pago, sino porque al ser recursos gratuitos se vuelven el medio perfecto para que los spammers se hagan visibles en la web.

Usando la etiqueta Fieldset y Legend

La etiqueta FIELDSET originalmente está diseñada para agrupar elementos dentro de un formulario, de esta forma varios INPUT se pueden organizar dentro de un campo de un formulario. Por ejemplo este código:

<form>
<fieldset>
<legend>Datos personales:</legend>
Nombre: <input type="text" size="30" /><br />
Dirección: <input type="text" size="30" /><br />
Teléfono: <input type="text" size="30" />
</fieldset>
</form>

Se convierte en esto:

Datos personales:

Nombre:
Dirección:
Teléfono:

Pero no, no haremos formularios pues para ello necesitaríamos un servidor y algo de PHP para enviar y almacenar los datos. Pero sí podemos darle otro uso a la etiqueta FIELDSET, por ejemplo, para destacar un texto, mostrar una descripción, o incluso para poner los ingredientes de una receta. Por ejemplo:

Ingredientes

- 1 cebolla grande (unos 300g)
- chiles serranos u otro al gusto, o guindillas
- 750 g de tomates rojos sin piel en cubitos
- 12 tiras de tocino ahumado (panceta, beicon)
- 1 kg de filete de res (lomo bovino), cortado en trozos de 5 cm x 1 cm)
- sal y pimienta
- aceite
* Ingredientes tomados de la receta Puntas de filete a la norteña [Gabriela, clavo y canela 2011]

El código que hemos usado es este:

<fieldset>
<legend>Título</legend>
... Aquí va el texto ...
</fieldset>

Organizado pero muy simple ¿verdad? No hay problema, se puede personalizar un poco.

Síntesis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat, nisl sed aliquet pretium, justo velit pellentesque arcu, non eleifend magna sem quis odio. Nulla sapien lacus, rutrum vitae vehicula eget, interdum sed dolor. Quisque condimentum fermentum lorem eget commodo. Vestibulum in sem pellentesque mi auctor posuere non id elit. Curabitur lacus arcu, cursus at lobortis a, adipiscing sed ligula.

Ahí, el código que usamos es este:

<fieldset style="border:6px groove #ccc; background:#F8ECE0;">
<legend style="font-weight:bold; color:#61380B;">Título</legend>
... Aquí va el texto ...
</fieldset>

Los primeros estilos en negrita son para el contenedor general, ahí le hemos puesto un borde de 6px y un color de fondo. Los segundos estilos en negrita corresponden al título del campo.

Pero sería muy tedioso tener que escribir los estilos siempre que lo vayamos a usar, así que podemos definir esos estilos directo en la plantilla.

Para ello entramos en Diseño | Edición de HTML y antes de ]]></b:skin> pegamos lo siguiente:

fieldset {
border:6px groove #ccc; /* Borde */
background:#F8ECE0; /* Color de fondo */
color:#000; /* Color del texto de todo el contenido */
}
legend {
text-align:left; /* Puedes cambiarlo por center o right */
font-weight:bold; /* Estilo de la fuente del título */
color:#61380B; /* Color del título */
}

Eso hará que todos los fieldset que uses tengan ese diseño que has elegido.
Son estilos muy básicos, pero se pueden agregar otros tantos. Recuerda que fieldset es el contenedor, y legend el título de ese contenedor.

Jugando un poco con los estilos y aplicando CSS3 podemos obtener resultados aun más llamativos:

AVISO

Si usas un navegador moderno podrás ver este aviso con efectos de sombra y bordes redondeados.
Recuerda que si te suscribes a nuestro feed podrás enterarte de este y otros temas para que apliques en tu blog.
También puedes seguirnos en Twitter y Facebook para tener información extra que tal vez no verás por acá.

[+/-] Ver código

<fieldset class="fieldset1">
<legend class="legend1">AVISO</legend>
Si usas un navegador moderno podrás ver este aviso con efectos de sombra y bordes redondeados.
Recuerda que si te suscribes a <a href="http://ciudadblogger.com/atom.xml">nuestro feed</a> podrás enterarte de este y otros temas para que apliques en tu blog.
También puedes seguirnos en <a href="http://twitter.com/Ciudad_Blogger">Twitter</a> y <a href="http://www.facebook.com/fans.ciudadblogger">Facebook</a> para tener información extra que tal vez no verás por acá.
</fieldset>


.fieldset1 {
width:500px;
border:4px double #0080FF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 8px 8px 6px #808080;
-moz-box-shadow: 8px 8px 6px #808080;
box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5;
padding: 10px;
font-family: Verdana, Geneva, sans-serif;
color: #0B173B;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
}
.legend1 {
text-align:center;
font-weight:bold;
font-size:18pt;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;
}

La Edición de HTML de vuelta en la nueva interfaz de Blogger

Hace unos días comentábamos sobre un tema que estaba preocupándonos a más de uno, y es que la nueva interfaz que sólo está disponible por el momento sólo para algunos, no incluía la opción de editar la plantilla a través de la Edición de HTML.

Como mencionaba esa vez, lo mejor era no especular de más porque bien sabemos que lo que está en Blogger in Draft puede ser modificado de un momento a otro, así que bien podía ser definitivo o no.

Por suerte parece que el equipo de Blogger está replanteando algunos detalles con esa nueva interfaz, porque además de que el escritorio ha cambiado nuevamente (ahora es más simple aun), también ha regresado la opción de Edición de HTML que ahora se llama Editar plantilla, así que nuevamente podemos editar la plantilla del blog como lo hemos hecho siempre.

Si ya dispones de la nueva interfaz de Blogger entra a tu cuenta, ahí verás el nombre de tu blog y del lado extremo derecho unas opciones. Haz click en la flecha junto al icono de la casa y selecciona Plantilla.

Ahí encontrarás todas las plantillas del Diseñador, ve hasta abajo y encontrarás la opción Editar plantilla.

Da click ahí y podrás tener acceso a la edición HTML de tu plantilla nuevamente.

Ahora sólo tenemos que esperar que este cambio sea definitivo y de ser así ver qué otros cambios más realizará, pero tal parece que esta vez Blogger ha escuchado nuestras peticiones.

Gracias a Felipe por el aviso de este cambio.

Quitar el Leer más automático en las entradas

Por la red abundan miles de plantillas personalizadas para Blogger y muchas de ellas tienen incluido sl script que genera resúmenes automatizados con imágenes en miniatura. Pero a veces quienes descargan estas plantillas no desean utilizar esta característica. Así que sí deseas eliminar el Leer más automático sólo hay que seguir unos cuantos pasos para dejar las entradas "normales". En realidad lo que haremos será lo inverso a lo que haríamos si quisiéramos instalar por primera vez esta característica.

Primero que nada, como tocaremos partes importantes de la plantilla haz un respaldo de la misma, luego entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca un código como este:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Si te pierdes un poco en encontrar el código busca lo que está en color rojo y de esa forma reconocerás todo lo demás.

Algunas veces puede variar un poco el código y quizá no sea exactamente idéntico, pero deberá tener mucha similitud.

Cuando lo encuentres elimínalo con mucho cuidado, y en su lugar pon esto:

<data:post.body/>

Una vez hecho esto dale Vista Previa, si todo ha salido bien ya deberán verse las entradas completas sin ningún resumen. Ahora vamos a quitar el script de la plantilla para que no tenga que estar cargando inutilmente.
Para ello busca antes de </head> o después de <head> un código como este y elimínalo:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Con eso habrás quitado por completo el Leer más automático con imágenes en miniatura y tus entradas se mostrarán de forma completa.