2/06/2011

Nube de etiquetas Flash Blogumus en Blogger


Hace ya un tiempo largo se estaba utilizando en Blogger una adaptación de un gadget de WP que a todos tenía encantado: Blogumus, la nube de etiquetas 3D para Blogger basada en la original Cumulus de Roy Tank,

Lamentablemente todos habían copiado la aplicación de un mismo sitio y por lo tanto habían quedado dependiendo del alojamiento del archivo flash que lo produce.
Una vez que su propietario dio de baja el archivo en su servidor, todos se han quedado de a pie y la nube de etiquetas en movimiento empezó a ser borrada de todos los blogs de Blogger que la tenían en funcionamiento.

Para volver a tener el artilugio deberemos reinstalarlo, o en su defecto si aún conserva el código en su plantilla, sólo tenemos que sustituir en el código original, la dirección del fichero .swf alojado en Halotemplates por otra que sí funcione.

Hoy por hoy, el único sitio gratuito dónde podemos alojar ficheros flash y que funcionen mediante un embebido como el que se requiere, es Google Sites, pero se puede probar en otros.
Teniendo en cuenta esto, y gracias al aporte de Oloman, para reparar el gadget deberemos hacer lo siguiente:
En cambio:
    Para introducir el artilugio desde cero:

    1) Si no tiene habilitadas las Etiquetas, Seleccione "Elementos de página", >> "Añadir un Gadget" y seleccione "Etiquetas".

    2) Luego vaya a > "Diseño"> "Edición de HTML" y haga clic en "Expandir plantillas de artilugios".

    3) Ahora busque esta parte del código:
    (Use "Ctrl F" para acelerar la búsqueda)

    <b:section class='sidebar' id='sidebar' preferred='yes'>

    A veces, esta parte de código puede no estar disponible en algunos templates.Si usted no puede encontrar esta parte de código, trate de encontrar en su reemplazo el siguiente fragmento de código:

    <div class='widget-content'>
        <data:adCode/>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>

    Ahora, inmediatamente después de él, pegue el siguiente código :


    <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'>

    <script src='http://mopheat.site40.net/recources/tagcloud/swfobject.js' type='text/javascript'/>

    <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>

    <script type='text/javascript'>

    var so = new SWFObject("http://mopheat.site40.net/recources/tagcloud/tagcloud.swf", "tagcloud", "240", "200", "7", "#e1ecfe");

    // uncomment next line to enable transparency

    //so.addParam("wmode", "transparent");

    so.addVariable("tcolor", "0x0000ff");

    so.addVariable("mode", "tags");

    so.addVariable("distr", "true");

    so.addVariable("tspeed", "100");

    so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

    so.addParam("allowScriptAccess", "always");

    so.write("flashcontent");

    </script>

    <b:include name='quickedit'/>

    </div>

    </b:includable>

    </b:widget>


    Haga ahora una vista previa del template.Si todo fue según lo previsto, verá la nube de etiquetas funcionando en su barra lateral. Guarde la plantilla y podrá continuar con algunas personalizaciones para que el artilugio vaya de acuerdo al estilo de su blog.

    Funciones personalizables:

    Por defecto, el código viene con las siguientes características:
    Ancho se establece en 240 px;
    Altura se fija a 200 px;
    Color de fondo es # e1ecfe
    Color del texto es de color azul (# 0000FF)
    Fuentes es de 12 px

    Veamos cómo adaptarlo:

    1) Para ajustar la altura y ancho:

    var so = new SWFObject(&quot;http://mopheat.site40.net/recources/tagcloud/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;200&quot;, &quot;7&quot;, &quot;#e1ecfe&quot;);

    Aquí 200 corresponde a la altura, 240 corresponde el ancho y # e1ecfe corresponde al actual color de fondo. Cámbielos por los de su elección

    2) Cambiar el color de fuentes:

    so.addVariable(&quot;tcolor&quot;, &quot;0x0000ff&quot;);

    0000FF Reemplacelo con  el código de color HTML adecuado para su fuente. Se trata de flash y debe usar colores en código hexadecimal, no usar nombres de colores.

    3)Ajustar el tamaño de las fuentes:

    so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);

    Aquí se puede ajustar el tamaño de la fuente cambiando el valor 12 por el de su elección. En cualquier caso asegúrese de obtener una vista previa de la plantilla para asegurarse de que las cosas están en orden.

    Para colocar el fondo transparente deberá retirar las barras paralelas de comentario en la siguiente parte de código:

    //so.addParam("wmode", "transparent");
      quedándo de la siguiente forma:

    so.addParam("wmode", "transparent");
     
     
    Si todo marchó bien, usted ya tiene la nube funcionando y solo debe asegurarse de guardar el archivo .SWF para que no nos pesquen distraídos una vez más.


    Para los fanáticos de este efecto, les aviso que también se puede hacer una nube de fotografías o una nube de enlaces. Todo un cielo nublado para explorar


    3 comentarios:

    1. Hola,muchas gracias por subir esta entrada, me encanta la nube y cada cierto tiempo se me desactiva, y he podido volver a subirla.
      De todos modos, no consigo dos pequeños detalles, que quizás tú sabría como solventar, uno es que el fondo sea transparente y otro que las letras sean blancas.

      Si puedes echarme una mano, mil gracias.

      ResponderEliminar
    2. Hola Pilar. Entiendo tu dilema y te cuento que yo también me he sentido algo molesto con los problemas de esta nube.
      Uno de los problemas que presenta y es molesto es que no acepta ningún caracter de texto de lengua hispana. Si tienes etiquetas con Ñ o tilde no direccionará correctamente.
      El otro problema es no poder manejar el fondo transparente.
      Claro, si tu blog usa muchas etiquetas es agradable que este gadget las maneje automáticamente.
      Pero para evitar estos problemas yo recomiendo utilizar el gadget que puedes ver al inicio del post que es más simple y se puede personalizar más facilmente.
      Podrás ver un post explicando su forma de instalación en unas pocas horas.

      ResponderEliminar
    3. Pilar. Si lo que ha visto en el nuevo post no le agrada y prefiere mantener el Blogumus automático, para que sea transparente debe ir a la línea:

      //so.addParam("wmode", "transparent");

      y borrarle las dos // barras paralelas.
      De ese modo la línea quedará así:

      so.addParam("wmode", "transparent");

      El color de las letras se modifica en:

      so.addVariable("tcolor", "0x0000ff");

      donde 0000ff corresponde al código HTML del color azul. Busque en la red Colores en HTML y podrá ver el código de aquél que usted desea colocar en su blog.

      Cariños.

      ResponderEliminar

    Nota: solo los miembros de este blog pueden publicar comentarios.