Hace algún tiempo, explicamos como implantar el botón de votaciones para entradas agregadas a Bitacoras.com.

Para ser sincero, a pesar de que ha sido hasta la fecha la entrada más exitosa que he publicado jamás (64 comentarios, 250 votos en Bitacoras, nosecuantos enlaces...), en poco tiempo quité el botón de mi blog. El problema es que retrasaba mucho la carga y ya tengo bastantes gadgets instalados como para cargarlo más.

No me molesté en su momento en intentar solucionarlo, pero sin embargo, por puñetera casualidad buscando otra cosa, en Vinagre Asesino leí el motivo y una manera de instalarlo sin demorar en absoluto la carga. El precio es pequeño: el botón no mostrará los votos acumulados hasta la fecha. Pero es que precisamente el SCRIPT que hace eso es el que retrasaba todo.

De esta manera, sólo se mostrará una imagen sencilla, sin el número de votos, pero que servirá de enlace para poder realizar la votación al post desde la propia entrada. Parece más que suficiente porque precisamente eso es lo que queremos ¿no?.

Pues bien, cómo se explicó en su momento, buscamos el sitio dónde queremos mostrar el botoncito y en esta ocasión ponemos este otro código:


Antes de que empiecen a llover los problemas, para usuarios de Blogger antiguo, data:post.url, tiene que ser sustituido por $BlogItemPermalinkURL$. Con eso es suficiente para que también funcione en esa versión.

Si no os gusta el icono que se muestra, podeis cambiar la dirección de la imagen facilitada en el código, por cualquiera de estas otras:

	52x39	http://i263.photobucket.com/albums/ii148/elsereno100/bitacoras52x39.gif
	74x29	http://i263.photobucket.com/albums/ii148/elsereno100/bitacoras74x29.gif
	87x19	http://i263.photobucket.com/albums/ii148/elsereno100/bitacoras87x19.gif
	80x15	http://i263.photobucket.com/albums/ii148/elsereno100/bitacoras80x15.jpg
	23x29	http://i263.photobucket.com/albums/ii148/elsereno100/bitacoras23x29.gif
	16x16	http://static2.bitacoras.com/images/agregador/bitacorascom16x16.gif

También podeis diseñar un boton al gusto, alojarlo y luego cambiar la dirección indicada por la vuestra.

La verdad es que ya estaba cansadito de tener que editar los posts tras publicarlos, para poner de manera ortográficamente correcta, los títulos de las entradas.

Hasta hace nada, esta era la única solución para que cuando usábamos en el título de una entrada una palabra con tilde, apertura de interrogación, admiración o una Ñ, la dirección permanente al post (permalink), no apareciera totalmente distorsionada. Había que escribir el título sin esos caracteres y una vez publicado y generada la URL, pues arreglábamos lo que estaba mal escrito.

Como lo de la Ñ, realmente es muy difícil de solucionar a nivel global, nos conformaremos con que se sustituya por una N. Las interrogaciones y admiraciones, directamente desaparecen de la URL y las tildes también.

Una inesperada noticia que he descubierto dándome una vuelta por El extraño mundo de Ro.

Al cambiar de plantilla, en muchas ocasiones desaparecen algunos artilugios de los "de serie". Me refiero a pequeños gadgets de edición, no imprescindibles pero que sí nos hacen la vida más fácil. Es el caso de los cuatro que se explican aquí y que no sé por qué motivo, los que diseñan las plantillas se olvidan frecuentemente de ellos.

Edición rápida de entradas

Este lapicero aparece en cada una de nuestras entradas cuando hemos hecho previamente login. El sistema nos reconoce en ese caso como administradores del blog y añade este icono a cada post. Esa pequeña tontería nos permite acceder directamente a la edición de cada artículo, sin necesidad de tener que ir al Panel de Control --> Creación de entradas --> Editar entradas --> Editar. Lo dicho: nos hace la vida más fácil.

Cuando no disponemos del artilugio, lo primero que hay que hacer es comprobar que está activado y, si no es así, ponerlo en marcha. Esto se marca entrando por Elementos de Página --> Entradas del blog --> Editar (más info en Configurar entradas)

