Google+ Insertar una nube de etiquetas html5 3D en blogger. Efecto giratorio. - Miopiblog

miércoles, 26 de diciembre de 2012

Insertar una nube de etiquetas html5 3D en blogger. Efecto giratorio.

Te voy a enseñar como insertar una nube de etiquetas html5 y 3d, en blogger. Es muy sencillo, para colocar la nube de etiquetas en nuestro blog, vamos a usar html5, mientras que para hacer que funcione correctamente, vamos a utilizar javascript. No obstante, vamos a dejar la nube de etiquetas 3d preparada, por si algún navegador no soporta el TagCanvas.

Lo primero que debes hacer para comenzar a insertar una nube de etiquetas html5, giratoria y en 3 dimensiones, en blogger, es hacer click en diseño y seleccionar: agregar un nuevo elemento html. Para seguir con nuestro proceso de insertar una nube de etiquetas 3d, con html5 y javascript, en blogger, personaliza este código cambiando las direcciones web de los enlaces y el texto que se verá en las etiquetas (el texto de color marrón, si quieres puedes dejarlo así para probar y después cambiarlo).



<script type="text/javascript">
      window.onload = function() {
        try {
          TagCanvas.Start('myCanvas','tags',{
            textColour: '#ff0000',
            outlineColour: '#ff00ff',
            reverse: true,
            depth: 0.8,
            maxSpeed: 0.05
          });
        } catch(e) {
          // something went wrong, hide the canvas container
          document.getElementById('myCanvasContainer').style.display = 'none';
        }
      };
    </script>
<script type="text/javascript" src="http://benidormexperineces.comli.com/tagcanvas.min.js"></script>
<div id="myCanvasContainer">
      <canvas width="250" height="250" id="myCanvas">
        <p>Etiquetas:</p>
      </canvas>
    </div>
    <div id="tags">
      <ul>
        <li><a href="Aquí debes escribir la dirección web o ruta del enlace." target="_top">Texto1</a></li>
        <li><a href="http://miopiblog.blogspot.com.es/search/label/css" target="_top">CSS</a></li>
        <li><a href="http://miopiblog.blogspot.com.es/search/label/dise%C3%B1o%20web" target="_top">Diseño web</a></li>
        <li><a href="http://miopiblog.blogspot.com.es/search/label/facebook" target="_top">facebook</a></li>
        <li><a href="http://miopiblog.blogspot.com.es/search/label/google" target="_top">Google</a></li>
      </ul>
    </div>

Ahora, copia y pega el código dentro de la ventana de este nuevo elemento html que vas a añadir al blog, colócalo donde quieres que se vea tu nube de etiquetas 3d y... magia!!!


Jeje!!! esto solo es una imagen. Puedes ver funcionando una nube de etiquetas como esta, en este blog. Echa un vistazo a la columna que queda justo a la derecha de esta entrada.


Si entiendes algo sobre html, desarrollo o programación de sitios web, lo mejor es que incluyas el archivo .js a tu manera. No hay que utilizar necesariamente: "<script type="text/javascript" src="http://benidormexperineces.comli.com/tagcanvas.min.js"></script>", puedes hacerlo tu mismo, subiendo el archivo a otro servidor o al directorio principal de tu sitio web. Además, no te aconsejo que utilices el subdominio "benidormexperineces.comli.com", ya que éste, es de prueba y te puede dejar colgado algún día.
La nube de etiquetas, se puede utilizar con jQuery y hay un plugin para que funcione perfectamente en IE. Es un proyecto de código abierto, y muy interesante, para más información, puedes visitar TagCanvas html5.

Por cierto, hablando de jQuery, ¿sabes ya como empezar a utilizar jQuery en un sitio web?. Otra cosa, que no se te olvide seguirme en las redes sociales : ).




Seguidores (seguir blog)

Me siguen en google plus: