16 de septiembre de 2016

Etiqueta multicolores en Blogger



gadget de etiquetas multicolores en Blogger


Lo primero es saber que Blogger inserta automáticamente (por defecto), en las plantillas; el gadget de etiquetas tipo lista (no nube).

Para personalizar el gadget de etiquetas en nuestro blog



[1}- Debemos tener configurado el Gadgets de la siguiente forma:


[2]- Debemos ir a Plantilla, Personalizar y llegaremos hasta el Diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice Avanzado, abajo del todo encontrarán una opción que dice añadir CSS.




[3]- En ese recuadro a añadir el siguiente código:

.label-size {display:block; float:left; padding:6px 8px; margin:0 3px 3px 0; font:12px verdana; text-transform:uppercase; }
.label-size a {color:#fff!important; text-shadow:0 1px 0 #fff;}
.label-size a:hover {text-decoration:none;}
.label-size:nth-child(1) {background:#ff0000;border-bottom:2px solid #B20000;}
.label-size:nth-child(2) {background:#cf650d;border-bottom:2px solid #904609;}
.label-size:nth-child(3) {background:#9e0963;border-bottom:2px solid #6E0745;}
.label-size:nth-child(4) {background:#f54e67;border-bottom:2px solid #AB3748;}
.label-size:nth-child(5) {background:#42ad9d;border-bottom:2px solid #2E796E;}
.label-size:nth-child(6) {background:#b3001b;border-bottom:2px solid #7D0013;}
.label-size:nth-child(7) {background:#5c3e31;border-bottom:2px solid #402B22;}
.label-size:nth-child(8) {background:#8e4811;border-bottom:2px solid #63320C;}
.label-size:nth-child(9) {background:#ff9900;border-bottom:2px solid #B26B00;}
.label-size:nth-child(10) {background:#097054;border-bottom:2px solid #064E3B;}
.label-size:nth-child(11) {background:#6599ff;border-bottom:2px solid #476BB2;}
.label-size:nth-child(12) {background:#461d7c;border-bottom:2px solid #311456;}
.label-size:nth-child(13) {background:#666666;border-bottom:2px solid #474747;}
.label-size:nth-child(14) {background:#2ecc71;border-bottom:2px solid #1F8C4C;}
.label-size:nth-child(15) {background:#7c71ad;border-bottom:2px solid #564F79;}
.label-size:nth-child(16) {background:#1eb6ff;border-bottom:2px solid #1581B2;}
.label-size:nth-child(17) {background:#898c17;border-bottom:2px solid #5F6110;}
.label-size:nth-child(18) {background:#000078;border-bottom:2px solid #000054;}
.label-size:nth-child(19) {background:#ffcc00;border-bottom:2px solid #B28F00;}
.label-size:nth-child(20) {background:#cc3333;border-bottom:2px solid #8E2424;}
.label-size:hover {opacity:0.6; -webkit-transition:0.5s; -moz-transition:0.5s; transition:0.5s;}


Éste ejemplo admite un máximo de 20 etiquetas.









No hay comentarios:

Publicar un comentario

Diseño por Blogger Sin Escalones Con la tecnología de Blogger.