Cómo poner el pájaro volador de twitter en Blogger.


Hoy en Tu Amigo el Informático, daremos respuesta a la pregunta que nos planteaba una amiga bloguera, sobre cómo poner el pájaro volador de twitter en Blogger y que nos parece interesante para todos los que tengáis un blog y os apetezca hacer que el acceso a Twitter sea mas graciosete.

La forma para insertarlo en Blogger que nosotros hemos seguido, y que nos parece asequible para todos es la siguiente:

1º.- Subir el Sprite (imágenes del pájaro) que os dejamos más abajo a vuestro servidor de fotos del blog, que para Blogger por defecto es Fotos antigüo Picassa.

Alguno de vosotros estará pensando ¿Sprite?, si eso es lo que yo me tomo con los Whiskys. Pués bien,  aparte de aliñar las bebidas espirituosas, un Sprite consiste en una serie de imágenes correlativas y unidas en un sólo archivo que representan las distintas posiciones que puede adoptar un personaje u objeto animado.

Aclarados los términos, el procedimiento para subirlo al servidor es el siguiente:

1.1.- Pulsaremos con el botón derecho del ratón sobre la imagen de abajo y buscaremos la opción que nos permita guardarla en nuestro Pc.


Sprite Twitter
Sprite pájaro de Twitter.
 
1.2.- Una vez guardada en el Pc, abriremos la aplicación Fotos de Google y pulsaremos en Subir foto, que iniciará el proceso habitual para subir cualquier imagen al servidor. 


Picassa Fotos
Subir foto.
Ahora que tenemos nuestra imagen en el servidor podemos seguir con el segundo paso.

2º.- Dentro de la consola de administración del blog, pulsaremos en Diseño - Añadir un Gadget - HTML/Javascript. Podremos ubicar el Gadget donde queramos porque no afecta al resultado.


Javascript twitter
Insertar un HTML/Javascript

3º.- Una vez disponemos de la página del HTML/JAVASCRIPT, copiaremos dentro de la misma el siguiente código:


<script src="http://plantillasgratis.comuv.com/disemucho/pajaro_twitter_navidad/twitter/disemucho.js" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[
        var birdSprite='Poner la ruta al sprite que habéis subido a vuestro servidor de fotos';
        var targetElems=new Array('img','hr','table','td','div','input','textarea','button',

'select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');
        var twitterAccount = 'https://twitter.com/vuestra cuenta de Twitter';
        var twitterThisText ='Sigueme en Twitter';
        tripleflapInit();
//]]>
</script>

No os preocupéis por el texto marcado con colores, porque al copiarlo y pegarlo en el contenedor desaparecen.




Una vez lo tenemos en el contenedor HTML/JAVASCRIPT  haremos una serie de correcciones en el código para que funcione correctamente.

El texto que os marcamos en rojo: "http://plantillasgratis.comuv.com/disemucho/pajaro_twitter_navidad/twitter/disemucho.js", nos indica la ruta del javascript que permite los movimientos del pájaro. Por sencillez, usaremos una ruta que ya contiene el script en un servidor y que dejaremos tal cual sin cambiar nada. Aunque lo óptimo y seguro, sería descargarse el archivo que contiene el código y subirlo a nuestro Drive, para que de esta manera nosotros controlemos el alojamiento del mismo.

Respecto al código marcado en color azul: 'Poner la ruta al sprite que habéis subido a vuestro servidor de fotos' corresponde a la ubicación de nuestro Sprite. Aquí deberemos pegar entre las comas, la ruta que da acceso a la imagen subida al servidor en el punto 1º.

Para obtener la ruta de la imagen subida a Fotos, existen varios procedimientos en función del navegador que uséis:


Si usamos Firefox o Chrome : Pulsaremos con el botón derecho sobre la imagen (Sprite del pájaro) y seleccionaremos Copiar la ruta de la imagen en Firefox o Copiar URL de la imagen en Chrome.


URL imagen
Obtener ruta a la imagen Firefox y Chrome.

Si usamos Internet Explorer: Pulsaremos con el botón derecho sobre la imagen (Sprite del pájaro) y seleccionaremos Propiedades. Esto nos abre una ventana y copiaremos la ruta que aparece en la etiqueta Dirección (URL).

URL imagen desde Explorer
Obtener ruta con Internet Explorer.



Finalmente el texto en naranja: 'https://twitter.com/vuestra cuenta de Twitter' es la parte del código que da acceso a Twitter y que deberemos modificar con la dirección de nuestra cuenta.

Para completar todo el proceso pulsaremos en guardar y listo, ¡a volar el pájaro!.



Introduce tu correo:


Y recibe nuestras entradas en tu email

2 comentarios: