Gadget lista de etiquetas desplegable Etiquetas desplegables para Blogger

Demo en Codepen

He actualizado el widget de lista de etiquetas desplegable para Blogger que desarrollé hace tiempo. Esta revisión tiene un diseño más simple pero moderno, código limpio y nuevas opciones.


Contenido


Instalar

Nos vamos a dirigir al panel de administración en Blogger Temas Personalizar opciones avanzadas Agregar CSS. En este apartado pegaremos el siguiente código:


/*!
 * Tlist v2.0
 * Copyright 2020 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 */
 /*! Core (No modificar) {{*/
.tlist {
   position: relative;
   width: 100%;
   z-index: 5;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}
.tlist-content {
    overflow-y: auto;
}
.tlist-content::-webkit-scrollbar {width: 4px;}
.tlist-content::-webkit-scrollbar-track {background-color: transparent;}
.tlist-content::-webkit-scrollbar-thumb {
  background-color: #CFD8DC;
  border-radius: 10px;
}
.tlist-btn {cursor: pointer;}
.tlist > input {display: none;}
.tlist > input:checked ~ .tlist-dropdown {
   display: block;
}
@-webkit-keyframes tlist-dropdown {
   from {-webkit-transform: translateY(-1rem);transform: translateY(-1rem);opacity: 0}
   to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1}
}
@keyframes tlist-dropdown {
   from {-webkit-transform: translateY(-1rem);transform: translateY(-1rem);opacity: 0}
   to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1}
}
.tlist-dropdown {
   position: absolute;
   width: 100%;
   left: 0;
   top: calc(100% + 4px);
   display: none;
   background: var(--tlist-bg);
   -webkit-animation: tlist-dropdown .3s ease-in-out;
           animation: tlist-dropdown .3s ease-in-out;
   -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))
           drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15));
           filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))
           drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15));
}
.tlist-dropdown::before {
   content: "";
   border-right: 12px solid transparent;
   border-left: 12px solid transparent;
   border-bottom: 12px solid var(--tlist-bg);
   position: absolute;
   top: -10px;
   left: calc(50% - 5px);
}
.tlist-btn,
.tlist-link {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
       align-items: center;
}
.tlist-num {margin-left: auto;}
.tlist-link:not(:last-child) {margin-bottom: 4px;}
.tlist-link > i {
   text-align: center;
   width: 1.25em;
}
/*}} Fin del core {{*/

/*! Personalización */
/* Estructura
-----------------------------------------*/
.tlist {
   --tlist-bg: #fff; /* color de fondo  */
}
.tlist-content {
    max-height: 390px; /* alto maximo */
}
.tlist-dropdown {
   padding: 10px; /* relleno */
   border-radius: 5px; /* borde redondo */
}
/* Lista
-----------------------------------------*/
.tlist-link {
   padding: 12px 14px; /* relleno */
   color: #5a6370; /* color */
   font-size: 14px; /* tamaño de texto */
   font-weight: 500; /* densidad del texto */
}
.tlist-link:hover,
.tlist-link.is-here {
   background: #f4f5f7; /* color de fondo  */
   border-radius: 5px; /* borde redondo */
   color: #1c2333; /* color (hover) */
}
/* Icono
-----------------------------------------*/
.tlist-link > i {
   font-size: 20px; /* tamaño de texto */
   margin-right: 12px; /* separacion derecha */
   color: #9fa6b2; /* color */
}
/* Numero
-----------------------------------------*/
.tlist-num {
   background: rgba(38, 50, 56, 0.05); /* color de fondo  */
   padding: 2px 12px; /* relleno */
   font-size: 12px; /* tamaño de texto */
   border-radius: 10px; /* borde redondo */
}
/* Boton
-----------------------------------------*/
.tlist-btn {
   padding: 14px 18px; /* relleno */
   background: #f4f5f7; /* color de fondo  */
   font-weight: 500; /* densidad del texto */
   color: #5a6370; /* color */
   border-radius: 5px; /* borde redondo */
}
.tlist-btn:hover {
   color: #1c2333; /* color (hover) */
}

Presiona el botón "Aplicar" para guardar los cambios. Ahora vamos a Temas Editar html y busca <b:section id='sidebar'> o cualquier etiqueta de sección, justo debajo pega el siguiente código:


<b:widget id='Label50' title='Etiquetas desplegables' type='Label'>
   <b:includable id='main'>
      <b:include expr:name='data:widgets ? "widget-title" : "title"'/>
      <b:include name='content'/>
   </b:includable>
   <b:includable id='title'>
      <b:tag name="h2" class='widget-title'>
         <span class='widget-name'><data:title/></span>
      </b:tag>
   </b:includable>
   <b:includable id='content'>
      <div class='widget-content'>
         <b:with value='data:widget.instanceId' var='id'>
         <div class='tlist'>
            <b:include name='btn'/>
            <div class='tlist-dropdown'>
               <b:include name='list'/>
            </div>
         </div>
         <b:include cond='!data:widgets' name='layout2fix'/>
         </b:with>
      </div><!-- .widget-content -->
   </b:includable>
   <b:includable id='btn'>
     <input expr:id='"tlist-" + data:id' type='checkbox'/>
     <label class='tlist-btn' expr:for='"tlist-" + data:id'>Seleccionar</label>
   </b:includable>
   <b:includable id='list'>
      <div class='tlist-content'>
         <b:loop values='data:labels' var='i'>
            <a class='tlist-link' expr:href='data:i.url'>
            <b:class cond='data:view.url == data:i.url' name='is-here'/>
            <b:include name='icons'/><data:i.name/>
            <b:include cond='data:showFreqNumbers' name='numbers'/>
            </a>
         </b:loop>
      </div>
   </b:includable>
   <b:includable id='numbers'>
      <span class='tlist-num'><data:i.count/></span>
   </b:includable>
   <b:includable id='layout2fix'>
      <style>#<data:id/>{z-index: 2}</style>
   </b:includable>
   <b:includable id='icons'>
      <b:switch var='data:i.name'>
         <b:case value='Astronomia'/>
            <i class="fas fa-meteor"></i>
         <b:default/>
            <i class="fas fa-tag"></i>
      </b:switch>
   </b:includable>
</b:widget>

Guardamos y listo ya tenemos el widget instalado con las opciones por defecto.


Personalizar

He dejado comentarios en el código css, los cuales puedes usar de guía para editar el aspecto desde el Diseñador de plantillas de Blogger. También es posible modificar algunas opciones adicionales.


Iconos

Por defecto se mostrará un icono de etiqueta a lo largo de la lista, si deseas que cada etiqueta tenga su propio icono personalizado, busca el siguiente código:


<b:switch var='data:i.name'>
   <b:case value='Astronomia'/>
      <i class="fas fa-meteor"></i>
   <b:default/>
      <i class="fas fa-tag"></i>
</b:switch>

Solo debes agregar un módulo <b:case> con el nombre exacto de la etiqueta y debajo un icono de Font Awesome, por ejemplo:


<b:switch var='data:i.name'>

   <!-- Icono para la etiqueta Astronomia -->
   <b:case value='Astronomia'/>
      <i class="fas fa-meteor"></i>

   <!-- Icono para la etiqueta Salud -->
   <b:case value='Salud'/>
      <i class="far fa-heart"></i>

   <b:default/>
      <i class="fas fa-tag"></i>
</b:switch>

Siguiendo este ejemplo puedes agregar todas las etiquetas que desees. Si por el contrario quieres deshabilitar todos los iconos para las etiquetas, busca y elimina el siguiente código:


<b:include name='icons'/>

Cantidades

Si deseas habilitar o deshabilitar el número que muestra la cantidad de entradas por etiqueta, simplemente edita el widget desde Diseño y desmarca la opción respectiva.


No olvides compartir la entrada si mi trabajo te ha sido de utilidad. Cualquier duda déjala en los comentarios, respondo a todos. Muchas gracias por pasar.