Blogumus para cualquier tipo de enlace | Oloblogger Actualización Octubre 2012 Para poner fin a los problemas con Blogumus, recomendamos leer directamente esta entrada: Nube de etiqutas 3D: ...

19 de marzo de 2009

Blogumus para cualquier tipo de enlace

Actualización Octubre 2012


Para poner fin a los problemas con Blogumus, recomendamos leer directamente esta entrada:
Nube de etiqutas 3D: Blogumus sigue funcionando.

A ver... si podemos usar el flash Blogumus para hacer una nube de etiquetas 3D de nuestro blog ¿por qué no usar el mismo sistema para otro tipo de enlaces?

Una ventajilla es que como ya no vamos a utilizar las etiquetas de nuestro blog, tampoco es necesaria la parte del código que define este artilugio cómo widget de Blogger. Si se utiliza de esta otra manera, lo podremos agregar sin problemas desde Elementos de Página sin tener que acceder a la plantilla.

Como la presentación de este artilugio en Oloblogger se convirtió en un confuso post lleno de actualizaciones, reproducimos ahora el código fetén para etiquetas. Todo esto hay que insertarlo justo después de <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

&lt;object type="application/x-shockwave-flash" data="http://www.swfcabin.com/swf-files/1411057468.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://www.swfcabin.com/swf-files/1411057468.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=false&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>

&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;

</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>



Hasta aquí era lo que hacíamos normalmente. Ahora vamos a convertir este widget en una nube de enlaces simple. En primer lugar quitamos las líneas en gris, que son las que sirven para generar el widget en la plantilla. Luego eliminamos la parte en verde es la que genera las etiquetas y, por último insertamos en ese mismo sitio los enlaces que queremos poner.

El código resultante sería cómo este. En lugar de acceder por la plantilla como hacíamos en el primercaso, nos vamos a Elementos de Página, y creamos un Nuevo Elemento HTML. En él se copia este código:

<object type="application/x-shockwave-flash" data="http://www.swfcabin.com/swf-files/1411057468.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://www.swfcabin.com/swf-files/1411057468.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=false&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

&lt;a href='URL_1' style='12'&gt;ENLACE_1&lt;/a&gt;
&lt;a href='URL_2' style='12'&gt;ENLACE_2&lt;/a&gt;
&lt;a href='URL_3' style='12'&gt;ENLACE_3&lt;/a&gt;

&lt;/tags&gt;" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a&gt;</p>
</object>

Todo lo que está en negrita son los enlaces. Sólo tienes que sustituir URL_X y ENLACE_X por las direcciones y palabras correspondientes a tus enlaces, colocando tantas líneas de enlace como quieras mostrar. Con eso el artilugio funciona como blogroll, como enlaces recomendados, para colocar a vuestros amigos, para intercambiar links...

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