En la parte de abajo de esta ventana, también podemos ver abajo un esquema de los elementos que hemos marcado para ver, así como su distribución dentro del espacio disponible (Ordenar elementos). Cada uno de ellos puede ser reubicado pinchando en el bloque correspondiente y arrastrándolo.

Esto último sólo funcionará en el caso de que no se haya trasteado mucho la plantilla, porque de haberlo hecho, el sistema no encontrará las líneas de código que le permiten reconocer cada elemento y, aunque aparentemente los cambie en esta ventana, en el blog no se conseguirán los cambios deseados.

El código del artilugio es este:


Y el sitio dónde debería estar es justo antes del artilugio que empieza como...


Por tanto, si no lo encontrais, sólo tendeis que insertarlo ahí, antes de este último artilugio. Si lo teneis pero no es igual al que se muestra aquí, pues lo cambiais por este.

Con esto tenemos la utilidad instalada, pero falta colocar una llamada a dicha utilidad en el sitio donde queremos que aparezca el lapicito. Se puede poner en cualquier parte de una entrada, pero lo normal es ponerlo arriba o abajo del todo. Para lo primero, buscamos por ejemplo el título del post y lo ponemos delante (línea en negrita):


Para lo segundo, buscamos el pie del post y lo insertamos dónde nos guste. Por ejemplo, como primer elemento del pie.

---

Edición rápida de gadgets

Este otro icono nos permite editar los artilugios que vamos insertando en nuestro blog. También, igual que antes, es muy práctico para evitar tener que entrar desde el Panel de Control.

En este caso el código es muy sencillo porque sólo se pone la "llamada", sin necesidad de instalar nada más antes. Lo único es que requiere que se ponga artilugio a artilugio.


Para cada gadget en el que no veais el icono de edición rápida, habrá que buscar en la plantilla su código (lo más fácil es buscar por el título del widget) y posteriormente insertar esa línea antes del cierre </b:includable>


Ya está. Este ha sido más fácil ¿no?

---

Borrar comentarios

Otro práctico invento, especialmente útil contra molestos Trolls, lectores groseros o similares.

El código completo del acceso rápido al borrado de comentarios es:


Y el lugar dónde insertarlo es delante de


Como en el primer caso, falta poner una invocación a este código mediante una línea en el apartado de los comentarios (línea a insertar en negrita)

---

Borrar backlinks

Aunque tiene el mismo icono, este cacharro es distinto del anterior y lo que nos permite es borrar los vínculos de retroceso (backlinks) que se muestran normalmente al final de cada post.


El sitio más adecuado donde insertarlo -siempre que no lo tengais ya- es delante del que se explicó en primer lugar en este post. El que comenzaba con <b:includable id='postQuickEdit' var='post'>

Posteriormente, se incluye la llamada en el lugar dónde se muestra a continuación:


Y eso... eso... eso es todo amigos.

Nos preguntan cómo hacer para que al pinchar en una etiqueta, se muestren más de 20 posts, que es la opción por defecto que tenemos en Blogger.

Más concretamente, Guille quería saber cómo mostrar todas las entradas de la misma categoría a un tiempo. Siendo sincero, esto último no me parece muy recomendable y ni siquiera sobrepasar las 20, porque imaginad 50 ó 100 posts seguidos en la misma página.

Aunque quizás, este truco pueda ser muy interesante en algunos casos y especialmente en blogs que trabajan con posts comprimidos o incluso sólo a nivel de títulos en portada y páginas secundarias.

Pues bien, la forma de hacer esto es cambiando -cómo no- el código de nuestra plantilla. El enlace a una etiqueta o categoría, suele aparecer en la forma


La primera etiqueta DATA es realmente una variable que contiene la dirección a la página de las etiquetas. En cada caso, la etiqueta que se esté utilizando en el desarrollo del código y que, como se ha dicho, muestra por defecto 20... o menos si no hay tantos posts en esa etiqueta. La segunda es la que muestra el nombre de la etiqueta.

Sabiendo esto, la del enlace la vamos a sustituir por una expresión que nos permita acceder al mismo sitio, pero pudiendo configurar la cantidad de posts que deseamos ver. Si queremos verlos todos, pues pondremos 500, por ejemplo, o un número superior si es que tenemos más. Lo dicho, una pequeña burrada en la mayoría de formatos...

