mamanunes lo propuso en Twitter e insistió así que no tuve más remedio que ir y verlo risa

Trill, es un proyecto de Cameron McEfee y no es otra cosa que un pequeño pajarito que se asienta al final de nuestra página y permanece allí, siempre visible, esperando que se haga click sobre él para mostrar nuestro último tweet de manera divertida y muy original.

Los archivos necesarios para usarlo se pueden descargar desde la página del autor en formato ZIP pero, para hacerlo más sencillo de utilizar en Blogger, este otro contiene los dos archivos necesarios ya traducidos al español y con las imágenes alojadas en ImageShack.

Para usarlo sin problemas, lo mejor es agregar el contenido del archivo trill.css en la plantilla, lo abrimos con el block de notas y antes de </head> escribimos lo siguiente:
<style type='text/css'> 
/* Y AQUÍ PEGAMOS EL CONTENIDO DEL ARCHIVO TRILL.CSS */
</style> 
Eso, no sólo nos evitará problemas con el alojamiento externo sino que de ese modo, podremos modificar algún detalle para adaptarlo a nuestra plantilla.

Luego, al script en si mismo es mejor agregarlo al final de la plantilla para evitar que un error en Twitter colapase el blog o haga que demore en cargarse. Entonces, antes de </body> ponemos esto:
<script type='text/javascript'>var userName = "nombre_usuario";</script>
<script type='text/javascript'>
//<![CDATA[
/* Y AQUÍ PEGAMOS EL CONTENIDO DEL ARCHIVO TRILL.JS */
//]]>
</script>
Por supuesto, si se quiere alojar en un servidor externo no hay problema, en lugar de eso último colocamos:
<script type='text/javascript'>var userName = "nombre_usuario";</script>
<script type='text/javascript' src='URL_trill.js'></script>
Recordando que en ambos casos, debemos cambiar nombre_usuario por nuestro nombre.

Algunas personalizaciones son posibles, en lugar de ser mostrado al final de la página puede ser ubicado en un sitio específico modificando el script pero, más que nada, los cambios los podemos hacer en el CSS. Por ejemplo, div#trill-shell nos permite modificar las propiedades bottom y right para reubicarlo y el resto de las clases contiene las propiedades de las fuentes de los textos.

En este blog de pruebas se lo puede ver aplicado a una plantilla normal y es perfectamente compatible con cualquier otro script de Twitter.

32 comentarios:

Lagarto  

Como siempre Jmuir a la vanguardia mostrando las novedades, se te agradece, pero este como que no me gusta, me esperare a ver que sacas en el proximo post.

Responder
Claudio - Poca Tinta  

Interesante, veamos y probemos.

Responder
ζχ  

Recientemente e encontrado este blog y me he quedado sorprendido con todo lo que se puede hacer con blogger,excelente blog sigue asi, voy a probar estos consejos para ver si puedo mejorar mi blog

Responder
Anahí  

Este script es más liviano que el otro? Ando en plan de alivianar un poco la plantilla, ¿vio?
Saludos.

Responder
MamaNunes  

:D Oh, profesor! Gracias! Muy lindo este pajarito, ¿no? Me encantó!
besos para ti! ♥

Responder
JMiur  

Lagarto: Noi se le ocurra poner en su blog TODO lo que acá aparece o colapsará :D Por cierto, no espere demasiado de mi :D

Claudi:o Exacto, interesante. Una idea original y bien hecha.

Gracias por el comentario, ζχ

Anahí: De alguna manera, es lo mismo ya que en el caso de Twitter, el tiempo de carga no tiene que ver con los scripts en si mismos sino con el tiempo que tarda cualquiera de ellos en conectarse con el API del servicio. Lo he probado en blogs con varios "cosos" de Twitetr agregados y es más o menos lo mismo siempre y cuando l ocoloquemos al final de la plantilla.

MamaNunes: Te lo debía :D Eso sí, te dejo la traducción al portugués, no vas a tener problemas, son dos o tres textos del script.

