JMiur [E]

Modificando un poco la idea de cssglobe.com podemos intentar darle un toque diferente a la lista de etiquetas que se muestra debajo de las entradas o, en realidad, a cualquier otro tipo de lista y todo, sin necesidad de utilizar imágenes, empleando algunas de las nuevas alternativas del CSS con lo que en algunos navegadores, el resultado será distinto (IE7) pero más que aceptable.


En el caso de Blogger, esas etiquetas se muestran con un código similar a este:
<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
      <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span>
Allí, esta línea es la que agrega una coma o un caracter separador entre los textos de esa lista y, la eliminamos porque es innecesaria:
<b:if cond='data:label.isLast != "true"'>,</b:if>
Si deseamos, lo mismo podemos hacer con esta otra que por defecto,escribe el texto "Etiquetas:"
<data:postLabelsLabel/>
Todo lo demás puede quedar igual ya que normalmente, esas etiquetas no tienen definiciones de estilo especiales así que, se las agregamos, colocando esto antes de </b:skin>:
.post-labels {
  margin: 0;
  padding: 0;
}
.post-labels a {
  float: left;
  position: relative;
  background-color: #0089E0; /* el color de fondo que se nos ocurra */
  /* la altura */
  height: 24px;
  line-height: 24px;
  /* el ancho lo resolvemos con paddings horizontales */
  padding:0 10px 0 12px;
  /* la separación entre etiquetas */
  margin-left:20px;
  /* definiciones del texto */
  color: #FFF;
  font-size:11px;
  font-family: Arial;
  text-decoration: none;
  /* una curva suave a laderecha */
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px; 
  border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px; 
  border-top-right-radius: 4px;
}
/* esto creará el triángulo de la izquierda */
.post-labels a:before {
  border-color: transparent #0089E0 transparent transparent;
  border-style: solid;
  /* el borde es igual a la mitad de la altura definida anteriormente */
  /* de ese modo será un triángulo equilátero */
  border-width: 12px 12px 12px 0;  
  content: "";
  float: left;
  left:-12px; /* lo movemos tanto como el valor dado al borde */
  height: 0;
  position: absolute;
  top: 0;
  width: 0;
}
/* esto, creará el circulito que precede a los textos */
.post-labels a:after {
  background-color: #FFF; /* el color */
  content: "";
  float: left;
  left: 0;
  position: absolute;
  top: 10px; /* lo ubicamos centrado en al mitad de la altura */
  /* el ancho y la altura son iguales para que sea un círculo */
  height: 4px;
  width: 4px; 
  /* el radio de la curva es la mitad de su tamaño */
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
/* efectos hover */
.post-labels a:hover{
  background-color: #555;
}
.post-labels a:hover:before {
  border-color: transparent #555 transparent transparent;
}

34 comentarios:

AlexG  

Muy bueno JMiur me fascino, me atoro con lo del principio no se si hay que agregar o solamente lo de la parte CSS

Responder
Graciela  

Me encantó, precioso!

Responder
Diego  

Gracias por el "truco" éste, la verdad es que ha sido de utilidad y es fácilmente modificable gracias a tus comentarios.

Quedó de 10 :-)

Un saludo.

Responder
Graciela  

ya lo hice :P

Responder
Adrián J. Messina  

Muy bueno y todo con CSS.
Gracias por compartirlo.
Buen fin de semana.

Responder
Indeziisoow  

Algo parecido a lo que estaba esperando. :D ¿Esto se puede aplicar a un div, por ejemplo?

Responder
JMiur  

No sé exactamente a que te refieres, AlexG.

Perfecto, Graciela:D

Indeziisoow:
Se puede aplicar a cualquier cosa lista, obviamente, cambiando el CSS.

Responder
Lionel Nadir Rodríguez  

No entiendo no me sale. Que hago mal?

Responder
JMiur  

A menos que indiques dónde tienes el ejemplo, imposible responder.

Responder
Lionel Nadir Rodríguez  

Aca lo tengo.
www.lacajitafelixwebzine.blogspot.com

No entiendo a codigo HTML de data:postLabelsLabel
le tengo que agregar algo o que?
Encima aparece distinto el mío.

Responder
JMiur  

Esa plantilla que usas es algo adaptado de una plantillade WordPress y nadie se ha tomado el trabajo de agregar los detalles, IDs y clases que usa Blogger asi que, no existe la etiqueta SPAN que es la que utiliza este demo ni hay ninguna otra clase que identifique a las etiquetas del footer de las entradas de tu blog.

de algna manera, vas a tener que identificarlas agregándoles una clase o algo; sino, será imposible.

Responder
Lionel N. Rodríguez  

uh ahora entiendo porque tantas cosas que le probé no andan.
bueno se ve que esta plantilla me va a tener con los pelos de punta.
gracias por la data!

Responder
Admin  

Hola Jmiur tengo un problema, cambie el codigo de la fecha de los comentarios al igual que el icono para editar comentarios y no recuerdo lo que ise, el chiste es que no aparecen, he intentado modificar el codigo pero no aparecen ni la fecha de comentarios ni el icono de basura para editarlos.

Alguna sugerencia o ayuda para solucionarlo?

Responder
JMiur  

Vas a tener que fijarte en cualquier otra plantilla y copair esa parte ya que online, no se ve nada de eso así que no sé qué es lo que has quitado.

El código básico es algo así:

<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>

Responder
Adalberto  

