AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Una forma sencilla de destacar los enlaces

martes, 6 de enero de 2009

El otro día, en Más cosas hice una entrada explicando como poner un contador.
Al mirar como había quedado la entrada, pensé que los enlaces apenas si destacaban, ni siquiera cuando ponía el ratón encima, y se me ocurrió probar una cosa. ¡Funcionó! así que voy a contártelo.
En esta parte del código de la plantilla: a:hover { que es la que define como se van a ver los enlaces cuando pones el ratón encima, añadí estas dos líneas:

padding-top: 5px;
padding-$startSide: 5px;

eso hace que el enlace se desplace cuando pones el ratón encima.
Pero no acababa de convencerme, así que le añadí dos más

border: outset 2px $bordercolor;
background: botonmenubarBgColor;

y así si que me gustó. (Puedes ver el efecto pinchando aquí).

Con esas dos órdenes le dije que todos los enlaces, cuando pasa el ratón por encima, se vean igual que los de la menubar de aquella página.
Con las dos anteriores, el enlace se desplaza ligeramente hacia la derecha y hacia abajo, lo que le da a los enlaces una movilidad.
Lo mejor de todo, es que se desplazan incluso los botones de la menubar, lo que les da más aspecto de botón.

Si te gusta la opcíon, pero solo quieres usarla para las entradas, has de buscar los códigos de post y añadir esas órdenes en un grupo nuevo así:

.post p a:hover {
padding-top: 5px;
padding-$start-Side: 5px;
background: $botonmenubarBgColor; (o el que vayas a poner)
border: 2px outset $bordercolor; (o el que quieras poner)
}

¡Cuidado con la Denim! que en esa plantilla esto sería .post div a:hover {

Si solo quieres que se vea en la sidebar, has de añadir este grupo de órdenes en la zona de la sidebar, preferiblemente con las que definen las listas de la sidebar, (.sidebar li y .sidebar ul) y encabezar este grupo de órdenes así: .sidebar a:hover {

A tener en cuenta si vas a probarlo:

Si no tienes la menubar colocada en tu blog, o no la tienes con colores propios, no dispondrás de la variable botónmenubarBgColor.
En este caso puedes poner el color de cualquier otra zona del blog, que contraste con el fondo de donde estén los enlaces.

También es posible que la tengas pero que se escriba de otra forma.
En este caso aségurate de como se escribe, al igual que la variable del borde, ya que no se escriben igual en todas las plantillas.

Antes de colocar una de esas órdenes, mira al principio de todo de la plantilla, justo encima de body, como se escribe cada cosa.

Lo verás así:
<Variable name="..........." description=".........." etc.>
Donde pone Variable name, lo que haya entre las comillas es como se escribe. Puede estar escrito todo en minúsculas, o solo la primera palabra en minúscula y las otras en mayúscula, pero siempre estarán todas las palabras pegadas, sin espacios entre ellas. Esto es lo que has de poner en las órdenes tras el símbolo $

Lo que haya entre las comillas de description te dice a qué corresponde y eso siempre está escrito con palabras separadas en mayúscula. Esto es lo que ves, traducido o no, en Fuentes y Colores.

Y ya sabes que ante la duda, el comentario o la consulta.

Imprime esta entrada

21 comentarios. ¿Quieres añadir el tuyo?

  1. Graciela ha dicho
  2. Hola Eulalia!!!...voy a probar...veré cómo funciona...gracias por compartir 'tus secretos' y besitos!!!

  3. Jonathan Pita ha dicho
  4. HOLA! Buenas las ayudas! Pero necesito una mano con mi pagina!
    No se cómo hacer para que los botones de los menus tengan vida! Porfavo ayudame! la pagina es:
    estasentuderecho.blogspot.com
    Desde ya, muchas gracias!

  5. Graciela de Palomas ha dicho
  6. Tesoro ya lo he puesto en el blog...ahora todo se mueve jajaja...abrazos!!!

  7. Anónimo ha dicho
  8. JODER QUE BLOG MAS AGOBIANTEEEEEEE

  9. Enrique Ameijeiras ha dicho
  10. Querida e imprescindible:
    Gracias por contestar todos los requerimientos. Por fin encontré el hover y aún poniendo ahí los códigos, los links en mi planilla no reaccionan como uno espera. tuve que definir el color del borde y, si bien me acepta guardar la plantilla, no hace efecto al pasar el puntero. Cosa de mandinga dicen los gauchos en la patagonia. labiblio@gmail.com Soy Enrique. Un abrazo

  11. Eulalia ha dicho
  12. Enrique:
    Ya veo lo del a:hover, pero también veo que no funciona. Haz una cosa, copia esto
    a:hover {
    color:#f5f5f5;
    text-decoration:underline; background: #CC99FF
    }
    y ponlo más arriba, donde debe estar, encima de esta línea
    a img {
    justo donde están las definiciones de los links.
    Luego bórralo de abajo.
    Quizá no veas si ha funcionado en vista previa, pero si el blog carga bien guarda y míralo.
    Yo creo que te funcionará.
    Saludos.

  13. Eulalia ha dicho
  14. Jonathan:
    No se a que te refieres con eso de que tus botones tengan vida, pero veo que se mueven, así que imagino que has podido hacerles algo.
    Saludos.

  15. Eulalia ha dicho
  16. Graciela: Muy bueno.
    Besos.

  17. Eulalia ha dicho
  18. Anónimo:
    Ya que no te dignas dar la cara, ¿sabes lo que te digo? ¡ajo y agua!

  19. Anónimo ha dicho
  20. PERO QUE BURRA ERESSSSSSSSSS
    Y GORDAAAAAAAAAAAAA JAJAJAJAJA

  21. Enrique Carlos Ameijeiras ha dicho
  22. Gracias Eulalia, funcionó. No te conozco pero, si por alguna razón lo que dice este imbécil te hace mella, te digo que somos muchos los que aprendimos de ti. Solo con ver las diferencias entre los primeros post y los últimos de nuestros blogs veremos que en estos tutoriales no hay espacio para estos verdaderos burros descarados.
    Un beso grande y patagónico
    Enrique

  23. Eulalia ha dicho
  24. Hola Enrique:
    Me alegra que funcionara.
    No se por que razón esto estaba ahi abajo. Lo suyo es que esté entre las definiciones de estilo de los enlaces.
    Un abrazo.

  25. Marymary ha dicho
  26. hola, he intentado poner eso en mi blog pero no me sale.
    Si me puedes ayudar te lo agradeceria, me gusta mucho como keda.
    Salu2 ;-)
    Mi blog. themarymaryskitchen.blogspot.com

  27. Eulalia ha dicho
  28. marymary:
    En tu blog tambiéne stá este código, solo que pone a:hover, a:active
    Ahí es donde has de modificar el código.
    Saludos

  29. Marymary ha dicho
  30. Nada, no me sale, se me queda asi:

    a:hover, a:active {
    padding-top: 5px;
    padding-$startSide: 5px;
    border: outset 2px $bordercolor;
    background: botonmenubarBgColor;
    color: #C3C963;
    }

    y me dice:

    No hemos podido obtener una vista preliminar de su plantilla.
    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: startSide

    que hago?

  31. Eulalia ha dicho
  32. Mary:
    Pon padding-left en lugar de padding-$startSide y te funcionará.
    No pensé en avisar de que a veces no pone lo uno sinó lo otro.
    Saludos.

  33. Marymary ha dicho
  34. Otra vez estoy aki, tampo me deja, ahora lo he puesto asi:

    a:hover, a:active {
    padding-top: 5px;
    padding-left: 5px;
    border: outset 2px $bordercolor;
    background: botonmenubarBgColor;
    color: #C3C963;
    }

    y me dice:

    No hemos podido obtener una vista preliminar de su plantilla.
    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: bordercolor


    Siento darte tanto la lata

  35. Eulalia ha dicho
  36. Marymary:
    Ya lo aviso en la entrada, que antes de copiar el código mireis si las variables están.
    "Antes de colocar una de esas órdenes, mira al principio de todo de la plantilla, justo encima de body, como se escribe cada cosa."
    Si se escribe diferente, o no está, da error.

  37. Eulalia ha dicho
  38. Marymary:
    Le he echado un vistazo a tu blog. No tienes variables, así que no puedes ponerlo como lo digo yo.
    Has de poner el código del color.

  39. Marymary ha dicho
  40. No entiendos lo que me dices de que tengo que poner el codigo del color, empece hace ,muy pokito en esto de los blogs y no controlo mucho, lo siento. PEro al final, es imposible ponerlo como tu lo tienes?

  41. Eulalia ha dicho
  42. Marymary:
    Poder puedes, lo que no puedes es poner eso de borderColor ni menubarbgcolor, ya que tu plantilla no es de blogger y no tiene variables, que es lo que hace que se puedan cambiar los colores en Fuentes y Colores.
    El código del color se expresa así:
    #ffffff ese es el blanco, #cccccc ese es el gris clarito, #000000 ese es el negro.
    En tu caso, has de averiguar el código del color que quieres poner en el borde y poner su código en lugar de $bordercolor, de manera que la linea del borde quedaría así:
    border:outset 2px #cccccc; para que se viera un borde gris clarito.
    Para saber el código de los colores, hay varios sistemas. Uno de ellos es un chisme que tengo en este blog.
    Cuando seleccionas un color, en el rectángulo de encima se ve el color y su código.
    Un abrazo.

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.