Lo primero, es que si tienes el gadget de etiquetas elimínalo, ahora ve a Tema, Editar HTML y justo arriba de la etiqueta ]]></b:skin> añade lo siguiente:
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
1 Un clic en “Plantilla”
2 Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
3 Busca el siguiente código
]></b:skin>
Cuando lo hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste
/*!
* 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 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>
-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.-
0 comentarios: