Gadget etiquetas tipo menu

Gadget Etiquetas

Como hemos visto en el post anteriorGadget de Etiquetas en un Scroll Box, 

Para agregar este truco a tu blog primero debes tener añadido el gadget de etiquetas,

 Luego ir a:

Tema, Editar HTML y justo arriba de ]]></b:skin> pega lo siguiente:

Ingredientes

/*! * 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*/ }

Guarda los cambios. Después de esto busca la etiqueta </b:section> y agrega también arriba de ella lo siguiente:

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

Finalmente, guarda los cambios y ya tendrás el gadget funcionado en tu blog con el estilo predeterminado que se muestra en la primera imagen del post. En el CSS (el código de la primera parte) se indican los valores que se pueden modificar para darle una apariencia personalizada al gadget.