Responder
Graciela  

genial JM, el pajarito con el corazón queda muy bueno :)

Responder
Bocha  

JMiur no me andan los comentarios en este blog: www.bocha-93.blogspot.com
Que hago?
No me deja comentar...

Responder
Sol  

Creo que lo uso asi en mi sitio. De todas formas, es algo atractivo para el lector los tweets en el blog-
Abrazos y como siemrpe ud enseñando cosas maravillosas

Responder
Victor E. Ortiz  

Justamente andaba buscando una manera un poco más "discreta" de mostrar un vínculo a Twitter, y esto funciona de maravilla.
Lo he modificado un poquito (porque por los colores de mi plantilla no se veía bien) pero me encanta.

Gracias maestro!
Estaré atento a su próximo post.

Responder
JMiur  

Sol, Graciela: Es divertido :D

Bocha: Vas a tener qe revisar si están los códigos correspondientes ya que esa plantilla tiene muchos años de antigüedad y es probable que no disponga de lo necesario apra los comentarios incrustados o cualquiera de las nuevas alternativas de Blogger ya que en ese tiempo, no existían.

Victor: Pués es verdad, funciona bien sobre fondos oscuros y sino, hay que cambair cosas para adaptarlo un poco.

Responder
BanakaBanaka!!  

Muy bueno, Jmiur, nos lo llevamos a TodoTwitter en cuanto el pajarraco regrese de tierras Canarias, la verdad es que es muy muy original.

Saludos!!

Responder
JMiur  

Adelante Ivan, todo suyo :)

Responder
Marcelo Lemos  

QUE BUENO QUE ESTA!!! creo que lo voy a probar!! :)

Responder
Marcelo Lemos  

es excelente: me puse a jugar con las imágenes y me quedo gustando todavía más... (los cambios que hice más o menos pero la base está) gracias JMiur

marce.lol

Responder
S. C. P.  

Hola JotaEme!
Hola a todos. Muy interesante lo de las posibilidades que tienen las planillas. Pero ando molestando por otra cosa, perdón...

Ando buscando un programa para tontos con el que se pueda modificar (como una fotografía con photoshop) un video.mov. El asunto es así: resulta que estaba mirando una tormenta que grabé con mi cámara de fotos que me devolvió un archivo mov. Lo miraba con el VLC videolan. Es bárbaro. Abro cualquier cosa con él. Y se me ocurrió mirar qué había en las herramientas... Fantástico todo, podía cambiar colores, la gama, el sonido, etc. Pero... no puedo grabar las modificaciones, qué lo parió! ¿Alguien sabe qué se puede usar y dónde me lo bajo de ronga? Es que quedé como envenenada con la posibilidad de jugar con esos videítos... discúlpenme, pero si no pregunto acá, ¿adónde?
saludos!!!

silvia

Responder
JMiur  

Ah, muy bueno, Marcelo. Había problemas con las imágenes sbre fondos claros pero ahí lo has resuelto :D

Responder
JMiur  

S. C. P.: La verdad, no sé. El Dobe Premiere lo hace per es un programa "denso". No se qué otras opciones existen.

Responder
Oloman  

Siento molestar, pero no logro siquiera leer la hoja Google. Después de volverme loco conlas pruebas, para no cambiar mucho, incluso a la celda le he puesto de título TITULOCELDA, por lo que todos los datos reproducidos son reales, incluso la clave del documento.

No he logrado que me mostrara el contenido de la hoja poniendo estas dos cosas. Antes del /head:

<!-- Leer hoja Google Docs -->
<script type='text/javascript'>
//<![CDATA[
<script type='text/javascript'>
function nombreFuncion(json) {
for(i=0; i<json.feed.entry.length;; i++) {
datoleido = json.feed.entry[i].gsx$TITULOCELDA.$t;
document.write(datoleido);
}
}
//]]>
</script>
<script src='http://spreadsheets.google.com/feeds/list/tWsgENxnFahC2YTJIUSp0dw/od6/public/values?alt=json-in-script&amp;callback=/nombreFuncion' type='text/javascript'/>