Hola, he realizado el tutorial y logró darle el estilo a las etiquetas sin embargo el texto no se deja dar formato, es decir, no me deja personalizar el color y no se distingue mucho del fondo de la etiqueta mi blog es demacondoalaleph.blogspot.com

Te agradezco la ayuda y un tutorial más que útil.

Saludos

Responder
JMiur  

Es probable que tengas definidos los enlaces por defecto así que, agrégale la palabra !mportant a las propeidades que quieras cambiar; por ejemplo:

color: #000 !important;

De esa manera, fuerzas el cambio.

Responder
Adalberto  

Muchas gracias! problema solucionado, quisiera saber donde puedo ubicar el código que le da ese formato predeterminado a los enlaces, ya he tenido varios problemas por eso.

Saludos.

Responder
JMiur  

Dependerá de cada plantilla, n osé en cual de tus blogs es pero, pueden ser definiciones como estas:
a:link {}
a:visited {}
a:link, a:visited {}
a:hover {}

Responder
Adalberto  

Hola, espero que estés bien. Tengo una pregunta, sé que existe un código para sólo mostrar cierta cantidad de etiquetas y no todas las que se le colocan a los posts. Por ejemplo cuando se hace un breadcrumps (migas de pan) sólo se muestra una etiqueta y el nombre del post. Cuál es el código que hace que sólo se muestre una sola etíqueta (por lo general la última) y además si se podría mostrar más de una. Quiero usar este truco pero uso muchas etiquetas y el espacio donde lo voy a colocar no me da.
Gracias por la respuesta.

Responder
JMiur  

lo que deberías ahcer es modificar el bucle que muestra esta entrada que es el que pone Blogegr por defecto. Allí, esto muestra la etiqueta:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

y lo puedes condicionar de alguna manera, algo así:

<b:if cond='data:label.name == &quot;NOMBRE&quot;'>
aqui el enlace
</b:if>

En ese caso, sólo se mostrará si la etiqueta se llama "NOMBRE"

Otra forma podría ser excluirlas con una lista. Todo depende, puede hacerse pero todo depende de cuales etiquetas son, de cuántas son, etc,e tc.

Responder
Daniel Paredes  

Muchas gracias, ya lo he incorporado a mi blog y el resultado me gusta mucho. ¿No habrá alguna manera de colocar esas mismas imágenes en la sidebar, donde están los enlaces de las "Etiquetas"?... No sé si se entiende la pregunta :S
Desde ya, muchas gracias.
Saludos.

Responder
JMiur  

Si lo quieres aplicar a todas las etiquetas de la sidebar podrías usar el mismo CSS donde sólo debes cambiar el nombre de la clase:

.post-labels

por:

.Label

Luego, puedes ir adaptando esas nuevas reglas al espcio disponible o el diseño que elijas.

Responder
Daniel Paredes  

¡Fantástico, JMiur! Hice tal como decís, y funciona perfecto. ¡Mil gracias!
Saludos.

Responder
X-Crim  

Muchas gracias, muy útil.

Responder
ulises tomas  

Saludos Jmiur, me gusta el post, pero me gustaria poder agregarlo en el enlace de las etiquetas en vez de ponerlo en los post, se puede hacer esto? aka te dejo una imagen y la direccion de mi blog para que veas, tks por tu ayuda, saludos ;)

imagen:
http://2.bp.blogspot.com/-s8sGxoJq78Y/T4xTzcgeu_I/AAAAAAAAA08/V5W-KqzNMc8/s400/Untitled-1.jpg

blog:
www.elpsicoasesor.com

JMiur  

Se hace de modo similar pero debes usar otras reglas de estilo, básicamente, cambiar todo lo que diga:
.post-labels
por
#Label1

y luego, habría que ver porque es posible que también haya que agregar otras reglas para quitar las propiedades que tienen ahora ya que, al parecer, es una lista. Una vez hecho lo primero, podría verificarse como perfeccionar lo segundo.

Responder
ulises tomas  

listo!! tks!! ya lo agregue, pero me gustaria que le hecharas un vistazo a lo mejor me puedes dar algunos tips para perfeccionarlo, gracias tu ayuda a sido muy eficiente, saludos ;)
mi blog: www.elpsicoasesor.com

Responder
dhayzon Wiemeyer  

por q no me funciona
en
http://dhayzon.blogspot.com

JMiur  

No veo el problema, allí esta en cualquier página individual, arriba, a la derecha del título.

Responder
Manuel Benitez Macias  

No me funciona el truco...y mucha idea de programacion no tengo...sabes que puede ir mal en mi pagina?

http://mi-fotografiadigital.blogspot.com.es/

gracias de antemano

JMiur  

Lo más probable es que eso te ocurra porque la plantilla que usas no tiene los nombres de clases típicos de Blogger. Por ejemplo, las etiquetas no están en un span cuya clase es post-labels sino en una que se llama art-posttagicon

Así que debes cambiar las reglas de estilo; en lugar de poner:

.post-labels

debes poner

.art-posttagicon


Manuel Benitez Macias  

Muchisimas gracias!! eso era!!! acertaste de lleno!!!
increible tienes un talento increible para esto

JMiur  

Perfecto, Manuel.

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola: Ya conseguí encontrar los códigos en las nuevas modificaciones de HTML.Y decoré las etiquetas.
Le da un toque diferente.Me encantan.Como siempre enseñándonos cosas elegantes
Muchas gracias

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR