Nube de etiquetas en Blogger

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