En una entrada:

<script type="text/javascript">nombreFuncion();</script>

¿Ves fácil dónde he metido la pata?

Responder
Oloman  

Ahora que ha salido el comentario, me di cuenta de que lo hice en el post equivocado :) No sé ni cómo lo hice, sólo sé que por primera vez en mi vida usé la opción de dejar un comentario mediante la ventana modal. En fin... ¿lo reescribo en su sitio?

Responder
JMiur  

Todos los caminos conducen a Roma así que no importa :D

Veo algún error de sintaxis como <script type='text/javascript'> dos veces pero no sési son errores de transcripción así que que escribí esa parte en un archivo TXT para que lo descargues o mires.

El feed de la planilla es accesible y parecen leerse los datos pero, no puedo asegurar si la planilla en si misma está bie; parecería que si; que tiene una columna con cinco filas.

Responder
Graciela Ventimiglia  

Hola! Tanto tiempo :D
Al final WP y yo no hicimos buena pareja y me decidí por Tumblr. Puse este pipí pero quisiera que vaya más arriba porque queda escondido detrás de la barra inferior de Wibiya.
Estuve cambiando algunos parámetros pero no pude subirlo, me ayudás?
La dirección es graciadelcielo.com
Saludos!!!

Responder
JMiur  

Ohhhh ¡que cambio! :D

Lo de Trill es fácil. Pusiste el CSS y ahí, hay una aprte con la que podés controlar la posición. ahora dice algo así:

#trill-bird {
border:0 none;
bottom:2px;
left:90px;
position:absolute;
}

En este caso, bastaría cambiar el valor de bottom. Cuanto más alto sea el valor, más "sube". Calculo que: bottom:40px; es un valor aceptable pero el ajuste es personal.
Lo mismo podés hacer con left para moverlo horizontalmente.

Responder
creeck10  

Hola me pasa algo, cuando intento descargar los archivos que nos pones en español ya con todo en imageshack, me lleva a la pagina de fileden pero al home, osea no me descarga el archivo.
No se si estara roto el enlace o no lo hago bien.
Espero entiendas porque me gustaria aplicar esto a mi blog.
saludos

Responder
La Dueña  

POR FIN LE ENTENDI!!!!:D y por fin me sale!

Gracias por ser tan claro

Responder
La Dueña  

Todo me funciona a la perfección, pero el fondo de mi plantilla es gris y cuesta distinguir al pajarito ¿hay alguna manera de que sea vea mejor el pajarito? Se le puede poner un borde?

Saludos :)

Responder
JMiur  

La Dueña:
Eso es posible. Puedes colocarlo en cualquiera de estas dos definiciones:
#trill-bird {
........
}
.button-init {
........
}
tanto un borde como un color de fondo.

Responder
hasbarah  

JMiur un millón de gracias! Si sigo agregando cosas de tu blog, el de gemma, y la blogería, mi blog va a quedar tan pesado que a menos que tenga 6 megas de conexión a Internet, nadie lo va a poder abrir :D.

Es una tentación irresistible, estoy peor que las gorditas de Cormillot frente a un quiosco de golosinas con todo lo que ofrecés por aquí.
Gracias de nuevo, quedó haaarmoso el pajarito. Sos muy generoso!
Gabriela

Responder
JMiur  

Me alegro que te guste, hasbarah. Pués, eso de lo recargado ... está bien, hay que probar y dejarse llevar por el juego

Responder
El Chiko de Rojo  

Hola:

Ya lo coloque en este blog y no me salen mis twitts... me podrias ayudar!!!

Grax de antemano!!!

David

Responder
El Chiko de Rojo  

Hola de nuevo!!!

ya me funciono :)

Responder
Matsui  

im working on it..
im not really good but im gonna try this crap
maybe trying in portuguese but i will let u know...Ur job is awesome congratulations!!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR