jquery Hover Sub Tag Cloud - Organizar nubes etiquetas agregando sub contenido dentro de ellas.

Javascript, Scripts, Diseño Web

tag-cloud.jpg

Utilizar las nubes de etiquetas correctamente en nuestro sitio sin duda hará que nuestros visitantes logren visualizar fácilmente los principales temas de nuestro blog. Pero he visto en varios blog que las nube de etiquetas se han convertido en una sección con mas de 200 palabras claves, algo que a veces hace que una simple búsqueda de un tema específico se transforme en todo una travesía, es por ello que en estos casos, opto siempre por guiarme directamente por las categorías.
Pero, si en el diseño de nuestro blog hemos optado por dejar de lado las categorías para trabajar de lleno con las nubes de etiquetas como referencia de navegación, pero algo que no hemos prevenido era obtener tantas palabras de referencia, una buena opción será organizar estas etiquetas utilizando en cada una de ellas sub-etiquetas. Diciéndolo de otro modo, utilizar en las nubes de etiquetas un tema central que contenga subtemas relacionados. Algo que a menudo solemos utilizar con las categorías agregando subcatgorias.
Yendo al grano, jquery Hover Sub Tag Cloud será una buena forma de organizar estas etiquetas. Una librería que utilizando jquery nos permitira por un lado reducir o aumentar el tamaño de las palabras claves de la nube de etiquetas, y por otro lado añadir a estas etiquetas una especie de tooltips donde mostraremos los subtemas. Y como es de imaginar, un poco de CSS para personalizar el estilo que deseamos obtener. ver demo

Instalacion:
Descargamos el script jquery Hover Sub Tag Cloud, Y alojaremos los archivos que encontraremos dentro en nuestro servidor.
Y lo segundo que haremos será realizar la llamada correspondientes al script, Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="jquery-1.js"></script>
  2.         <script type="text/javascript" src="hovertip.js"></script>
  3.         <script type="text/javascript">
  4.             // initialize tooltips in a seperate thread
  5.             $(document).ready(function() {
  6.               window.setTimeout(hovertipInit, 1);
  7.              });
  8.         </script>

Junto con ello también agregaremos la llama a la hoja de estilo, con la cual personalizaremos colores, estilo y demás. Archivo que también encontramos dentro de la carpeta.

PLAIN TEXT
CSS:
  1. <style type="text/css" media="all">@import "css.css";</style>

Si le realizamos una pequeña mirada a la hoja d estilo veremos lo fácil que es personalizar los tamaños de nuestras fuentes, las cuales formaran parte de las etiquetas, como así también las imágenes utilizadas en nuestros tooltips.