74 comentarios :

  1. muy bonito,a mi tambien se me ocurrio, pero no sabia como hacerlo,¿y si los enlaces quiero hacerlos con imagenes?,¿podrias aclarmelo por favor?.

    ResponderEliminar
  2. Hola Juan José. Creo que no te voy a poder aclarar nada, porque lo he intentado y no he podido mostrar imágenes

    Hay otro widget para eso, pero sólo para imágenes basadas en un feed. No he sido capaz de transformarlo para conseguir lo que quieres.

    ResponderEliminar
  3. Funciona muy bien y queda bonito, también. Y para que sea transparente? Qué hay que cambiar?
    Muchas gracias!

    ResponderEliminar
  4. Hola Enrique

    <param name="bgcolor" value="#ffffff" />
    El valor de BGCOLOR define el color de fondo. Si pones el mismo que tenga tu página, simulará transparencia.

    Otra opción sería insertar después de esa misma línea
    <param name="wmode" value="transparent" />
    No lo he comprobado pero creo que con esto último el flash se quedará translúcido.

    ResponderEliminar
  5. Oloman, mi comentario no salió??
    Ayer te preguntaba cómo hacer?, ya que cuando colocaba el código en un HTML, se deformaba y no salía en la página. Cuando lo trataba de editar estaba todo cambiado.
    Saludos

    ResponderEliminar
  6. Hola Luz.

    "Deformado" no creo, desordenado quizás sí. Acabo de volver a hacer la prueba y el código es correcto para copipastear.

    Que lo reordene es más o menos normal, porque Blogger hace eso con el código que no le gusta mucho.

    ResponderEliminar
  7. Jo, estás en todo eh? muchisimas gracias, era justo lo que quería, ahora mismo lo estoy personalizando, a ver si me da tiempo a acabarlo hoy.
    En este blog me quedo, estoy aprendiendo muchísimo y la atención es de primera.
    Muchas gracias Oloman!

    ResponderEliminar
  8. 2º msj! menos mal que me fijé porque no salió el anterior!!

    bue Oloman, jaja igual es que no sale el truco!!le modifique lo de los creditos al final, los saqué y a cada enlace le puse el target blank. Será por eso??

    ResponderEliminar
  9. No sé Luz, pero es importante que si añades código, en la parte central (donde los enlaces), tengas en cuenta que no puedes usar < ni > ni ". Tienen que ser sustituidos respectivamente por &lt; - &gt; - &quot; para que el código funcione en Blogger.

    ResponderEliminar
  10. Ahhh oki,el target lo ponía así: target="blank", le voy a cambiar las " por " luego te comento si sale!
    Gracias Oloman!!

    ResponderEliminar
  11. Uy no jala el tip.

    Si se ve muy bien pero al momento de darle click simplemente no pasa nada.

    ResponderEliminar
  12. Hola Yop. Podrás comprobar que en la nube del ejemplo, sí funcionan los enlaces.

    Como le dije a Luz, hay que tener mucho cuidado con la parte del código en la que no se debe poner < y >, sino su códigos correspondientes: &lt; y &gt;

    Ahí, además, las comillas siempre simples.

    ResponderEliminar
  13. Si, ya vi que jalan en tu blog, ya chequé todo y está bien.

    En mi blog se ve muy bien pero no sirve, es decir, al hora de hacer click en algún enlace simplemente no pasa nada.

    Aclaro, solo he agregado todo el texto que pones además de modificar los URL y Enlaces, esto lo hice en un nuevo gadget, se necesita una cosa a parte de eso?

    Gracias por estar siempre atento a nosotros.

    ResponderEliminar
  14. Fácil y muyyyyyyy útil :-D muy buen truco Oloman! :-D

    ResponderEliminar
  15. Hola quiero adicionar que para los que ya tienen Blogumus en su Blog lo tiene que agregar es elemento de Html/Javascript y luego insertar el ultimo código de esta entrada y editar el tamaño y los links.

    Felicidades por la idea yo soy fanático de Roy Tanck, uso casi todo lo que publica es un genio! también reviso lo que publica Amanda Fazani que hace unas buenas adaptaciones a Blogger! este es mi blog:

    http://cambios-visuales.blogspot.com/

    ResponderEliminar
  16. Yop, lo siento mucho, pero no se me ocurre que más decirte si ya has hecho todo lo comentado. Además, tu nick aparece sin enlace y no recuerdo la dirección de tu blog.

    Jaime y Cambios, gracias por los piropos y aportaciones... respectivamente.

    ResponderEliminar
  17. Gracias de todas maneras, de hecho tuve que borra mi blog así que ya no pasa nada.

    Saludos.

    ResponderEliminar
  18. HOLA OLOMAN COMO ESTAS TANTO TIEMPO.. QUISIERA PEDIR TU AYUDA DE UNA MANERA ESPECIAL... BUENO ME MANDE A PONER UNAS PLANTILLAS QUE FUERON ADAPTADAS PARA BLOGGER.. MUY BUENAS.. Y TENGO UN PROBLEMA QUE ME GUSTARIA SABER SI PODES AYUDARME CON ESO.. RESULTA QUE MIS PLANTILLAS TENIAN COMO UNA MARQUESISA SI VES EN EL PRIMER BLOG.. WWW.BIBLIAABIERTAMENDOZA.BLOGSPOT.COM....ESTA PERO NO FUNCIONA AHORA Y NO SE PORQUE YO LA SAQUE DE PLANTILLAS BLOGGER AL IGUAL QUE UN MENU QUE TRAE PDIVIDIDO QUE NO SE COMO SE LE LLAMA A ESO QUE DEBERIA APARECER AL COSTADO DONDE ESTAN LOS VIDEOS..Y NO APARECE.. OSEA ESTO APARE4CE Y EN ALGUN MONMENTO NO IGUAL QUE LA MARQUESINA DE ARRIBA.. QUISIERA SABER SI ME PODES AYUDAR.. TE LO AGRADECERE.. BUENO Y POR ULTIMO LO MISMO CON MI OTRO BLOG... WWW.AFANYFATIGA.BLOGSPOT.COM... BUENO AHI LA MARQUESINA DE ADELANTE TENDRIA QUE PASAR TAMBIEN Y NO LO HACE.... LO MISMO.. QUE ES LO QUE SUCEDE.. ME AYUDAS PORFI..GRACIAS.. ESPERO QUE ME HALLA EXPLICADO...!!!! UN ABRAZO... elimarch2002@hotmail.com.. muy buena tu web me saca siempre de apuros...mil gracias...lizi chewet

    ResponderEliminar
  19. Hola. La verdad es que estado echando un vistazo a esa plantilla y es bastante complicada para mí. Tiene varios scripts y muchas clases. En verdad que he intentado ver si podía tener una solución fácil, pero no la he visto. Lo siento.

    ResponderEliminar
  20. Muchas gracias man, me resultó esto de inmediato :D

    Saludos!!!

    ResponderEliminar
  21. Es una maginifica aportacion, yo ya usaba la nube de tags pero la nube de enlaces me va a servir muy bien para mi pagina principal

    Gracias

    ResponderEliminar
  22. Genial!

    Esta loko, estaba buscandolo desde hace tiempo, y cuando lo encontre era eclusivo para blog, gracias, ahora si puedo incrustarlo a mi web

    ResponderEliminar
  23. Para los que quieren poner fotos, creo que la solución sería, (aclaro que no lo he probado), subir la foto que queramos poner a un hots, y luego copiar el link que no genere ese host, es una teoría que se me acaba de ocurrir, bueno ese sería mi humilde aporte, gracias a todos, sobre todo al creador de este blog, que nos es tan útil

    ResponderEliminar
  24. Radiolatina, gracias por la idea, aunque hace tiempo ya intenté probar eso y no funcionaba. Sí con enlaces normales, pero no con enlaces a imágenes.

    De todas formas para Flickr, Picasa y supongo que con cualquier otro hosting de imágenes que tenga feed, la cosa ya está desarrollada y funcionando: Blogumus para fotos>

    ResponderEliminar
  25. Genial !!!

    Muchas gracias !!

    Después de mucho buscar por la red me habeis ayudado. Las nubes de etiquetas están por todos lados pero convertirla en nube de enlaces es más complicado de encotrar.

    Muchas gracias de nuevo !!!

    ResponderEliminar
  26. :) Encantado de servirte de ayuda.

    ResponderEliminar
  27. Hola,
    Yo he creado la nube de etiquetas y funciona pero al cabo de un par de días deja de funcionar. La borro y vuelvo a hacerlo y de nuevo pasa lo mismo.

    El blog es http://par-54.blogspot.com/

    puedes ver que puede pasar??
    Muchas gracias

    ResponderEliminar
  28. No Par54. Lo siento no puedo ver qué pasa porque ahora mismo funciona. Y lo peor es que aunque no lo hiciera, no sabría el por qué de ese comportamiento tan extraño. Es el primer caso que oig... leo y no se me ocurre ningún motivo. Bueno, sólo uno, y es que después de reinstalarlo hagas alguna otra modificación que afecte al código de la nube.

    ResponderEliminar
  29. hola oloman intento ponerlo en mi blog pero cuando pincho el enlace no sale nada a ver si me puedes ayudar
    Gracias
    <a href='http://xiroko-marbella2.blogspot.com/2009/12/blog-post_30.html' style='12'>Ver futbol online</a>

    ResponderEliminar
  30. El problema es del script, Xiroko, que no funciona bien en Internet Explorer. Por ejemplo en Firefox, si te funciona.

    Puedes probar con esta solución que se me ocurrió para que funcione en todos los navegadores. Hay que hacer los enlaces a mano, pero al menos funciona.

    ResponderEliminar
  31. Muchas gracias Oloman por tu gran ayuda eres una maquina ,esto ahora va perfecto.
    Tambien te he agregado a mi enlace de blog amig@s
    Gracias

    ResponderEliminar
  32. Por favor ayuda!!! no encuentro ese codigo por ningun lado en mi plantilla, mi plantilla se llama Magnolia Orange.

    ResponderEliminar
  33. Quizás en tu caso la referencia sea algo así:
    <b:section class='colum' id='sidebar'...

    ResponderEliminar
  34. Hola Oloman.
    Te quría preguntar sobre uno de los parámetros que modifican la apariencia de la nube, distr=false , veo que eres el único que lo deja en FALSE y he comprobado que dejándolo en TRUE se pierde al menos una etiqueta. Lo has probado ? se puede solucionar ?
    Saludos !

    ResponderEliminar
  35. Precisamente por eso lo dejé en FALSE. No sé por qué sucede así, pero con TRUE, efectivamente, desaparece una etiqueta (además de forma aleatoria) y no conozco forma de arreglar eso.

    Creo que ese parámetro sirve sólo para hacer una DISTRibución uniforme de las etiquetas por la nube y esto es especialmente visible cuando hay menos de cinco. Pero cuando hay unas cuantas más, mi impresión es que deja de ser necesario y que se puede sacrificar esa distribución a cambio de que no desaparezcan etiquetas.

    ResponderEliminar
  36. Olgman, sabes si el archivo tagcloud.swf al que se hace referencia esta actualizado ? ya que me baje de la pagina del creador la ultima versión, la subí a mi cuenta de skydrive, hice referencia a ese arch y ahora hace correctamente la distribución uniforme

    ResponderEliminar
  37. Lo desconozco, pero si dices que funciona, pues debe ser que sí :)

    ResponderEliminar
  38. Entonces la referencia que usas en tu código :

    http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf

    puede estar desactualizada.....

    ResponderEliminar
  39. ¿De dónde lo descargaste tú? Si fue de esa misma dirección, entonces la referencia sigue siendo válida, porque quiere decir que simplemente actualizaron el fichero. Si fue de otra, entonces dímelo para que cambie la dirección.

    ResponderEliminar
  40. Yo baje el arch de :

    http://downloads.wordpress.org/plugin/wp-cumulus.1.23.zip

    y lo subí a mi cuenta personal de skydrive

    ResponderEliminar
  41. Wenas Olgman, te comento que no sirve subirlo a skydrive, ya que este tipo de archivos (.swf) los cambian de ruta diariamente. Se te ocurre alguna solución ?
    Abrazo !

    ResponderEliminar
  42. Lo cierto es que me extrañó que en Skydrive te funcionara, pero como todo va cambiando...

    Soluciones para alojar los scripts:
    - http://banakabanaka.blogspot.com/2009/03/buscando-espacio-para-alojar-los.html
    - http://vagabundia.blogspot.com/2008/08/alternativas-para-utilizar-scripts-en_21.html
    - http://gemablog-.blogspot.com/2009/03/problemas-soluciones-y-alternaticas-con.html

    Y el caso concreto de Blogumus (Cumulus):
    - http://vagabundia.blogspot.com/2008/08/cumulus-haciendo-girar-las-etiquetas.html

    ResponderEliminar
  43. Yeah ! ahora si !
    Me funcionó haciendo una cuenta en Google Site, ahí colgué el .swf y listo :D

    Muchas gracias por la ayuda

    ResponderEliminar
  44. Me parece la nube de tags mejor del mundo...
    lo unico un poco complicada de instalar para un profano de la informática como yo....


    Estudio Arquitectura RF

    ResponderEliminar
  45. No es complicado Eduardo. Sólo tienes que seguir los pasos indicados.

    ResponderEliminar
  46. Hola Amigo
    Quisiera poner una nube de palabras animada en mi blog (Blogger)pero no quiero que sean enlace a ningún sitio. Quiero lograr simplemente "palabras en movimiento".
    ¿Cómo podría hacer esto?
    Desde ya muchísimas gracias!
    Adrián

    ResponderEliminar
  47. Hola.
    Tendrías que usar el segundo código, modificando lo siguiente:
    - Enlace1, Enlace2, etc., los cambias; cada uno por cada una de las PALABRAS que quieres
    - URL_1, URL_2, etc. también hay que cambiarlos, pero en tu caso, todos por lo mismo: javascript:void(0);

    Eso último es un enlace vacío. No pasará nada cuando se pinche.

    ResponderEliminar
  48. Muchas gracias Oloman! Ahora me pongo a probarlo!
    Saludos!

    ResponderEliminar
  49. Maestro "O".
    He probado "de todo"para colocar la nube (en mi caso sin que enlacen a ningún sitio, simplemente palabras en movimiento)y no lo he logrado aún.
    He copiado el segundo código tal cual como aparece en esta página y reemplazado los Enlaces por palabras y las URL por javascript:void(0); y no me ha funcionado.(solo me queda una ventana negra con las palabras fijas una debajo de otra)
    Por favor, podrías dejarme un ejemplo aquí de lo que quiero lograr, para ver y comparar que estaría haciendo mal?
    Muchísimas gracias otra vez.
    Adrián

    ResponderEliminar
  50. LenguajesCAD, pensaba que ya habías visto este post, pero supongo que no. Hubo un problema con el flash que genera esa nube y lo primero que hay que hacer es alojarlo uno mismo. Luego ya haces esto.

    ResponderEliminar
  51. Para las imégenes, recomiendo esta herramienta que permite mostrar las fotos de Flickr www.roytanck.com/get-my-flickr-widget/

    ResponderEliminar
  52. Gracias por recordarlo Ivon

    ResponderEliminar
  53. Perdón, sugerí el widget de Flickr y vi que tenías todo un post explicándolo. Muy bueno todo lo que compartís. Incorporaré tu blog en mi blogrooll. Gracias

    ResponderEliminar
  54. Gracias Ivon y no problemo con lo de Flickr. Es imposible que conozcas todo lo que se hablado aquí. Un saludo.

    ResponderEliminar
  55. Hola, busqué por todos lados como hacer la nube de tags -simplemente de tags, no de links-.
    No encuentro en mi plantilla el primer código, ví que a mucha gente le pasó lo mismo pero lo que le contestaron es que lo busquen con una o dos comillas.
    ¡No me funciona con " ni con '!
    Ojalá me puedan ayudar, mi blog es renacuajotripolar.blogspot.com
    Gracias.

    ResponderEliminar
  56. La nube de tags en su versión original da problemas. Lee esta entrada que es la última que he hecho sobre el tema. Una vez clara la cosa, al final de ella encontraras un link sobre cómo instalarla para luego poder reparar el bug. Hay más posts, pero el del link es el buno, ya que esta nube ha dado mucha guerra.

    http://oloblogger.blogspot.com/2010/03/reparar-blogumus-otra-vez.html

    ResponderEliminar
  57. hola que tal ya consegui hacer girar las url's pero no funcionan como links, solo son textos girando, me gustaria me ayudaras a que sean links.

    ResponderEliminar
  58. hola yo otra vez, disculpa las molestias ya resolvi el problema, solo le agregue la ruta desde http://sitio

    ResponderEliminar
  59. hola que tal, me gustaria me dijeras, si es posible que la nube este girando siempre.

    Muy buen blog, muy interesante.

    ResponderEliminar
  60. Phanter, me alegro de que hayas podido resolver tus problemas porque yo no pude contestarte antes. Sobre lo de la nube girando siempre, no, no es posible. Al menos hasta dónde yo sé. Saludos.

    ResponderEliminar
  61. Hola,

    Gracias por escribir estas útiles entradas que me facinan. Olaman sos un bravo.
    Quiero preguntarte algo ¿Como le hago para crear un enlace, dentro de este hermoso efecto, que abra en una pagina aparte?

    Gracias...

    ResponderEliminar
  62. Buenas Carlos puedes probar a añadir a los enlaces un target='_blank' y ya me dices si funciona. No hay otro sistema que yo sepa, pero tampoco sé si en este gadget funcionará eso.

    <a target='_blank' href='URL_1' style='12'>ENLACE_1</a>

    ResponderEliminar
  63. Hola!... estaba buscando como hacer esto y encontré tu página.. pero tengo un problema, en la edición HTML no me aparece esta linea: ... ¿Qué puedo hacer?...
    Gracias!

    ResponderEliminar
  64. ¿Qué línea es la que no te aparece Anita Parada?

    ResponderEliminar
  65. Utiliza esta utilidad para que el código que pegues aquí no se interprete, Anita:
    http://nosetup.org/php_on_line/convertir_html_texto

    ResponderEliminar
  66. Perdon por demorar tanto en responder... no había pasado por aqui... es este el codigo:
    <b:section class='sidebar' id='sidebar' preferred='yes'> (el primero que nombras en la publicación).... gracias

    ResponderEliminar
  67. Anita hay un truco para no tener que estar entrando buscando respuestas y es que pinches en "Suscripción por correo electrónico". Cuando haya un mensaje nuevo en la entrada dónde selecciones eso, automáticamente te llegará un mensaje de aviso de respuesta a tu correo.

    Sobre la línea que dices que no te aparece, es porque usas plantillas de las del nuevo diseñador y ahí es todo distinto. Tendrás que buscar algo parecido pero que incluye un id='sidebar-left-1'

    ResponderEliminar
  68. Lo de la suscripción a los comentarios fue un descuido, crei que si lo había puesto y se me pasó.
    La linea que me dices si la tengo, gracias otra vez, ya lo voy a probar...

    ResponderEliminar
  69. El archivo swf que has puesto no funciona. El codigo correcto es este

    ResponderEliminar
    Respuestas
    1. Me parece que tampoco, pero si lo necesitas puedes pasarte por el enlace de la actualización que recientemente incluí en la entrada.

      Eliminar