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 */
}
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: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.
NINGUN DERECHO RESERVADO
59 comentarios:
LISTO! que fácil. muchas gracias otra vez Oloman
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.
Oloman, buen truquillo este :-) Me parece lindo, le podemos dar aspecto de menú a las etiquetas :-D
¡Saludines!
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.
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, :)
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")
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
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.
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
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
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.
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.
Acabo de ver como se sube un sitemap.
Me queda lo del robots.txt y tu opinión de si merece la pena.
Gracias.
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é.
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.
muchas gracias por la explicacion....
me viene de puta madre
saluditos
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
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
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
¡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.
@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);
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.
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
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'/>
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!!
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)
hola!
Cual es tu correo??
Gracias!
Abajo del todo Karla. Cerca del botón rojo.
Hola yo tengo wordpress, como lo hago, estoy bastante pez en esto del diñeno de blogs. Gracias Marian
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!
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.
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
Estupendo, pero además de copiar y pegar, intenta también entender lo que haces ;)
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?
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.
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
perdon olvidé poner la direccion del blog
http://argentinajolie.blogspot.com/
por ejemplo el boton cocina
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
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
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...
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
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".
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í
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.
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.
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.
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
Vale Luz. A ver si no tardo mucho en publicar algo que te valga. Saludos.
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
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="...
perdona mi ignorancia pero EN QUE SITIO COLOCO ESA "CLASE"
Lo primero antes de /B:SKIN. Lo segundo, donde tengas tus botones.
Saber más.
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
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
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
Tú lo hiciste HLVS
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!
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.
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).
PUBLICAR UN COMENTARIO