Convertir etiquetas en botones | Oloblogger Con CSS y algo de imaginación, se pueden generar bastantes efectos quasi-profesionales. En este caso vamos a convertir la lista simple de ca...

18 de mayo de 2009

Convertir etiquetas en botones

Con CSS y algo de imaginación, se pueden generar bastantes efectos quasi-profesionales. En este caso vamos a convertir la lista simple de categorías que nos proporciona Blogger, en unos botones que nos llevan a los posts de cada etiqueta.

En primer lugar, accedemos por Elementos de Página y añadimos un Nuevo Elemento, tipo Etiquetas. No importa si ya tenemos otro. Podemos probar como queda este, manipularlo y luego borrar este o el anterior que tuviéramos. Lo mejor es ponerle un título que no tengamos, para localizar mejor el código HTML que se generará en nuestra plantilla y que tendremos que modificar después. Pongamos que le llamamos "pruebabotones".

Ahora nos vamos a Diseño, Edición de HTML y expandimos Plantillas de Artilugios. En cualquier lugar, antes de ]]></b:skin>, insertamos la siguiente clase, que será la que le de aspecto de botonera a las etiquetas.

/* Botones
----------------------------------------------- */

/* Aspecto normal */
#botlista a, #botlista a:visited {
position:relative;
text-decoration:none;
text-align:center;
background-color:#990000; /* Color fondo botón */
color:#cccccc; /* Color letra */
display:block;
width:10em; /* Ancho del botón */
border:2px solid #999999; /* Tamaño del borde */
border-color:#444444 #333333 #333333 #444444; /* Color bordes */
padding:0.25em;
margin:0.5em auto;
}

/* Aspecto al pasar el puntero por encima */
#botlista a:hover {
top:0px; /* Valor distinto de 0, simula movimiento vertical */
left:0px; /* Valor distinto de 0, simula movimiento horizontal */
color:#ffffff; /* Color texto */
border-color:#333333 #444444 #444444 #333333; /* Invierte colores borde para simular pulsación */
}
Todo lo que está entre /* y */ explica qué cosas podeis modificar para dejar los botones con el mismo estilo que vuestro blog y si os estorba, podeis borrarlo después de instalarlo en vuestra plantilla.

Ahora seguimos plantilla abajo, buscando el título que le pusimos a las etiquetas (pruebabotones) y nos encontraremos con un código como éste:

<b:widget id='Label4' locked='false' title='pruebabotones' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' id='botlista'>
<!-- <ul> BORRAR -->
<b:loop values='data:labels' var='label'>
<!-- <li> BORRAR -->
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
</b:if>
<!-- <span dir='ltr'>(<data:label.count/>)</span> BORRAR -->
<!-- </li> BORRAR -->
</b:loop>
<!-- </ul> BORRAR -->

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Hay que eliminar todas las líneas en gris, marcadas con comentarios BORRAR y añadir las instrucciones en verde: id='botlist' y (<data:label.count/>). Con eso, teneis funcionando vuestras etiquetas.

Si quereis que no aparezca entre parentesis el número de post de cada categoría, teneis que borrar el segundo de los indicados en el anterior párrafo (data:label.count).

Una vez comprobeis que funciona, ya podeis cambiar colores, bordes, fondos, posiciones. Sustituir background-color:#990000; por background:url (URL_imagenfondo); da unos resultados espectaculares.

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

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

