Widget lista de etiquetas desplegable

Widget lista de etiquetas desplegable para blogger etiquetas desplegable para blogger

Demostración

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. He bautizado este widget como iLabels.


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.4
* by zkreations
*/.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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:3px;cursor:pointer;font-weight:500;-webkit-transition:color .3s;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);-webkit-transition:.3s transform;transition:.3s transform}.iLabels__dropdown{height:0;overflow:hidden;position:absolute;top:100%;z-index:9999;width:100%;margin-top:1em;border-radius:3px;opacity:0;-webkit-transition:visibility .3s,opacity .3s,-webkit-transform .3s;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__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-weight:500}.labeldrop:checked~.iLabels__button::after{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.labeldrop:checked~.iLabels__dropdown{visibility:visible;opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0);    overflow:auto;height:auto}.iLabels__dropdown::before{content:"";display:block;top:-8px;position:absolute;right:1em;border-left:8px solid transparent;border-right:8px solid transparent}
/*Personalizar*/
.iLabels__button {
   padding: 1.2em; /*=> relleno del "switch"*/
   background: rgba(0, 0, 0, 0.05); /*=> fondo del boton "switch"*/
   color: rgba(38, 50, 56, 0.5); /*=> fondo del boton "switch"*/
}
.iLabels__button:hover {
   color: rgba(38, 50, 56, 0.75); /*=> hover del boton "switch"*/
}
.iLabels__dropdown::before {
   border-bottom: 8px solid #fff; /*=> señalador de la lista*/
}
.iLabels__dropdown {
   background-color: #fff; /*=> fondo de la lista*/
   box-shadow: 0 4px 20px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.15); /*=> Sombra de la lista*/
   max-height: 450px; /*=> Alto máximo de la lista */
}
.iLabels__dropdown::-webkit-scrollbar {
   width: 6px; /*=> ancho del scroll*/
}
.iLabels__dropdown::-webkit-scrollbar-track {
   background-color: rgba(0, 0, 0, 0.1); /*=> color de fondo del trayecto del scroll */
}
.iLabels__dropdown::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.4); /*=> color del indicador del scroll */
}
.iLabels__link {
   padding: .8em 1em; /*=> sombra de la lista*/
   color: rgba(0, 0, 0, 0.5); /*=> color de los elementos*/
   border-bottom: 1px solid rgba(0, 0, 0, 0.05); /*=> borde de elementos*/
}
.iLabels__num {
   color: rgba(0, 0, 0, 0.25); /*=> color del indicador numerico*/
   font-size: .9em; /*=> fuente*/
   font-weight: 700; /*=> grosor de fuente*/
}

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__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>
            </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