Rincón Uniciencista
  • Inicio
  • Índice
  1. Principal
  2. Trucos
  3. Nube de etiquetas en Blogger

Nube de etiquetas en Blogger

Publicado por Gfrodriguez el octubre 10, 2021
Trucos

Implementando el desarrollo de Alvaro Montoro podemos tener una muy bonita nube de etiquetas para nuestro Blogger, para lograrlo debemos reemplazar el siguiente código de nuestra plantilla:

<b:includable id='cloud'>
  <b:loop values='data:labels' var='label'>
    <span class='label-size'>
      <b:class expr:name='"label-size-" + data:label.cssSize'/>
      <a class='label-name' expr:href='data:label.url'>
        <data:label.name/>
        <b:if cond='data:this.showFreqNumbers'>
          <span class='label-count'><data:label.count/></span>
        </b:if>
      </a>
    </span>
  </b:loop>
</b:includable>

Con este código que personalicé de acuerdo al trabajo de Alvaro:

<b:includable id='cloud'>
    <ul class='cloud'>
      <b:loop values='data:labels' var='label'>
        <li>
          <a expr:data-weight='data:label.cssSize' expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?&max-results=5"' expr:title='data:label.name'>
            <data:label.name/>
            <b:if cond='data:this.showFreqNumbers'>
              <span class='label-count'><data:label.count/></span>
            </b:if>
          </a>
        </li>
      </b:loop>
    </ul>
</b:includable>

Agregamos el siguiente código CSS para que se formen las nubes:

ul.cloud {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 1.5rem;
}

ul.cloud a {
  /*   
  Not supported by any browser at the moment :(
  --size: attr(data-weight number); 
  */
  --size: 4;
  --color: #a33;
  color: var(--color);
  font-size: calc(var(--size) * 0.25rem + 0.5rem);
  display: block;
  padding: 0.125rem 0.25rem;
  position: relative;
  text-decoration: none;
  /* 
  For different tones of a single color
  opacity: calc((15 - (9 - var(--size))) / 15); 
  */
}

ul.cloud a[data-weight="1"] { --size: 2; }
ul.cloud a[data-weight="2"] { --size: 3; }
ul.cloud a[data-weight="3"] { --size: 4; }
ul.cloud a[data-weight="4"] { --size: 5; }
ul.cloud a[data-weight="5"] { --size: 6; }

ul[data-show-value] a::after {
  content: " (" attr(data-weight) ")";
  font-size: 1rem;
}

ul.cloud li:nth-child(2n+1) a { --color: #181; }
ul.cloud li:nth-child(3n+1) a { --color: #33a; }
ul.cloud li:nth-child(4n+1) a { --color: #c38; }

ul.cloud a:focus {
  outline: 1px dashed;
}

ul.cloud a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: var(--color);
  transform: translate(-50%, 0);
  opacity: 0.15;
  transition: width 0.25s;
}

ul.cloud a:focus::before,
ul.cloud a:hover::before {
  width: 100%;
}

En Blogger data:label.cssSize devuelve la importancia o el peso de cada etiqueta con respecto a las otras, con valores que van de 1 hasta 5, por lo tanto del código original solo aplicamos el CSS relacionados con los 5 primeros data-weight.

Pueden visitar la WEB del trabajo original: https://alvaromontoro.com/blog/67945/create-a-tag-cloud-with-html-and-css

Comentarios

Publicar un comentario

Buscar este blog
Entradas populares
Ordenar N números en forma descendente o ascendente
Serie de Fibonacci de los N primeros números en C++
Rincón Uniciencista
5 preguntas sobre el Disco Duro
Actividad de aprendizaje 4 - Evidencia: Taller “Uso de formularios para transferencia”
Capítulo 9. Detección y Corrección de Errores
Categorias
  • Arquitectura de Computadores
  • Aseguramiento de la Calidad del Software
  • Bases de Datos
  • ChatGPT
  • Comunicación de Datos
  • Estructura de Datos
  • Gerencia de Tecnología
  • Inglés
  • Móviles
  • NTIC
  • Plantillas
  • POO
  • Programación Lineal
  • Simulación y Modelaje
  • Sistemas de Información
  • Sistemas Operativos
  • Telemática y Redes
  • Teoría General de Sistemas
  • Trucos
Archivo del Blog
Cargando...
Visitas

Copyright © | Rincón Uniciencista | Diseñado por gfrodriguez | Con la tecnología de Blogger