PLAIN TEXT
CSS:
  1. /* classes for tooltips */
  2.  
  3. .hovertip {
  4.     position: absolute;
  5.     display: none; /* in case javascript is disabled */
  6.     width: 270px;
  7.     height:350px;
  8.     background: url('sub-bg.png') no-repeat;
  9.     font-size: 12px;
  10.     z-index: 100;
  11.     margin-left: 5px;
  12.     margin-top: 10px;
  13.     }
  14. .hovertip_target {
  15.                  font-style: italic;
  16. }
  17.  .hovertip_target:hover {
  18.                         text-decoration: none;
  19.                       cursor:help;
  20. }
  21. .nav, .nav * {
  22.     margin:0;
  23.     padding:0;
  24. }
  25. #cloud{
  26.     float: left;
  27.     position:absolute;
  28.     line-height:1.0;
  29.     background: url('bg.gif') no-repeat;
  30.     width:380px;
  31.     height:333px;
  32.     padding:80px 40px 40px 40px;
  33. }
  34. .nav {
  35.     float: left;
  36.     position:absolute;
  37.     line-height:1.0;
  38.     width:310px;
  39.     height:333px;
  40.     padding:0px;
  41. }
  42. .nav ul {
  43.     width:160px;   
  44.     list-style:none;   
  45.     background:#fff; /*IE6 needs this*/
  46. }
  47. .nav li {
  48.     float: left;
  49.     list-style:none;   
  50.     position:relative;
  51. }
  52. .nav a {
  53.     color: #fff;
  54.     text-decoration:none;
  55.     display:block;
  56. }
  57. .nav li ul {
  58.     left:0;
  59.     top:-999em;
  60.     width: 180px;
  61.     padding-top:50px;
  62.     height:190px;
  63.     background: url('sub-bg.png') no-repeat;
  64.     position:absolute;
  65.     list-style:none;
  66.     z-index:100;
  67.     text-align: center;
  68.     }
  69.  
  70.  
  71. ul.hovertip li {
  72.     display:inline;
  73.     list-style:none;
  74. }
  75. ul.hovertip li a{ text-decoration:none; font-style:italic}
  76. ul.hovertip {width:200px; padding-top:30px; padding-left:10px; height:95px; padding-bottom:20px; display:block}
  77.  
  78. a.size1 {
  79.     font-size:25px;
  80.     padding: 10px;
  81.     color:#804D40;
  82. }
  83. a.size1:hover {
  84.     color:#E13728;
  85. }
  86. a.size2 {
  87.     padding: 7px;
  88.     font-size:20px;
  89.     color:#B9251A;
  90. }
  91. a.size2:hover {
  92.     color:#E13728;
  93. }
  94.  
  95.  
  96. a.size3 {
  97.     padding: 5px;
  98.     font-size:35px;
  99.     color:#C4876A;
  100. }
  101.  
  102. a.size3:hover {
  103.     color:#E13728;
  104. }
  105.  
  106. a.size4 {
  107.     padding: 5px;
  108.     font-size:15px;
  109.     color:#B46A47;
  110. }
  111.  
  112. a.size4:hover {
  113.     color:#E13728;
  114. }
  115.  
  116. a.size5 {
  117.     padding: 5px;
  118.     font-size:25px;
  119.     color:#E13728;
  120. }
  121. a.size5:hover {
  122.     color:#B46A47;
  123. }
  124. a.size6 {
  125.     padding: 0px;
  126.     font-size:12px;
  127.     color:#77625E
  128. }
  129. a.size6:hover {
  130.     color:#E13728;
  131. }
  132. a.size-sub1 {
  133.     padding: 20px;
  134.     font-size:12px;
  135.     color:#804D40;
  136. }
  137. a.size-sub1:hover {
  138.     color:#fff;
  139. }
  140. a.size-sub2 {
  141.     padding: 25px;
  142.     font-size:20px;
  143.     color:#E13728;
  144. }
  145. a.size-sub2:hover {
  146.     color:#fff;
  147. }
  148. a.size-sub3 {
  149.     padding: 10px;
  150.     font-size:18px;
  151.     color:#804D40;
  152. }
  153. a.size-sub3:hover {
  154.     color:#fff;
  155. }
  156. a.size-sub4 {
  157.     padding: 15px;
  158.     font-size:25px;
  159.     color:#fff;
  160. }
  161. a.size-sub4:hover {
  162.     color:#E13728;
  163. }

Y por ultimo la estructura, aquí ya empezaremos a agregar el contenido. Nuestra etiqueta central y las sub-etiquetas dentro de ella. Para de esta forma organizar muy bien todo el contenido de nuestro sitio. Construir una etiqueta que contenga sub-etiquetas, seria algo así.

PLAIN TEXT
HTML:
  1. <div id="cloud">
  2.             <ul class="nav">
  3.            
  4.                 <li>
  5.                     <a class="size1" href="#" id="j1">nombre etiqueta principal</a>
  6.                     <ul style="display: block;" class="hovertip" target="j1">
  7.                         <li><a class="size-sub1" href="#">etiqueta secundaria 1 </a></li>
  8.                         <li><a class="size-sub2" href="#">etiqueta secundaria 2</a></li>
  9.                         <li><a class="size-sub3" href="#">etiqueta secundaria 3</a></li>
  10. etc....
  11.                     </ul>
  12.                 </li>
  13.         
  14.             </ul>
  15.         </div>


La clase class="size1", que puede ser size2, size3, size4, etc. nos permite dar a la etiqueta central un tamaño diferente, para que resalte del resto.

Compartelo

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: