Además de permitirnos organizar nuestras entradas, sirve a los nuevos visitantes cómo pequeña memoria de los contenidos que se encontrarán en el sitio y también cómo filtro de selección de estos. Incluso son útiles para suscribirse por feed sólo a aquellos apartados que nos interesan de la bitácora.
Su configuración en cuanto a aspecto tiene sólo dos opciones, lista y nube, pero ambos pueden ser personalizados para integrarlos con la estética de nuestro sitio. Para mi gusto el segundo es bastante más atractivo y lo que veremos a continuación son sólo un par de ejemplos distintos para modificarlo.
El primero sigue un estilo clásico y sencillo, tanto como el código necesario para cambiarlo, porque simplemente eliminaremos el justificado que lleva por defecto y centraremos las etiquetas, todo con la idea de que el conjunto parezca más una nube. Además le daremos un poco de colorido.
El gadget genera distintas etiquetas con el formato .label-sizeX, siendo X un número del 1 al 5, de manera que las etiquetas que más se utilizan llevan un 5 y las que menos un 1, pasando por 2, 3 y 4 para los valores intermedios.
Aprovechando esto podemos realzar con colores y tamaños de fuente distintos cada una de las etiquetas según su densidad.
Vídeos Humor Ilustraciones Animación Tecnología Mundo animal Botánica Cuentos chinos Películas Canal cocina Cómics Poemas Pintura actual Japón Online Televisión OFF Ciencia para todos WTF! Siglo XXII
/* Etiquetas en nube centrada multicolor */
.cloud-label-widget-content {text-align: center;}
.label-size-1 a {color: #eee; font-size: 12px;}
.label-size-2 a {color: #996666; font-size: 14px;}
.label-size-3 a {color: #333; font-size: 18px;}
.label-size-4 a {color: #eee; font-size: 24px;}
.label-size-5 a {color: #990000; font-size: 30px;}
.cloud-label-widget-content {text-align: center;}
.label-size-1 a {color: #eee; font-size: 12px;}
.label-size-2 a {color: #996666; font-size: 14px;}
.label-size-3 a {color: #333; font-size: 18px;}
.label-size-4 a {color: #eee; font-size: 24px;}
.label-size-5 a {color: #990000; font-size: 30px;}
Como no podía ser de otra manera, estos valores los podéis cambiar al gusto, pero también se pueden añadir otras pequeñas variaciones como por ejemplo un alto de línea (line-height) escaso para solapar un poco el texto de las etiquetas, una tipografía distinta (font-family) o un color de fondo para el hover.
La otra versión es más románica aunque le he añadido un pequeño redondeado y efecto para el hover que lo vuelve algo gótico. Para un estilo más sobrio mejor quitar al menos el border-radius.
Se trata en este caso de enmarcar las etiquetas en cajas rectangulares y disponerlas una al lado de la otra. El efecto para el hover es el que requiere más código porque haremos una especie de zoom con ellas. Prescindible o modificable, como siempre.
Vídeos Humor Ilustraciones Animación Tecnología Mundo animal Botánica Cuentos chinos Películas Canal cocina Cómics Poemas Pintura actual Japón Online Televisión OFF Ciencia para todos WTF! Siglo XXII
/* Etiquetas enmarcadas con efecto zoom */
.cloud-label-widget-content {
text-align: center;
}
.label-size a {
float:left;
display: block;
margin: 2px 2px 0 0;
padding: 4px;
text-transform: uppercase;
border: 1px solid #996666;
text-decoration:none;
font-size:12px;
color:#666;
background: #eee;
-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;
}
.label-size a:hover {
border: 1px solid #000;
color: #000;
background: #fff;
text-decoration: none;
-moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);
-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s;
}
.cloud-label-widget-content {
text-align: center;
}
.label-size a {
float:left;
display: block;
margin: 2px 2px 0 0;
padding: 4px;
text-transform: uppercase;
border: 1px solid #996666;
text-decoration:none;
font-size:12px;
color:#666;
background: #eee;
-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;
}
.label-size a:hover {
border: 1px solid #000;
color: #000;
background: #fff;
text-decoration: none;
-moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);
-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s;
}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
¡Qué bien! Me gustan esas etiquetas particularmente las Etiquetas enmarcadas con efecto zoom. las aplicaré cuando tenga oportunidad en algun blog. Sabes que aplique las instrucciones del post "Transformando el gadget de posts populares" y me quedó bien. En ese gadget veo que los titulos "caen" verticalmente sobre las imagenes, pero en el gadget de entradas populares que tienes en este blog los titulos "caen" diagonalmente. Si es posible, ¿Me puedes decir que tengo que modificar para lograr el mismo efecto que en tu blog? Me gusta más como lo tienes aquí.
ResponderEliminarPara que los carteles "bajen", el estado normal de .popular-posts li .item-title a tiene un top:0; (omitido por no ser necesario) y el .popular-posts li:hover .item-title a -que es cuando se pasa el puntero por encima de una miniatura- un bottom:80px. Así se simula el desplazamiento vertical.
EliminarEl vertical se consigue de la misma manera pero añadiendo un left. En mi caso left:130px;
Disculpame si te parezco muy tonta, pero soy muy nueva en estos temas de blogs, y no entiendo bien en donde puedo poner el código para aplicar este efecto a las etiquetas, la opción de etiquetas no me deja. No sé si me puedes guiar un poco con esto, adicionalmente quisiera saber el código se debe copiar tal como lo pones en tu post o hay que cambiarle algunas cosas adicionales? Gracias y disculpame por molestarte con preguntas a lo mejor muy evidentes!
ResponderEliminarHola. Primero tienes que añadir el gadget desde el apartado Diseño del Escritorio. Es el que se llama Etiquetas.
EliminarLuego, para cambiar el estilo es cuando necesitas esto. Aquí lo que tienes que editar es la plantilla y pegar uno de estos códigos (el que prefieras) tal cual. El lugar adecuado es antes del cierre de la etiqueta SKIN.
Ver esto y esto otro para más información.
Oloman, yo tampoco sé dónde pegar el código. Ya tengo el gadget de las etiquetas en forma de nube. Pero quería probar con el efecto de este segundo estilo redondeado qe muestras. Fui a editar, pero ahí no me permite introducir ningún código. Fui a diseño, pero no me aparece configuración de plantilla ¿?.
EliminarPor si me explico mal, puedes entrar en mi blog y ver a qué me refiero.
Bueno, gracias otra vez.
Saludos!!
En Diseño no, tienen que entrar en Plantilla > Edición HTML. Últimamente doy por supuesto que sabéis dónde hay que meter el código de estilo (CSS), pero es dónde dije en 2.1. Te agradecería que vieras los enlaces que puse en ese comentario. Esa información es básica para trastear la plantilla.
EliminarCreo que ya tengo trabajo para este finde: me gusta la primera opción para mi blog, en monocolor las etiquetas siempre me dieron una sensación como de "apretujadas" y esta puede ser una buena solución al problema. A ver cómo se me da. :)
ResponderEliminarPrimer problema: las etiquetas no me cambian de color. :( El caso es que sí tengo etiquetas de distinta frecuencia (sí tengo diferentes tamaños letra, etc.) pero el color no sé por qué no me lo acepta.
EliminarVale, en lugar de .label-size-X a usa #sidebar-wrapper .label-size-X y verás cómo se soluciona el problema.
EliminarCuando aplico el 1º código, me sale perfecto pero todas del mismo color, negro. No se aplica los otros colores del codigo. He mirado y remirado pero no doy con la tecla. A ver si me echas una mano.
ResponderEliminarUn saludo.
Puede que todas las etiquetas tengan la misma densidad (más o menos el mismo número de posts) y en ese caso todas se muestran igual. Para probar tendrías que crear un post con una nueva etiqueta no utilizada por tí anteriormente. Así tendrías una distinta a las demás para comprobar si es eso u otra cosa. Luego borras el post ese de prueba.
EliminarGracias!!! quedó muy bien...
ResponderEliminarEy!!! mi blog ya pinta mejor! Muchas gracias por el post, muy util
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarBuenos días:he subido el código de etiquetas zoom,son muy guapas!!! pero me ha surgido un problema se puso el fondo de mi blog en blanco y lo tengo negro.
ResponderEliminarSerias tan amable de comentarme si se puede volver el fondo a negro?y que debo modificar en el código de las etiquetas?
Tengo que ver tu blog con mas tiempo,es estupendo
Muchas gracias
¿El fondo del blog o el de las etiquetas? El del blog se puede deber a un error en el copy-paste, pero si lo que quieres es sólo cambiar el color de las etiquetas, eso está dentro de size-label a, indicado como background: #eee;
EliminarMuchísimas gracias por tú amabilidad:Tenías razón el error era de copy-paste.Creo que quedaron bien.
EliminarMe encanta como nos enseñas.Gracias de nuevo
a mis marcadores Olo, muy buen truco, quiza lo use en otro blog mas adelante.
ResponderEliminarUtilicé las etiquetas con zoom, muy buenas! Pero, no es lo mismo en Chrome que en otros navegadores. Lo que busco, si me puedes ayudar, es incorporar un borde similar a los títulos de los gadget y cambiarles la tipografía. Para que te des una idea mi página es www.buenosairesmequiere.com y verás que, casi todo tiene bordes redondeados. Gracias!
ResponderEliminarHola. Tú tienes este estilo en tus gadgets de la barra lateral:
Eliminar.sidebar .widget {
border-bottom: 5px ridge #FF9733;
padding-bottom: 20px;
}
Lo que tienes que hacer es buscar eso en tu plantilla y cambiar las propiedades. Por ejemplo, el borde podría ser integral con border:1px solid #00000;. Para cambiar la tipografía tendrías que utilizar font-famiy en esa misma parte.
Para redondear hay que usar lo mismo que aquí: border-radius.
Que bueno! ya estoy intentando algo, lo que no sé (perdón por la ingnorancia) es dónde pongo font-Famiy.
ResponderEliminarOtra pregunta, ya que estamos:¿Cómo puedo bajar el tamaño de "Sin Comentarios"? por ahora no me cambia la leyenda, no seé que hago mal, pero si lo logro igual me gustaría una tipografía más pequeña. Gracias otra vez
Con la estupidez no pasa lo mismo, pero la ignorancia se soluciona aprendiendo y una de las maneras de aprender es preguntar, así que no hay que pedir disculpas.
Eliminarfont-family es una propiedad CSS y por tanto, esta y los valores que correspondan hay que ponerlos en esa parte. Esto en Blogger es entre las etiquetas SKIN.
Hay que aplicársela a la clase que se quiere modificar y en este caso habría que añadirla dentro de las llaves de .cloud-label-widget-content {}.
Hola, Oloman. Estoy usando las etiquetas de la segunda versión, y se ve muy bien tanto en Chrome como en Firefox, sin embargo en Explorer la última etiqueta de cada línea, en lugar de bajarse a la siguiente línea por falta de espacio, aumenta su longitud y queda bastante mal. También me he dado cuenta que los bordes de las etiquetas de tu entrada aparecen redondos y con el efecto de zoom en explorer, sin embargo no ocurre en mi blog... ¿Podrías arrojar algo de luz a mis dudas?
ResponderEliminarLa respuesta es que Internet Explorer interpreta las propiedades CSS a su manera... o incluso de ninguna. Podrías probar a cambiar el block por un inline-block, pero también dependerá de la versión utilizada de IE.
Eliminarse ve bien. creo que lo utilizare :) saludos.
ResponderEliminarHola Oloman, he puesto el segundo código y queda genial, pero sería posible alinear las etiquetas en el centro para que no queden siempre los espacios a la derecha?
ResponderEliminarNo se sí me has entendido bien.
Gracias.
Perfectamente, porque cuando publiqué esto lo intenté yo mismo... pero sin éxito. Seguro que se puede, pero yo no di con la tecla adecuada para lograrlo.
EliminarHola Oloman, ¿como hago para cuando hago clic en una etiqueta solo se me muestren las entradas resumidas o solo el titulo de la misma personalizado.
ResponderEliminarHola. Utiliza el buscador con la palabra "sumarios" y verás diversos sistemas. Normalmente afectan tanto a las páginas de etiquetas como a las de navegación y la propia de Inicio, pero eso dependerá de cómo pongas la condición.
EliminarQuizás encuentres útil que sea para todas esas y no quieras cambiar nada. En caso contrario añade un nuevo comentario en la entrada del sistema que más te guste. Te recomiendo la que no utiliza JavaScript. Es la que más me gusta.
soy nuevo en esto del blogger, y no entiendo qué hago con el código, dónde lo pego o qué hago. Agradezco cualquier ayuda
ResponderEliminarEn este caso concreto sólo es CSS y en Blogger ese tipo de código va entre las etiquetas SKIN de la plantilla.
EliminarMás info
Y algo más
que tal compañero oloman, he pegado el codigo donde haces referencia pero no se visualizan los estilos, dime que estoy haciendo mal...?
ResponderEliminarNo sé porque no veo en tu perfil ninguna página para echar un vistazo ¿Quizás no has usado el estilo de nube?
EliminarEN DONDE SE PEGA EL CODIGO AL MOMENTO DE EDITAR, ESPERO AYUDA =(
ResponderEliminarEsos códigos son CSS y por tanto los tienes que poner entre las etiquetas SKIN de tu plantilla. Si usas el nuevo diseñador, también es posible añadirlos en Avanzado > Añadir CSS
EliminarHola Oloman, me encanta tu blog, lo acabo de descubrir y es de una gran ayuda. La verdad es que por el formato de nuestro blog, las etiquetas tenemos que reflejarlas en forma de lista. Pero están demasiado pegadas unas de otras, cómo podemos ponerle una línea que las separe o meterlas en cuadrados uno debajo de otro para que queden bien organizadas? ¿Puedes echarnos u cable?
ResponderEliminarMuchas gracias por tu generosidad!!!
¿Me pasas la dirección de tu blog que lo vea? Me resulta más fácil contestarte sobre algo concreto que sobre una cuestión general.
EliminarHola, tengo el segundo código, seria posible que al hacer click en una etiqueta solo se mostraran dos entradas?
ResponderEliminarYa encontré la manera, gracias.
ResponderEliminarSupongo que fue cambiando el valor de max-results ¿no?
EliminarHOLA! He conseguido poner una nube de etiquetas como la segunda!
ResponderEliminarBueno, gracias a ti y a Luis Chávez. Primero me leí lo que pusiste en 2.1 y luego me atreví, jeje
Cuánto se aprende con vosotros!!
Soy Sara del blog http://decosturasyotrascosas.blogspot.com.es/
GRACIAS!!
...y con vosotros ;)
EliminarGRacias!! Conseguí colocar las dos sin problemas. Al final me decanté por la primera :D
ResponderEliminarHola, mira, yo también estoy intentando comenzar a darle forma a mi blog.
ResponderEliminarHe leído los artículos que indicas mas arriba para entender donde colocar estos CSS, pero sabes que no encuentro la etiqueta SKIN!
Si me ayudaras a entender donde colocar tu código y si debo borrar algo de lo existente, te lo voy a agradecer.
Saludos y gracias por ofrecernos tus conocimientos.
Todas las plantillas Blogger tienen al menos un par de etiquetas SKIN.
EliminarEmpieza por aquí y continúa por aquí. Con eso comenzarás a entender muchas cosas. Si quieres más material, avísame ;)
hola! muy interesantes artículos, soy seguidor del sitio, lo explicas todo con mucha claridad, tengo una pregunta si tengo que crearme un css personalizado para darle estilo ya sea a mi nube de etiquetas, a mi menu etc, ya que al editar el template de blogger ya tiene creado sus class e id, donde alojo el archivo css para que se cargue en mi blog de blogger? o google donde recomienda?
ResponderEliminarmuchas gracias por la respuesta!
No hace falta ningún archivo CSS. En Blogger puedes escribir directamente ese tipo de código en la plantilla, entre las etiquetas SKIN.
Eliminarhola oloman,
ResponderEliminarcoloque el código pero sólo me cambio el color y no les cambio el tamanio como en las nube que mostraste en el primer ejemplo, que debo hacer para que tengan ese aspecto???? grcs.slds.
Puede que tengas en tu plantilla algo que sobreescriba ese estilo. Para evitarlo utiliza !important en todas las reglas. Así:
ResponderEliminar.label-size-1 a {color: #eee; font-size: 12px !important;}
lo agregue en el "diseñador de plantillas de blogger", centra las etiquetas y las cambia a un color rosado pero no les cambia los tamanios.
ResponderEliminarTe paso la dirección de mi blog para que lo veas: http://alquilocasaconpiscina.blogspot.com/, grcs. slds.
Sí que funciona lo que pusiste. Lo que ocurre es que da la casualidad de que todas las etiquetas tienen la misma cantidad de entradas y todas salen con un .label-size-2 a {color: #996666; font-size: 14px;}
EliminarEse color rosa es el #996666. Si lo cambias verás que cambian todas. A medida que unas etiquetas tengan más posts que otras, cada una tomará un tamaño y color diferente, según lo programado en el CSS.
Hola una consulta, una vez "seleccionada" una etiqueta, en el gadget se la ve sin estilo. Todas las demás quedan con el estilo que habíamos armado, pero la seleccionada no. Hay algo así como un ".lavel-selected" o algo parecido donde tengamos que darles el estilo a la etiqueta seleccionada? Gracias
ResponderEliminarSí claro. El estilo de la etiqueta seleccionada se puede modificar con este selector:
Eliminar.label-size span {
color: red; /* lo que sea */
}
Hola, a mí no me responde nada que pegue antes de Skin
ResponderEliminarEn la plantilla Blogger hay dos etiquetas SKIN con unos símbolos que no recuerdo. Entre ambas te debe funcionar, sin problemas, todo el CSS que añadas.
Eliminarme quedo muy bonito en mi blog... muchas gracias mi hermano... un Abrazo !!!!
ResponderEliminarTienes unos posts fantásticos y muy interesantes.(Pero)Hay un problema que estoy seguro que muchos tienen como yo,para los que no somos tan inteligentes y empezamos con los códigos al menos yo te agradecería si fueras mas explicito donde van colocados los códigos me explico si van en el head delante, atrás, o en body delante,atrás etc,para mi es el único problema que tengo. Muchas gracias.(posdata soy un yayo de 62 años que le cuesta que le entren estas cosas)
ResponderEliminarJajaja... Yayo Francisco, eso que pides lo hago a veces sí, a veces no, pero es por no ser repetitivo, pues en principio todos mis posts necesitarían de esas referencias.
EliminarSin embargo, si pasas por este artículo, probablemente ya no necesites que yo de ninguna referencia.
oloman tengo una consulta por favor:
ResponderEliminar¿como puedo cambiar el diseño solamente "de una etiqueta" que aparece encima de cada post en mi blogger?
justo es la etiqueta: vigente que quiero ponerlo en un cuadro verde grande, gracias por la ayuda oloman
http://pruebaprube123a.blogspot.pe/2017/02/dasdasda.html
Hola. Aunque no entendí muy bien, prueba a añadir esto a tu CSS a ver si acertamos:
Eliminar.breadcrumbs a:last-child {
background: green;
color: white;
line-height: 18px;
padding: 6px 0;
box-sizing: border-box;
}
Gracias oloman si funciono, eres un capo maestro !
EliminarBuenas Oloman,
ResponderEliminarLlevo un par de semanas leyendo y tratando de aprender de todo un poco y estoy demasiado verde, pero partiendo de la base y modificando por aquí y por allá estoy empezando algo. Me gustaría saber cómo puedo hacer - o donde buscar - un menú vertical con efecto deslizante como el que tiene Paco y Verónica travels en la sidebar izquierda (Donde pone Mundo Friki y tal).
Te dejo el enlace a su blog para que veas lo que te comento.
http://www.pacoyverotravels.com
¡Un saludo y gracias por todos los aportes!
Hola Alex. Perdona que lo diga pero se nota la "verdura" precisamente por la cuestión que planteas :)
EliminarEse tipo de menú es de los más sencillos, tanto que ni siquiera lo tengo explicado en el blog. Se trata de hacer un lista y en cada elemento poner un enlace, sólo eso. De manera natural ya quedan uno encima de otro.
De todas formas, por no dejarte sin nada, date una vuelta por esta entrada
Buenas Oloman. Efectivamente cuando vi el código me di cuenta de que no era tan complicado jaja. De hecho utilicé uno que tienes en la portada y de lujo.
EliminarGracias!
OK. Me alegro :)
EliminarHola Oloman, en este blog → http://bodegaveintidos.blogspot.com.ar/ deseo -de hecho lo hice-que la nube de etiquetas se vea como la opción 2 del posteo. No logro hacer que funcione. Sugerencias? Gracias
ResponderEliminarSólo una: Añadir el CSS que explico. Con eso, en el sitio correcto, 100% seguro que se ve igual que en el ejemplo.
EliminarAhora mismo lo que añadiste no es EXACTAMENTE ni el código 1 ni el 2, sino más bien una mezcla que como comprobaste no da ningún resultado.
Creí haber colocado el correcto (puse label1 o label2 porque asi estaba identificado el widget) de tu posteo. Rehice colocando antes del cierre de SKIN en directo a la plantilla o por el diseñador. Nada. Igualmente, gracias, perdón las molestias
ResponderEliminarRepito que sólo hace falta añadir lo que publiqué en este post, pero es que no veo eso en ninguna parte.
EliminarNo hace falta poner label1, ni label2, ni nada adicional; sólo el código al final de este post.
Iba a enviarte a tu mail una captura de pantalla del código de fuente.., hasta que borré y lo volví a colocar y funcionó Oloman. Hice unos retoques en los redondeos. Joya, como decimos en Argentina. Saludos y gracias
EliminarEl código fuente precisamente es de las cosas que puedo ver desde aquí y por eso sabía que el CSS no estaba puesto (o bien puesto). Si ya se solucionó todo... ¡perfecto!. Un saludo
Eliminar