De esta manera, data:label.url se sustituirá por todo esto:


Una vez cambiado, sólo hay que modificar la cifra (500) por la cantidad que a nosotros nos interese. Evidentemente, podemos poner una cifra inferior a 20 si lo que queremos es el efecto contrario.

Buscad bien dónde teneis vuestras data:label.url, porque se suelen poner en diversos artilugios: al pie o al principio de las entradas, en la barra lateral, en las páginas secundarias...

Pues resulta que aunque nunca antes me había preocupado de este gadget, esto es precisamente lo que se puede conseguir con uno de los que viene de serie con Blogger.

Blogger es de Google y Picasa también, por lo que ¿dónde suponeis que almacena Blogger las imágenes que subís a vuestros blogs? Pues eso. Todos los gráficos que mostrais en ellos pasan a formar parte de los albums de Picasa.

Para instalar el artilugio nos vamos a la pestaña Elementos de Página y en la barra lateral, Añadir un Gadget. Escogemos el gadget Presentación y pinchamos en el símbolo [+]. Ahora en la nueva ventana, debemos teclear:

• Título: El nombre del gadget que se mostrará en nuestra barra lateral.
• Fuente: Aunque en este caso lo que interesa es obtener las imágenes de nuestro albúm Picasa, también podemos conseguir las imágenes de Flickr, Photobucket o cualquier otro servicio que disponga de feed. En este último caso se nos pedirá después dicho feed.
• Opción: Podemos poner cualquier palabra y la presentación nos mostrará las imágenes que contengan esa etiqueta. Sin embargo, como lo que queremos es mostrar nuestras propias imágenes, tendremos que seleccionar Album.
• Nombre de usuario: Nuestro usuario Picasa.
• Album: En el desplegable aparecerán los albums que tenemos en Picasa. Desde que teneis blog con Blogger, automáticamente se han ido generando tantos albums como blogs tengais. Adicionalmente podeis acceder a Picasa y crear un álbum para subir imágenes ajenas al blog. Ahora lo que hacemos es seleccionar el que nos interesa de entre los que salen.
• Abrir enlaces en una ventana nueva: Aunque no se ve en la captura porque lo tapa el desplegable, hay una casilla de verificación para marcar esta posibilidad.

Debajo ya os aparecerá una Vista Previa de la presentación y con Guardar, tendremos el gadget instalado.

Si quereis currar un poco más, podeis acceder a Picasa y entrando en el Album en cuestión, mediante el menú Editar, reorganizar vuestras fotos dentro del album para que se muestren como gusteis. También podeis eliminar las que no querais que se vean en la presentación, pero mucho ojo con lo que borrais porque desaparecerán del todo y las imágenes ya no se mostrarán tampoco en vuestro blog.

Cada albúm también puede ser público o privado, según seleccioneis. La visibilidad os la indica el candadito debajo de cada uno. En Editar-->Propiedades del Album, podeis cambiar su status. Cuando paseis un álbum Privado a Público, no os aparecerá para poderlo seleccionar desde el gadget hasta un tiempo después.

Venga dar vueltas por la Red buscando los iconos que necesito y resulta que en WydBlog, han hecho la mayor recopilación que conozco hasta el momento.

Son dos entradas distintas, pero realmente hay tantos, que no sé si lograrán pronto construir la tercera. Posiblemente sí, porque internet no es infinito pero le falta poco.

Ya no tienes excusa para cambiar un poco tu blog.

Hay un par de problemillas muy habituales con las imágenes. Ambos tienen que ver con el tiempo de carga, aunque se manifiestan por distintas razones. No destrozan una web, pero como son fáciles de solucionar, creo que merece la pena hacerlo.

1. Durante la carga de una imagen muy pesada o con conexiones no muy rápidas, veremos durante unos segundos (o quizás más) el hueco correspondiente en blanco o con la conocida equis roja. Si queremos que mientras termina la carga nuestro visitante sepa que falta algo o, simplemente, que no parezca ser un link roto, podemos utilizar un sencillo truco sin necesidad de utilizar SCRIPTS.