109 comentarios :

  1. LISTO! que fácil. muchas gracias otra vez Oloman

    ResponderEliminar
  2. Y bien mono que te quedó con tus colores ;)

    Si acaso, yo pondría el borde superior igual que el izquierdo, pero eso ya es gusto de cada cual.

    ResponderEliminar
  3. Oloman, buen truquillo este :-) Me parece lindo, le podemos dar aspecto de menú a las etiquetas :-D

    ¡Saludines!

    ResponderEliminar
  4. Hola!

    yo quería consultarte dónde puedo ver que periódicos o webs usan este servicio o si tu sabrías decirme: http://oloblogger.blogspot.com/2008/10/twingly-para-promocionar-tus-posts.html

    Un saludo.

    ResponderEliminar
  5. Claro y sencillo, muy interesante. En mi plantilla no quedan bien (lo he probado con unos cuantos cambios). pero quién sabe cuanto me durará la plantilla.
    ¿Has pensado en poner el blog en un pdf para bajarse? Tendré que hacer una copia de seguridad de tu blog, :)

    ResponderEliminar
  6. Deportivista: No te puedo decir qué periódicos ligan con este servicio. Sólo te puedo confirmar La Vanguardia.

    Mujer Quijote: Me da pereza hasta hacer una copia de los posts, así que ni me he planteado lo de otros formatos. De todas formas, si pierdes este, no creo que tengas problemas en encontrar cosas similares en otros blogs de ayuda muy buenos (Ver desplegable "Otros sitios de ayuda")

    ResponderEliminar
  7. Gracias por decirme lo del color de línea. De tanto cambiar y probar me quedó así. veía algo raro pero no sabía que era, ahora está mejor

    ResponderEliminar
  8. Muchas gracias por este blog de ayuda, tiene artículos muy buenos.
    Ahora tengo una duda sobre este tema, que se da también usando algún otro efecto y es que cuando se selecciona una etiqueta, esta pierde el formato, queda en modo texto sin enlace, ¿se podrá buscar alguna modificación?
    El efecto se puede ver en http://pescaderiaseltimon.blogspot.com/.
    Gracias y adelante.

    ResponderEliminar
  9. muchas gracias por tu ayuda pero intento hacerlo en esta lantilla y me da error No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Element type "div" must be followed by either attribute specifications, ">" or "/>". por mas que lo intento es en el blog de trueque y lo queria poner en todos

    ResponderEliminar
  10. pues en este otro me funciona pero las funciones del boton no funcionan por mas que le cambio cosas
    http://premiosbloganabego.blogspot.com/
    son plantillas diferentes lo volvere a intentar y si no me dare por vencida

    ResponderEliminar
  11. Angel: Los botones del blog que das como referencia, funcionan bien.

    Para aclarar un poco más, todo lo referente al aspecto que tendrá el botón al pasar el puntero por encima, está en la parte CSS a:hover. Si por ejemplo quieres que al pasar el puntero, el fondo, el borde, etc. desaparezcan para que se quede como un enlace de texto normal, pues allí tendrás que añadir
    border:0px;
    background:none;
    etc.

    Ana y Bego: El error que os da es porque no habeis cerrado bien algún DIV.

    ResponderEliminar
  12. Hola.
    Hoy mi pregunta no va de diseño.
    ¿En blogger se puede modificar el archivo robots.txt y añadir un sitemap?
    Sabría, creo, modificar uno y crear el otro, pero cuando llega la hora de subir el archivo al servidor, ¿cómo se hace en blogger? (si es que se puede hacer, claro).
    En algún post hablaste de que al poner un sitemap en este blog, habías tenido problemas de indexación con google. ¿Merece la pena un sitemap o es mejor no enredar mucho?
    Un saludo y gracias.

    ResponderEliminar
  13. Acabo de ver como se sube un sitemap.
    Me queda lo del robots.txt y tu opinión de si merece la pena.
    Gracias.

    ResponderEliminar
  14. Hola Mujer Quijote.

    Supongo que encontraste que lo del sitemap se puede hacer de manera fácil, desde Herramientas para Webmasters de Google. Te comento que mis problemas de indexación vinieron por otra causa que todavía no he logrado encontrar, ya que tal como vinieron se fueron. Pero descarto que fuera por crear el sitemap.

    En un principio, no está mal que se cree, pero tampoco veo que suponga una gran ventaja. Lo único que me gusta es que buscando con Google, tras el título del blog se incluye una breve reseña de los posts supuestamente más importantes. Digo supuestamente porque realmente con Blogger sale lo que a Google se le antoja.

    Sobre el robots.txt, mis escasos conocimientos sobre posicionamiento me indican que sólo sirve para permitir/anular la indexación de ciertas páginas. Si no lo tienes, se indexan todas.

    En nuestro caso, el robots.txt de Blogger no se puede modificar. Por lo menos hasta donde yo sé. De hecho, se crea automáticamente y hoy en día (en otro tiempo no fue así), incluye un parámetro para que NO se indexen las páginas correspondientes a búsquedas por etiquetas.

    Puedes ver el tuyo escribiendo
    http://NOMBRE_BLOG.blogspot.com/robots.txt

    Verás que incluye un
    Disallow: /search
    que sirve para esto último que expliqué.

    ResponderEliminar
  15. Hola otra vez.
    Sí, ése es el problema, bueno, no sé exactamente si es un problema, me da un montón de errores de rastreo por esa línea y no tengo muy claro qué es eso de no indexar páginas de búsquedas por etiquetas. Pero al ver errores me saltaron las alarmas. Pero por lo que dices parece que no es ningún problema, así que me olvido.
    Lo del sitemap me lo pensaré, parece que no da problemas pero tampoco ventajas. Como el mío es un blog sin publicidad y no me preocupa no recibir visitas, no parece que aporte nada , así que lo más seguro es que no me complique tampoco.
    Muchas gracias.

    ResponderEliminar
  16. muchas gracias por la explicacion....
    me viene de puta madre
    saluditos

    ResponderEliminar
  17. Por aquí otra vez... existe manera de que se vean horizontalmente?? quiero ponerlas en otro blog pero intento cambiando algunas cosas y no he podido hacerlo. Por otro lado me encanta tu casita de inicio, donde encuentro íconocs de ese estilo? muy agradecida, te envio saludos

    ResponderEliminar
  18. Con las modificaciones en la imagen de fondo que tú necesites Ian, creo que este post te puede servir: http://oloblogger.blogspot.com/2007/08/pestaas-automticas-con-categoras.html

    ResponderEliminar
  19. Se me olvidó lo de la casita, Ian. Si la quieres, tómala. Más iconos en http://oloblogger.blogspot.com/2009/01/15000-iconos.html

    ResponderEliminar
  20. ¡Muy buenas señor!
    Primero felicitarte por tu blog.
    Y segundo... he hecho toda la edición de esta entrada y funciona bien, pero no consigo poner una imagen como fondo para el botón. Pongo la URL de la imagen que está almacenada en "ImageShack". No sé ¿alguna pista?

    Gracias.

    ResponderEliminar
  21. @Ignazio Balboa. En la clase .botlista a tienes que cambiar
    background-color:#990000; /* Color fondo botón */
    por

    background:url(DIRECCION_IMAGEN_NORMAL);

    Y si quieres que cambie la imagen al pasar el puntero por encima, .botlista a:hover, anadir una línea...

    background:url(DIRECCION_IMAGEN_HOVER);

    ResponderEliminar
  22. Hola otra vez oloman!

    Disculpa que te tenia loco preguntando por aqui y por alla! Este es el blog:http://de-shopping.blogspot.com/ hace poco que lo empeze y lo quiero estrenar en 2 semanas con mis amigos y por supesto para todos las demas personas que deseen visitarlo,Como veras hay mucho por hacer en la plantilla, lo que busco es:

    *Crear un menu desplegable del archivo con la apiencia que tu usas en tu blog (despegable pero sin caja) de ser posible anadir un efectosobre el titulo

    *Anadir una linea de separacion entre cada Articulo pero no enmarcarlo solo abajo de cada Post,

    *Anadir una segunda columna al lado izquierdo.

    y me gustaron mucho los botenes que usabas en tu plantilla anterior Cuadrados) me gustaria aplicarlo pero con otro fondo por ej, una bolsa un cupon etc para anadir algunos enlaces.

    Tambien quiciera ver si pudiera agregar alguna decoracion al titulo de cada articulo considerando la etiqueta (actualmente uso las etiquetas para clasificar los articulos)

    Agradezco infinitamente tu tiempo y Ayuda para todos los que estamos aprendiendo a editar blogs!
    y personalmente te felicito por tu labor altruista...!

    Agradezco cualquier sugerencia!!!

    Mil gracias!!!
    karla
    pd. disculpa la ortografia (tampoco es mi fuerte je,je) ademas no tengo habilitado el teclado para espanol jeje{}.
    karla.

    ResponderEliminar
  23. Hola oloman!

    Empece a trabajar s/ los botones pero no me salieron, :

    Revice revice y segun yo esta =
    * Donde estara el error??
    puedes ver como quedo en el blog:

    http://de-shopping.blogspot.com

    Tambien revice el texto que inserte s/ el aspecto de los botones y esta segun yo =

    Te agradezco infinitamente si me pudiieras ayudar!!!


    karla

    ResponderEliminar
  24. Si te parece, vamos a ir poco a poco Karla, porque si atendiera seguido todo lo que pides, tendría que cerrar el blog una semana :)

    Los botones... Lo primero que necesitas para aplicar este truco, es etiquetar tus posts. Luego tienes que aplicar este truco. Sin etiquetas no es posible modificar las idems...


    Una segunda cosa en la que no se tarda mucho, la barra de separación. Buscas con artilugios expandidos <div class='post-footer-line post-footer-line-3'/> y a continuación añades <hr/>. Si prefieres una imagen que simule una barra, colocas en lugar de eso < img src='URL_IMAGEN'/>

    ResponderEliminar
  25. Gracias! eres mi Idolo, lo de la Linea es muy facil y me encanta poder remplazarlo por imagen,
    Si te pudiera pagar por los favorcitos creeme que lo haria!

    Ahora, con lo de los botones:

    Antes de hacer todo lo que explicaste ya habia puesto etiquetas, no se si viste mi blog , pero ya aparecen pero ahora horizontalmente, sin parentesis, por lo que borre, pero no aparecen los botones,Cual fue mi error?

    Gracias!!

    ResponderEliminar
  26. Hmmm... Habría que ver el código HTML de tus etiquetas. Haz una copia de seguridad de tu plantilla y mándamela a mi correo (fichero .XML)

    ResponderEliminar
  27. hola!

    Cual es tu correo??
    Gracias!

    ResponderEliminar
  28. Abajo del todo Karla. Cerca del botón rojo.

    ResponderEliminar
  29. Hola yo tengo wordpress, como lo hago, estoy bastante pez en esto del diñeno de blogs. Gracias Marian

    ResponderEliminar
  30. Hola! yo soy muy torpe... tengo la Dots dark y no logro ponerle pestañas, bueno, ni eso ni nada... siempre me dice que no cierro bien los comandos o cosas así y yo lo que hago es copiar tal cual viene en los posts ¿qué falla?. La verdad es que no tengo ni idea de html pero estoy desesperado, no sé si hay que respetar los espacios entre líneas, las tabulaciones, etc. Yo copio y pego y nada. Oops!!

    Por cierto, gran trabajo el tuyo... gracias!

    ResponderEliminar
  31. Niño B, eso pueden ser dos cosas, o bien que que te dejas algún caracter de más o de menos (punto y coma, <, >...) o bien que insertas el código en un sitio distinto del indicado.

    ResponderEliminar
  32. Bueno, no sé exactamente por qué me fallaba, pero he buscado las vueltas para cortar y pegar de otro modo y ahora va... Muchas gracias!!
    Niño B

    ResponderEliminar
  33. Estupendo, pero además de copiar y pegar, intenta también entender lo que haces ;)

    ResponderEliminar
  34. Excelente chicos gracias!, me funcionó a la perfección! a ver si me animo luego a cambiar el background con una imagen. Eso sí, el tamaño de la imagen se adapta?? o hay que cambiarlo?

    ResponderEliminar
  35. A ver Pabela. La imagen de background se adapta al espacio del botón, pero no quizás como tu crees. Usando el código de esta entrada, los botones ocupan un ancho-alto fijo, definidos por el WIDTH que se ha puesto y por el LINE-HEIGT que cada uno tenga en su blog. Por tanto, ese es el tamaño que tiene que tener tu imagen, exactamente.

    En general, el background se adapta al contenido donde se ponga, pero no es que haga zoom, sino que se "recorta" la parte de la imagen necesaria para ocupar todo el espacio, ni más ni menos.

    ResponderEliminar
  36. Hola buenas tardes, el blog es estupendo, estoy comenzando y mi pregunta es la siguiente, quiero poner botones, que al pinchar sobre ellos se desplieguen las entradas como en el siguiente blog

    me podrias ayudar, un saludo

    ResponderEliminar
  37. perdon olvidé poner la direccion del blog

    http://argentinajolie.blogspot.com/

    por ejemplo el boton cocina

    ResponderEliminar
  38. Hola Luz
    Lo tienes explicado en esta entrada y en la siguiente:
    http://oloblogger.blogspot.com/2008/02/elementos-que-aparecen.html
    http://oloblogger.blogspot.com/2008/02/en-cualquier-parte-de-la-pgina.html

    ResponderEliminar
  39. Gracias, intentaré hacerlo y ya cuento como me fué, otro problema que tengo es que he puesto música y cada vez que pincho en una entrada comienza de nuevo la lista de reproducción, y a mi me gustaría que siguiese, estoy haciendo el siguiente blog de forma experimental ya que me interesa hacer uno para mis alumnos, muchas gracias por tu ayuda, www.luzcocina.blogspot.com

    ResponderEliminar
  40. Hola Luz. El problema es que cada vez que cambias de página estás reiniciando el sonido. Hace tiempo se nos ocurrió una pequeña idea para solucionar lo que comentas, abriendo el fichero de música en una página aparte y manteniéndola oculta al usuario detrás de la principal.
    Música en tu blog, una solución flexible
    A ver si te sirve...

    ResponderEliminar
  41. Gracia ya lo intentare, otra cosita, como hago para que a una entrada solo puedan acceder las personas a las que les proporcione una contraseña
    disculpa que te moleste tanto, muchisimas gracias por tu ayuda

    ResponderEliminar
  42. Luz, no conozco una forma efectiva de hacerlo sin poder manejar bases de datos (en Blogger no podemos). La única posibilidad es marcar el blog para que sólo lo puedan leer personas invitadas, pero eso hará que sean privados todos los posts del blog.

    Si es más de un post, quizás te convenga hacer un segundo blog paralelo al primero (con el mismo estilo incluso) con los posts privados y con la marca de "sólo invitados".

    ResponderEliminar
  43. Esto es lo que me quieres decir verdad, si hay alguna forma de mejorarlo me lo indicas, gracias

    www.luz-ticbachillerato.blogspot.com

    es el tema1 el que quiero que solo puedan entrar por contraseña, me gustaria que al pinchar sobre la etiqueta ya directamente me pidiese la contraseña y la forma que sé es como está aquí

    ResponderEliminar
  44. Sí, Luz, exacto. Eso es lo único que se me ocurre. Pero ahora no se trata de meter una contraseña, sino de que tú autorices a los usuarios que creas conveniente, grabando en el apartado correspondiente del panel de administración sus cuentas de correo.

    ResponderEliminar
  45. muchas gracias, tengo un problema con el gif y el contador, yo en mi equipo lo pongo para que quede justo el gif y el contador debajo, como lo tienes en este blog, pero al abrir el blog en otro equipo el contador se me va para otro sitio y en el otro blog de cocina se me coloca encima de la siguiente etiqueta.
    Otra cosa par autorizar sirve cualquier cuenta de correo o tiene que ser de gmail.

    ResponderEliminar
  46. Lo del contador tiene pinta de que haya poco espacio en esa sidebar para la imagen numérica. Si puedes hacerla más ancha sin que se descuadre todo, hazlo y compruebas si era eso. Puedes utilizar Vista Previa antes de grabar. Si no puedes ensanchar, entonces prueba a poneer el siguiente padding-left a cero para ganar 10px.
    .sidebar .widget {
    margin: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 10px;
    border-bottom: 1px solid #ddd;
    }

    Para lo otro creo que vale cualquier cuenta registrada en Google, aunque no estoy muy seguro. De todas formas si los datos a "esconder" no son de seguridad nacional, quizás puedas esperar una semanita o así (lo tengo agendado sin fecha), porque voy a ver si publico un par de soluciones para lo que quieres. Ya te advierto que no son seguras y que cualquiera con algunos conocimientos de HTML o Javascript podrá encontrar la contraseña de la página fácilmente.

    ResponderEliminar
  47. bueno eso esta claro, pero no es nada de seguridad nacional es un tema hecho en video pero de interes unicamente para mis alumnos, no creo que a nadie más le interese un toston de teoria sobre la evolucion de los ordenadores

    ResponderEliminar
  48. Vale Luz. A ver si no tardo mucho en publicar algo que te valga. Saludos.

    ResponderEliminar
  49. hola oloman, te queria hacer una pregunta.

    como haces para que los botones que estan al final de tu pagina tengan ese efecto al pasar el puntero sobre ellos????? te agradezco una respuesta a alfonso_cano@live.com, y de antemano gracias

    ResponderEliminar
  50. Hola supongo que te refieres a que se "mueven" al pasar por encima el puntero. Para eso creas una clase y luego los encierras todos dentro de un DIV con esa clase:
    .botones a:hover {
    position:relative;
    top:1px;
    left:1px;
    }

    .../...

    <div class="botones"><img src="...

    ResponderEliminar
  51. perdona mi ignorancia pero EN QUE SITIO COLOCO ESA "CLASE"

    ResponderEliminar
  52. Lo primero antes de /B:SKIN. Lo segundo, donde tengas tus botones.

    Saber más.

    ResponderEliminar
  53. oloman, estas seguro que el codigo
    .botones a:hover {
    position:relative;
    top:1px;
    left:1px;
    }

    esta bien escrito??, me sale un cuadrito blanco con una X roja

    ResponderEliminar
  54. te dejo el enlace para que veas a que me refiero http://www-hlvs.blogspot.com.... por que pasarà eso, te agradezco una mano amigo perdona tanta molestia

    ResponderEliminar
  55. Alabado sea Javeh...(perdona mi insistencia jaja) fijate Oloman, el error estaba en la div class. no se requiere colocar lo ultimo eso de img src y ademas ahi que cerrar con DIV por fin lo resolvi

    queria darte las gracias por darme la pauta

    ResponderEliminar
  56. Hola Oloman!
    Antes que nada gracias por tener este blog.
    He intentado ya varias veces modificar el código de la plantilla según indicás, pero lo que ocurre es que el código inicial de mi plantilla difiere con el que vos proponés, es decir: hasta reinicié el blog nuevamente para ver si estaba haciendo algo mal, y no logro identificar lo que vos describís.
    Ejemplo.

    No puedo citar la diferencia, dado que no se permite html. Sin embargo quizás puedas decirme, ¿qué está ocurriendo?

    El blog que estoy creando se llama
    http://fototallerpuntodevista.blogspot.com

    Y lo que quisiera es hacer una botonera parecida al que hizo el amigo Fraga en
    http://fragacomics.blogspot.com/

    Gracias!

    ResponderEliminar
  57. Hola Virginia. Las referencias de código que se dan, salen como resultado de crear un nuevo gadget llamado "pruebabotones". Por tanto, si primero lo creas, luego tiene que salir con seguridad.

    No obstante, lo que tiene Fraga son unos botones hechos "a mano", que es otro sistema distinto. En su caso, se trata de crear un gadget tipo HTML/JavaScript y allí introducir el código de los enlaces hechos con imágenes.

    ResponderEliminar
  58. Hola Oloman otra vez.

    Lo tratado en el código de enlaces - apropiado para mí el BTP de todos modos - no me contesta.

    Yo tengo las imágenes para crear ese tipo de botones hechos "a mano": cada botón tiene una imagen distinta. He recorrido la plantilla varias veces, queriendo encontrar los indicios de cada etiqueta en particular, para incrustar el enlace y no lo encuentro. Quizás sea que busco mal lo que yo llamo "indicios". Estoy buscando la palabra que he puesto por ahora a mis etiquetas, y en la plantilla esta palabra no aparece.

    Para cerrar: tengo 4 etiquetas diversas, a las que quiero incrustar 4 imágenes diversas y no sé en qué parte de la plantilla hacerlo.

    Gracias por la paciencia, y voto por inaugurar un BPMT (Bloger Para Muy Torpes).

    ResponderEliminar
  59. Virginia, en la plantilla no encontrarás las etiquetas porque estas vienen como variables. data:post.label.name, creo recordar. Cada vez que el intérprete ve esa variable, acude a la base de datos de Blogger, lee el nombre de una etiqueta, la imprime en pantalla y vuelve a leer la siguiente.

    Realmente sólo necesitas las direcciones que te muestran todas las entradas con determinada etiqueta y eso lo ves simplemente pinchando en las que tienes actualmente y fijándote en la barra de direcciones de tu navegador.

    En tu caso son estas cuatro:
    http://fototallerpuntodevista.blogspot.com/search/label/INICIAL
    http://fototallerpuntodevista.blogspot.com/search/label/BLANCO%20Y%20NEGRO
    http://fototallerpuntodevista.blogspot.com/search/label/DESARROLLO%20DE%20PROYECTO
    http://fototallerpuntodevista.blogspot.com/search/label/ILUMINACION%20Y%20PUESTA

    ResponderEliminar
  60. Entonces

    ¿cómo aplico una imagen a esas direcciones?

    (BPMMT)

    ResponderEliminar
  61. Podría darte el código concreto Virginia, pero siendo una cosa tan básica, casi mejor lo intentas por tí misma y así lo aprendes para siempre. Te remito al enlace que te dije anteriormente.

    Estoy seriamente pensando en crear una categoría extra, del tipo de las iniciales que dices ;)

    ResponderEliminar
  62. como siempre oloman estupendo! gracias por todos tus aportes de conocimientos

    ResponderEliminar
  63. The good thing about your information is that it is explicit enough for students to grasp. Thanks for your efforts in spreading academic knowledge.
    qualitative dissertation

    ResponderEliminar
  64. Hola que tal! antes que nada muchas gracias por comparir tus conocimientos con los que no sabemos casi nada, o más bien nada de html ni css, he de decir que gracias a tu blog he ido aprendiendo poco a poco y he podido personalozar mi blog ;)

    (http://e-monter.blogspot.com)

    Bien, mi consulta es la siguiente, estoy utilizando la plantilla minima black y necesito que detras de mis etiquetas salga una imagen que tengo alojada en la web únicamente cuando pase el puntero detrás de ésta... la idea es señalarlo con un triángulo sin fondo que saldrá a la izquierda del título de la etiqueta en lugar de que salga subrayada, tengo una imagen de ejemplo anexada por si no he podido explicarme bien...

    URL...
    http://farm3.static.flickr.com/2798/4319539234_106b5322cc_o.jpg

    De antemano muchísimas gracias por todos los conocimientos brindados a través de tu blog!!

    enhorabuena!

    ResponderEliminar
  65. Hola Eloy

    En esta entrada está lo que necesitas. Te interesa verlo todo para entender cómo funciona, pero el código sería el último (listas4). En el enlace tú no tendrías que incluir imagen ninguna y sí hacerlo en el HOVER. Con respecto al código del ejemplo, tampoco te haría falta BACKGROUND en ninguno de los dos (enlace y enlace-hover).

    El selector en tu caso (en lugar de listas4), creo que sería left-sidebar-wrapper ul, etc.

    ResponderEliminar
  66. Hola. No he podido modificar nada ni crear los botones. No sé por qué. Alguien pude ayudarme?.
    Saludos. Pere P

    ResponderEliminar
  67. Sí, claro... pero deberías explicar un poco que hiciste y que se veía o que es lo que no se veía.

    ResponderEliminar
  68. Muchísismas gracias!! y nuevamente agradezco el que compartas con todos tus conocimientos!!

    éxito!!

    ResponderEliminar
  69. Me gusta mucho tu página web, y tengo un problema con la mía, quiero poner un Menú Desplegable, pero no el de botones cómo el que aparece en Comentarios donde dice:

    - Live Journal
    - WordPress
    - TypePad
    - AIM
    - OpenID

    Quiero un menú más elaborado cómo el de ésta página:

    - http://wwe-inlive.blogspot.com/

    Bueno, te dejo aquí mi página web:

    - http://ciberwrestling.blogspot.com/

    Cómo veras es de lucha libre y quisiera mejorarlo un poco más con un Menú, y algúnos trucos.. Te dejo mi email para ver si me podrías mandar algúnos truquillos ;)

    Gracias, mi correo es wasong.10@hotmail.com

    ResponderEliminar
  70. Empieza por esta entrada
    http://oloblogger.blogspot.com/2008/05/mens-crea-tu-propio-estilo.html
    Seguramente con eso tengas suficiente.
    Saludos.

    ResponderEliminar
  71. Hola oloman buen post sera posible poner una imagen con su rollower correspondiente pero para cada etiqueta.Por ejmplo descargas de naruto sustituir las palabra por una imagen de naruto y una que diga descargas de one piece sustituirla por una imagen de one piece y asi sucesivamente .¿como se haria si fuese posible?.
    GRACIAS.SALU2

    ResponderEliminar
  72. Hola oloman oie ,aparte de mi otra duda pues he seguido todos tus pasos ,pues si te fijas en mi blog quiero cambiar la etiqueta ,que puse en prueba botones por la imagen de abajo .Pero no me sale segun blogger no se guarda la configuracion porque talvez falta ">".Pero pues lo checo y nada .Tambien note que el widget prueba botones es distinto al que pusiste como ejemplo .No puedo publicar mi widget pero me gustaria que lo checaras en mi blog ,ahi voy a poner un post con el codigo de mi widget.

    Espero que me puedas ayudar aver en que debo de cambiar.
    GRACIAS.

    ResponderEliminar
  73. Hey oloman lo siento no pude publicar el codigo pues com que no lo reconoce y lo vuelve transparente .No se si me pueda comunicar contigo de otro modo donde te pueda enviar mi codigo que esta medio marciano ,porque en mi codigo de fuente no se puede poues porque no esta la plantilla expandida

    ResponderEliminar
  74. Orochimarusama, es posible hacer lo que quieres, pero hacerlo de forma automática sería muchísimo más engorroso que hacerlo de forma manual. Así que en lugar de intentar aplicar esto, mejor creas unos botones (a mano) con las imágenes que quieras, el enlace necesario y el efecto rollover que gustes. De esto último aparecen varios ejemplos en este mismo blog a través del buscador.

    Para lo que quieres, te recomiendo primero este enlace en concreto.

    ResponderEliminar
  75. hola oloman, te cogí este truco de etiquetas que me encantó para mi blog de intercambios de conocimientos, pero si quisiera cambiarlo a uno que se desplegara (por ejemplo si tengo poesías (3) que la gente al desplegarlo cogiera para leer la que quisiera) he intentado hacerlo pero me coge dos apartados de etiquetas en el blog.....
    muchas gracias

    ResponderEliminar
  76. Las etiquetas en Blogger no tienen subcategorías como para poder hacer lo que quieres con lo que se explica en esta entrada.

    Lo más parecido a lo que quieres que yo sabría hacer, es lo que puedes ver en este enlace:
    http://oloblogger.blogspot.com/2009/11/indice-por-categorias.html

    Suerte ;)

    ResponderEliminar
  77. Oye no entendi mucho tu POST cres que puedas hacer un Video Tutorial para ayudarme porfas ?

    te lo agradeceria muchisimo :D

    ResponderEliminar
  78. Chapithaz, lo de los vídeos no es lo mío :D, pero creo que si vas leyendo y al mismo tiempo haciendo lo que se dice, te saldrá sin problemas. Siempre podrás ver el resultado antes de grabar los cambios usando Vista Previa, así que sin miedo.
    Saludos.

    ResponderEliminar
  79. Maravilloso blog! Una duda que no veo que en los comentarios se haya planteado o a lo mejor es problema en mi blog. Una de las etiquetas, por mucho que ensanche la columna siempre me dobla renglón. El ancho es de sobra y aunque lo cambie el ancho de los botones es el mismo. Como se puede cambiar el ancho de los botones (no estoy utilizando imágenes)?

    Gracias de antemano

    ResponderEliminar
  80. Hola
    La línea que marca el ancho del botón es esta:

    width:10em; /* Ancho del botón */

    Cambia el valor "10em" por 20px, 35px... o los pixels que necesites. Eso debería ser suficiente.

    ResponderEliminar
  81. Hola Oloman, una pregunta. Cuando pulso en una etiqueta me dirige a la consiguiente pagina con los posts etiquetados. En esa pagina si miro otra vez las etiquetas la que he pulsado se mueve hacia la izquierda y no tiene botón. Alguna forma de mantenerla centrada? Muchas gracias

    http://elantepenultimomohicano.blogspot.com

    ResponderEliminar
  82. Eso es porque el gadget de etiquetas está preparado para que la categoría seleccionada aparezca sin enlace. Así, de alguna manera, se indica que estamos viendo las entradas de esa etiqueta. Por otra parte, no es lógico pinchar de nuevo en ella cuando precisamente ya la estamos visualizando.

    Dicho esto, el código que aquí puse configura sólo los botones con enlace porque "ataca" directamente los enlaces (.botlista a), dejando el estilo por defecto para texto sin enlaces, para el que no lo lleva. Ese debe ser el estilo que tienes tú, a la izquierda y color blanco.

    Creo que se solucionaría añadiendo propiedades a la clase .botlista sin enlace, es decir, insertando:
    .botlista {
    text-align:center;
    }

    Y si quieres, algún borde, fondo, color...

    ResponderEliminar
  83. En teoría eso está puesto, pero sigue igual

    /* Botones
    ----------------------------------------------- */

    /* Aspecto normal */
    #botlista a, #botlista a:visited {
    position:relative;
    text-decoration:none;
    text-align:center;
    background-color:#0080FF; /* Color fondo botón */
    color:#cccccc; /* Color letra */
    display:block;
    width:16em; /* Ancho del botón */
    border:2px solid #999999; /* Tamaño del borde */
    border-color:#444444 #333333 #333333 #444444; /* Color bordes */
    padding:0.01em;
    margin:0.1em auto;
    }

    /* Aspecto al pasar el puntero por encima */
    #botlista a:hover {
    top:0px; /* Valor distinto de 0, simula movimiento vertical */
    left:0px; /* Valor distinto de 0, simula movimiento horizontal */
    color:#ffffff; /* Color texto */
    border-color:#333333 #444444 #444444 #333333; /* Invierte colores borde para simular pulsación */
    }
    GRACIAS OLOMAN

    ResponderEliminar
  84. No Emilio, no está puesto. Hay que añadirlo. Fíjate que tienes #botlista a y eso no es lo mismo que #botlista. El primero es para el estilo de los enlaces y el segundo el general (sin o con enlace). Añade lo que te dije ;)

    ResponderEliminar
  85. He retomado esto que lo tenía aparcado debido a mi frustación. Y por lo que sea no me sale...añado #botlista {align:center;
    } y nada. Lo he colocado antes de botlista a, después...y nada sigue alineandose a la izquierda.

    Sabes, muchos de los errores que cometo es el copiar a la plantilla tal como viene en tus instrucciones, es cómo si después variaran comas,comas altas....yo que se!!!Gracias Oloman por tus consejos.

    ResponderEliminar
  86. Pues acabo de responderme a mí mismo...sabes por qué no se veía...la vista previa no lo recogía...guardando, sin problemas. Ay Emilio. Gracias Oloman.

    ResponderEliminar
  87. No hay de qué Emilio. No imaginaba que realmente no guardabas los cambios y ya no sabía qué es lo que pasaba para que no funcionara. Bueno, un problema menos ;)

    ResponderEliminar
  88. hola Oloman!
    estoy de nuevo por aquí :)mi amiga esther tiene estos botones que tu me dices en su blog y me ha dicho que los sacó de ti ;P pero claro, mi duda es la siguiente...
    ¿puedo hacer estos botones en caulquier imagen sin tener q ser las estiquetas? me explico
    yo tengo unas imagenes para las secciones de mi blog, y me preguntaba si podía darle un "efecto" de pulsado. Porque si a esos botones que tengo, les añado una sombra y luego creo otros iguales un poco mas oscuros ya tendría las dos opciones pero lo que no sé es como hacer para que se vean de una manera y al pinchar se vean de otra haciendo el efecto ese de pulsado... no sé si me explico jeje que desastre...
    un beso y gracias

    ResponderEliminar
  89. si, soy yo de nuevo!! mil perdones!! he estado fozando en tu blog y he encontrado un post donde los explicas claramente, voy a probar a modificar mis imagenes y darle sombras a ver que tal queda... ya te contaré!! asi ya no te molesto jeje
    un beso y buen fin de semana!

    ResponderEliminar
  90. "Rollover" se llama ese efecto Ani, aunque por lo que dices, supongo que ya los has encontrado ;)

    ResponderEliminar
  91. PERFECTO GRACIAS, SOY UN NOVATO PERO SI PUDIERA TE AYUDARIA EN ALGO.

    ResponderEliminar
  92. Hay dos formas de hacer este tipo de cosas AAndi~: entendiéndolas o simplemente copiando y pegando. Prefiero la primera y eso es lo que intento conseguir con mis entradas. Pero si no es así, te queda la segunda opción.

    ResponderEliminar
  93. hola me podrias ayudar,yo hago todos los pasos,creeria correctamente pero cuando dices buscar el boton de prueba,que ay que modificar,no coninciden mis codigos con los que expresas en el tutorial

    ResponderEliminar
  94. El gadget de etiquetas creo que es igual para todas las plantillas ¿puede ser que no tengas marcado "Expandir plantillas de artilugios", Oscar?

    ResponderEliminar
  95. Oloman, ayudame porfavor, hice el primer paso de copiar las caracteristicas del boton, pero cuando voy a borrar lo que dices,en el paso 2, no aparecen varias lineas, SI PUSE EXPANDIR PLANTILLA DE ARTILUGIOS, hice el primer paso mas de 5 veces, pero para el segundo paso es lo mismo, nunca aparecen varias lineas, lo unico que sale es esto:

    [IMG]http://i1130.photobucket.com/albums/m537/DaviDenko_18/Captura.png[/IMG]

    ResponderEliminar
  96. DaviDenko ese trozo de código que me remites no es el del gadget de etiquetas. Lo más fácil es que le pongas un nombre (raro) cuando lo crees y luego busques esa palabra en la plantilla.

    ResponderEliminar
  97. PFFF que tonto, pues si, tenias razón ya esta, arregle eso y muchas gracias por responder, y felicidades por el dominio propio

    ResponderEliminar
  98. DaviDenko eso nos pasa a todos. Y gracias por las felicitaciones, aunque tampoco es para tanto :D

    ResponderEliminar
  99. Muchas Gracias me sirvió de mucho el tutorial hace tiempo que quería darle algo de formato a las etiquetas de mi sección de categoría en mi blog. Y creo que me quedaron bien por lo menos como tenía pensado hacerlo.

    Tengo dos preguntas: La primera es referente a las etiquetas sin enlace, según pude leer en los comentarios Emilio tuvo el mismo problema, y se dio la solución lineas arriba, sin embargo no logro solucionarlo agregando a la clase #botlista pretendo mantener el mismo formato cuando presiono el boton de la etiqueta con enlace. Estoy usando el sig. codigo:

    #botlista { text-align:center;
    position:relative;
    color:#ffffff;
    background-color:#0000FF; font-family:Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:12px;
    display:block;
    width:180px; /* Ancho del botón */
    height:16px;
    line-height:16px;
    border-color:#ffffff #ffffff #0000FF #ffffff;
    }

    Sin embargo no logro ningún cambio, cuando presiona alguna etiqueta se pierde totalmente el formato al no tener enlace quedando antiestético para mi gusto.

    Bueno y la 2da consulta es como podría hacer para que mis etiquetas queden con viñetas similares a la de tu blog.

    Este es la dirección de mi blog: http://www.estared.net/

    Muchas gracias, salu2.

    ResponderEliminar
  100. Daniel Jonathan Tafur Vera a ver si te pasa lo que a Emilio. En la Vista Previa no se aprecia, pero si metes eso justo antes de la definicion de #botlista a, te debe funcionar. Lo acabo de comprobar en tu propio blog.

    Sobre lo de las etiquetas como las mías:
    http://www.oloblogger.com/2007/11/configurar-el-estilo-de-vietas.html

    ResponderEliminar
  101. Muchas gracias Oloman Oloman me sirvió de mucho, tienes razón #botlista tiene que estar antes para notarse los cambios, mis etiquetas estan quedando mucho mejor gracias a ti.

    Sólo que ahora tengo otra inquietud, como te mencioné ya he logrado personalizar las etiquetas sin los enlaces, sin embargo pierdo el centrado con la configuracion css que le di a #botlista.
    Acá te dejo el código que utilice:


    /* CATEGORIA - ETIQUETAS CSS
    ----------------------------------------------- */
    #botlista {
    text-align:center;
    background-color:#7401DF;
    color:#ffffff; /* Color letra */
    font-family:Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:12px;
    display:block;
    width:150px; /* cuando agrego esto se pierde el centrado */
    line-height:16px;
    border:1px solid #ffffff;
    border-color:#ffffff #ffffff #ffffff #ffffff;
    }

    /* Aspecto normal */
    #botlista a, #botlista a:visited {
    position:relative;
    text-decoration:none;
    text-align:center;
    background-color:#000000; /* Color fondo botón */
    color:#cccccc; /* Color letra */
    font-family:Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:12px;
    display:block;
    width:150px; /* Ancho del botón */
    height:16px;
    line-height:16px;
    border:1px solid #ffffff; /* Tamaño del borde */
    border-color:#ffffff #ffffff #000000 #ffffff; /* Color bordes */
    padding:0em;
    margin:0em auto;
    }

    /* Aspecto al pasar el puntero por encima */
    #botlista a:hover {
    top:0px; /* Valor distinto de 0, simula movimiento vertical */
    left:0px; /* Valor distinto de 0, simula movimiento horizontal */
    color:#ffffff; /* Color texto */
    background-color:#0000FF; /* Color fondo botón */
    border-color:#ffffff #ffffff #0000FF #ffffff; /* Invierte colores borde para simular pulsación *
    }

    /* FIN CATEGORIA - ETIQUETAS
    --------------------------------------------------*/

    Como verás lo que pretendo es mantener el mismo formato de los botones con enlaces en las que no tienen enlaces cambiando solo el color de fondo, logro hacerlo solo que cuando quiero establecer el ancho "width:150px" se pierde el centrado de las etiquetas con enlaces y todo. Seguramente me estoy olvidandome de algo, ayudame por favor Oloman, desde que encontre tu blog se me ha pegado las ganas de mejorar mi web, tienes articulos muy interesantes como este, gracias anticipadas.

    ResponderEliminar
  102. Interesante! pero a mí me gustaría tener como estilo de botón las etiquetas que van después de un post ¿cómo lo puedo hacer?

    ResponderEliminar
    Respuestas
    1. Sería añadiendo el primer trozo de código de este post, pero cambiando donde aparece #botlista por .post-labels

      Eliminar
    2. ¡Ah muchísimas gracias! sí me resultó!! lo hice en un blog de pruebas (http://blogdeprueba2052.blogspot.com/) pero ahora lo voy a poner en mi blog verdadero, sólo una última consulta, ¿se puede hacer que los botones de etiquetas queden uno al lado de otro y no uno encima de otro?

      Eliminar
    3. A ver si te vale el segundo de estos dos estilos que propuse como idea.

      De todas formas, antes prueba a el display: block; por un display:inline-block;

      Eliminar
  103. Hola,tengo un problemas con mis etiquetas cuando le doy click al boton funciona bien y todo el unico problema es que cuando ya le di click me manda a la etiqueta que seleccione pero desaparece el boton y solo queda el nombre de la etiqueta,por ejemplo:

    Supongamos que estos son los botones: /-------Boton------/

    Etiquetas:

    /---------------Ejemplo1---------------/


    /---------------Ejemplo2---------------/


    /---------------Ejemplo3---------------/


    /---------------Ejemplo4---------------/


    Supongamos que le doy click a la etiqueta 1 y me manda al link que tiene una vez cargado desaparece el boton y queda algo asi

    Categorias:

    Ejemplo1

    /---------------Ejemplo2---------------/


    /---------------Ejemplo3---------------/


    /---------------Ejemplo4---------------/

    Cual podria ser el error?

    Saludos

    ResponderEliminar
    Respuestas
    1. El error es que no tuve en cuenta ese caso cuando publiqué esta entrada. Cuando estás en una página de etiquetas el enlace de la etiqueta activada desaparece, por lo que el selector "#botlista a" no sirve de nada.

      Habría que añadir uno más y creo que #botlista span serviría:
      #botlista a, #botlista a:visited, #botlista span { etc}

      Eliminar