Widget lista de etiquetas desplegable

Widget lista de etiquetas desplegable para blogger etiquetas desplegable para blogger

Demo en Codepen

Siguiendo con los widgets reestructurados, hoy aprenderemos a instalar una lista de etiqueta desplegable para blogger que desarrollé basado en el widget "Etiquetas" e impulsado por css puro.


Instalar

Entraremos al panel de administración en blogger, sección "Temas", presionamos el botón "Personalizar" y ya en el diseñador de plantillas de Blogger vamos a opciones avanzadas, en el apartado "CSS Personalizado", en donde pegaremos el siguiente código:


/*! Widget: iLabels v1.0.6 | by zkreations */
#Label50,#Label50 .widget-content{position:relative!important;z-index:10;overflow:initial!important}.labeldrop:checked~.iLabels__button::before{position:fixed;top:0;left:0;width:100%;z-index:800;content:"";cursor:default;height:100%}.widget.Label,.widget.Label .widget-content{overflow:initial!important}.labeldrop{display:none}.iLabels{font-size:14px;position:relative}.iLabels__button{display:flex;justify-content:space-between;align-items:center;border-radius:3px;cursor:pointer;font-weight:500;transition:color .3s}.iLabels__button::after{content:"";width:8px;height:8px;display:block;border-right:3px solid;border-bottom:3px solid;-webkit-transform:rotate(45deg);transform:rotate(45deg);transition:.3s -webkit-transform;transition:.3s transform;transition:.3s transform,.3s -webkit-transform}.iLabels__nav{height:0;position:absolute;top:100%;z-index:9999;width:100%;padding-top:1em;opacity:0;transition:visibility .3s,opacity .3s,-webkit-transform .3s;transition:transform .3s,visibility .3s,opacity .3s;transition:transform .3s,visibility .3s,opacity .3s,-webkit-transform .3s;-webkit-transform:translate(0,2em);transform:translate(0,2em);visibility:hidden}.iLabels__dropdown{overflow-y:auto}.iLabels__link{display:flex;align-items:center;justify-content:space-between;font-weight:500}.labeldrop:checked~.iLabels__button::after{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.labeldrop:checked~.iLabels__nav{visibility:visible;opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0);height:auto}.iLabels__nav::before{content:"";display:block;top:8px;position:absolute;right:1em;width:14px;height:14px;z-index:-1;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
/*
=> Personalizar
*/
/* Switch
 *------------------------ */
.iLabels__button {
  padding: 1.2em; /* Relleno */
  background: rgba(0, 0, 0, 0.05); /* Fondo */
  color: rgba(38, 50, 56, 0.5); /* Color */
}
.iLabels__button:hover {
  color: rgba(38, 50, 56, 0.75); /* Hover del boton */
}
/* Lista
 *------------------------ */
.iLabels__dropdown,
.iLabels__nav::before {
  background-color: #fff; /* Fondo */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); /* Sombra */
}
.iLabels__dropdown {
  border-radius: 3px; /* bordes redondeados */
  max-height: 450px; /* Altura máxima */
}
/* Scrollbar
 *------------------------ */
.iLabels__dropdown::-webkit-scrollbar {
  width: 6px; /* Anchura */
}
.iLabels__dropdown::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1); /* Color de fondo */
}
.iLabels__dropdown::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4); /* Color de barra */
}
/* Enlaces
 *------------------------ */
.iLabels__link {
  padding: 0.8em 1em; /* Relleno */
  color: rgba(0, 0, 0, 0.5); /* Color */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Bordes*/
}
.iLabels__num {
  color: rgba(0, 0, 0, 0.25); /* Color */
  font-size: 0.9em; /* Tamaño de fuente */
  font-weight: 700; /* grosor */
}

No olvides presionar el botón "Aplicar" para guardar los cambios. Ahora regresaremos al administrador de blogger, nos dirigimos a Temas y presionamos "Editar html", buscamos </b:section> y arriba de eso pegamos el siguiente código:


<b:widget id='Label50' title='Etiquetas desplegables' type='Label'>
   <b:widget-settings>
      <b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
   </b:widget-settings>
   <b:includable id='main'>
      <b:if cond='data:title.length != 0'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
         <div class='iLabels'>
            <input id='labeldrop' class='labeldrop' type='checkbox'/>
            <label class='iLabels__button' for='labeldrop'>Elige una etiqueta</label>
            <nav class='iLabels__nav'>
            <div class='iLabels__dropdown'>
            <b:loop values='data:labels' var='i'>
               <a class='iLabels__link' expr:href='data:i.url'><data:i.name/>
               <b:if cond='data:showFreqNumbers'><span class='iLabels__num'><data:i.count/> posts</span></b:if></a>
            </b:loop>
            </div>
            </nav>  
         </div>
      </div>
   </b:includable>
</b:widget>

Guardamos los cambios y listo ya tenemos el widget instalado con las opciones por defecto. Si lo deseas, puedes modificar el texto "Elige una etiqueta" o el texto "posts" que indica el número de entradas por etiqueta.


Personalizar

Si deseas hacer cambios en los estilos del widget, he dejado comentarios a lo largo del codigo css, los cuales puedes editar desde el Diseñador de plantillas de blogger, en el apartado CSS Personalizado, cambiando unas cuantas propiedades puedes lograr modificar el widget:


captura widget css personalizado lista de etiquetas

El estilo que diseñe por defecto es general, es por eso que elegí el color blanco. Si necesitas ayuda en la personalización css no dudes en dejar un comentario en esta misma entrada.


Configurar

Las opciones del widget siguen siendo las mismas que el gadget original "Etiquetas". Si deseas modificarlo simplemente ve a la sección "Diseño" y edita el widget "Etiquetas desplegables". La opcion "cloud" es la única que no surte ningun efecto.


Espero que les sea de utilidad y si fue asi no olviden compartir esta entrada, me ayuda a crecer y ayudaras a mas personas que busquen lo mismo. Cualquier duda dejala en los comentarios.

Quizás te interese