Se trata de diseñar un gif animado que luego colocaremos como fondo para todas las imágenes. Mientras estas no se muestren, en su espacio se verá la animación y cuando se carguen del todo, la imagen final se superpondrá al gif y este será el que deje de verse.

De esta manera, antes del ]]></b:skin> insertamos una línea para asignar una imagen de fondo a las imágenes:


...en donde sustituiremos URL_IMAGEN por la dirección de nuestro gif de aviso de espera o lo que sea.

2. El otro problema surge con los rollovers que manejan dos imágenes distintas. Inicialmente sólo se carga la primera de ellas, la que queremos que se vea en el estado normal. La carga de la otra, se produce con el evento HOVER o ONMOUSE, según la forma en que hayamos diseñado el efecto. Esto provoca que la primera vez que se pasa el puntero por la imagen de marras, el ROLLOVER se ejecuta con una pequeña demora y si se retira rápido el puntero, puede que ni se llegue a apreciar.

Si es la primera vez que visitais esta página y teneis el día tonto con la línea, podreis comprobar como este botón de ejemplo, tarda un poquito en mostrar la segunda imagen. Una vez cargada por primera vez, el efecto ya es instantáneo.

La solución en este caso es conseguir que la segunda imagen se cargue antes de invocarla con el puntero. Así se quedará en la caché y estará disponible desde el principio. El truco en este caso, consiste en crear un estilo "invisible" para una capa y luego solicitar las imágenes pero asignándoles esa clase. La clase la insertaremos antes del </head>:


Posteriormente y después del <body>, cargamos las imágenes con la clase antes definida:


A medida que generemos nuevos ROLLOVERS, tenemos que recordar añadir nuevas líneas IMG con las nuevas segundas imágenes y así siempre funcionarán perfectos.

A instancias de una lectora, una manera sencilla de dar un mejor aspecto a nuestros enlaces de imágenes.


Se trata de crear una clase que muestre la imagen en su formato original y con el evento HOVER, para que cuando pasemos el puntero por encima, esa misma imagen se desplace unos pocos pixels abajo y a la derecha, al tiempo que se atenúa su color, aumentando su transparencia.

Para ello, nos situamos en la plantilla justo antes de ]]></b:skin> e insertamos el siguiente código:


Actualización: Se han incorporado nuevos atributos al código para que la transparencia se ejecute en el mayor número de navegadores posible.

Una vez guardadas las modificaciones y para aplicarlo en las imágenes deseadas, sólo resta añadir la clase rollover a la imagen en cuestión. Las que se muestran al principio del post tienen el siguiente código, en el que se ha marcado lo añadido:


Para hacer un auténtico rollover en el que una imagen es sustituida por otra distinta, ver el anterior post: Botones en movimiento: rollover.

Hace ya varios meses que Blogger incluyó en sus opciones, la posibilidad de incrustar el formulario para realizar comentarios, a continuación de los propios comentarios.

El procedimiento para ello es simple: entramos en el Panel de Control y dentro de la pestaña Comentarios de Configuración, en el tercer lugar encontramos la Ubicación del formulario de Comentarios. Para lo que queremos, la opción que hay que seleccionar es la última, Entrada incrustada a continuación.


Esto en una plantilla original Blogger (o casi original), funciona sin ningún problema, pero en plantillas modificadas como las que seguramente tendrán todos los seguidores de este blog, pues la cosa cambia. Puede que en algún caso llegue incluso a verse el formulario, pero no funciona correctamente.

Para solucionar esto, tras hacer lo que anteriormente se indica, busca la expresión...


Y sustitúyela por esto otro...


Según las plantillas, puede ser que el código que se da como referencia para sustituir, aparezca dos veces. Por tanto con CTRL+F busca todas las veces que puede aparecer ese trozo.

Una de ellas puede estar asociada al artilugio de vínculos de retroceso (<b:includable id='backlinks' var='post'>), pero la que nos interesa es la que se incluye dentro del que tiene la id=comments (<b:includable id='comments' var='post'>)

Más referencias si no se explicó adecuadamente o no termina de funcionar:

• FotoFM.net
• Blogsoluto
• BloggerBuster (en inglés)