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.

¿Te gusta mi nuevo menú?

jueves, 7 de enero de 2010

¿A que mola?

Lo he visto en Ciudad Blogger y me he enamorado de él.

Lo bueno es que lo he encontrado casi por casualidad, pues se me pasó la entrada cuando la hizo.
Pero hoy he pinchado en su enlace al blog de pruebas para ver el efecto que explica de como destacar la primera entrada y lo he visto. ¡Que chulada!

Así que, aprovechando que le estaba cambiando el aspecto al blog, quitando las cosas de navidad, lo he probado.
¡Bingo! A la primera.

Después de colocarlo me he descargado las imágenes de los iconos y las he alojado en mi propio servidor, (que tampoco es cuestión de abusar de los demás y comernos su ancho de banda).

También he modificado un punto del código, en el CSS, para que las palabras que se ven al ponerte encima de los botones se vean de otro color, ya que en el código original está en negro y le he dicho que las muestre con el color de los enlaces y además le he añadido la orden de que se abran algunos enlaces en otra ventana.

No os explico como se hace. Pinchad en el botón del interrogante e ireis a parar al blog de El potro. Él lo explica de maravilla y si haces exactamente lo que indica sale bien.

Solo os explicaré como cambiar las urls y los textos y los cambios que he aplicado yo, así que si te interesa ya sabes...


Una vez copiado el código en el gadget HTML, has de modificarlo un poco para que los botones enlacen a tus propios sitios.

Este es uno de los enlaces que has de poner en el elemento HTML:
(separo las líneas para que lo veas mejor)

<a class="dockItem" href="URL del enlace">
<img src="http://img695.imageshack.us/img695/2604/iconhelp.png"/>
<span>Título del enlace</span></a>

Donde pone URL del enlace has de poner, evidentemente, la dirección a la que va a llevar ese botón.
Fíjate que cada botón tiene un nombre que indica clarísimamente para que sirve.
Así, en el primero, llamado iconhome, has de poner la dirección de tu blog, pero ¡cuidado! la dirección de tu blog, no la que se vea en la página que estarás, que es la de Diseño y a donde solo puedes entrar tu, sinó la que termina con blogspot.com.

Si además quieres que se abra en otra ventana, (importante en los otros enlaces, ya que si no estás echando a la gente de tu blog, detrás de las comillas que cierran la URL añades: target="_blank" dejando un espacio de separación entre ésto y las comillas que cerraban la URL.

En la línea que pone Titulo del enlace has de borrar esto y escribir la palabra o la frase que quieras que se lea al poner el ratón encima del botón.

Y por último, una vez que lo hayas configurado y se vea bien, te recomendaría que te descargaras los botones y los alojaras en tu propio servidor, (aunque sea en uno de los álbumes de picasa, incluso el del blog, para que El Potro y tu mismo/a no os encontreis con que no se ve la imagen por haber superado su ancho de banda.

Descargarte la imagen es tan fácil como copiar la dirección que hay detrás de img src=" (en este ejemplo se ve de color azul), pegarla en la barra del navegador y cuando veais el icono pincharlo con el botón derecho y guardar imagen como.

Si no necesitas alguno de los enlaces, con eliminar el trocito del código que incluya dicho botón lo solucionas.

Para modificar el color de las letras: En este trocito del CSS

a.dockItem {
text-align: center;
color: #000;

cambia eso de #000 por el color que quieras, ya sea poniendo otro número de color o bien una variable.

Una cosa más: Si quieres que se vea en la cabecera, ya sea encima o debajo, has de modificar el código del blog.

Entra en Diseño/Edición de HTML y SIN EXPANDIR ARTILUGIOS busca esta línea:

<b:section class='header' id='header' preferred='yes'>

La tuya estará distinta. Déjala como ésta, así saldrá lo de Añadir un gadget en la página de los elementos.

Y si quieres ponerlo abajo de todo, pero sin que se esconda cuando estés en la parte de arriba del blog, El potro explica como hacerlo en esta entrada.

Imprime esta entrada

30 comentarios. ¿Quieres añadir el tuyo?

  1. Mª Mercè ha dicho
  2. Niña, envidia cochina me das con esta soltura que tienes para meterte y mangonear por el "horrible" HTML.

    Había de abrir un blog nuevo, para la ONG que estoy montando, y quería que tuviera una apariencia más de web que de blog (pues no sé nada de webs).
    Me mato buscando plantillas por toda la Red, y después de ver más de mi.... por fin encuento una.
    Me doy de alta en blogger con el nuevo nombre. Descargo la plantillan en .zip, y la pongo para poderla aplicar al nuevo blog y.......No me coje el nombre mío, no me salen los diferentes "widgets", no hay forma de cambiarle el color...etc. En fin, que no sé si cortarme las venas o dejármelas largas.

    Ya voy consultando tus blogs para ver si encuentro ayuda, pero me parece que la plantilla es más complicada de lo que parecía.

    Molts i molts petonets!!

  3. ANITA ha dicho
  4. A mi también me das algo de envidia jeje me gusta todo lo que haces y cuando pones cosas al blog.
    Me encanta como está ahora, a mi también me da cosa tocar la plantilla, me atreví con la nieve ya es un logro jeje.
    Estoy con las pruebas para cambiar mi blog jeje hay hay que desastre, pero seguiré intentando.
    Besitos guapa

  5. Eulalia ha dicho
  6. Mª Mercé:
    Déjatelas largas, te quedan mejor.

    Dices que te has dado de alta en blogger con el nuevo nombre, ¿eso significa que has abierto una cuenta nueva en google o que has añadido el blog a tu cuenta?

    No te coge tu nombre ¿¿¿??? Mi no comprender.

    No salen widgets.
    ¡Bueno, depende de la plantilla puede tener solo los básicos, perfil y archivo, o solo archivo. El resto tendrás que añadirlos tu misma. (Si te refieres a ésto).

    No puedes cambiarle el color: Puede ser porqué los colores sean imágenes. Has de mirar si en los background de los diferentes wrappers hay direcciones. Si es así son imágenes. Aunque también puede ser que sean códigos hexagesimales, esos que se escriben así: #123456 en este caso se han de cambiar los números por los del color deseado, o añadirle variables para que cambie en fuentes y colores.
    (Mira en este blog, o en el Manual, que explico qué es eso de las variables y como añadirlas y modificar el código para que se pueda cambiar sin tener que entrar a modificar la plantilla cada vez).

    Si la plantilla estaba en zip seguro que es complicada. La mayoría de esas plantillas vienen desarmadas, con las imágenes por un lado y los códigos por otro.
    Por eso acabé por aprender a personalizar yo mis blogs, así no me como el coco pensando qué demonios han hecho otros.

    Molts petons.

  7. Eulalia ha dicho
  8. ANITA:
    Prueba y error es lo mejor.
    Aunque pueda parecer una tontería, de los errores se aprende. ¡Anda que no la he cagado veces! pero con un poco de intuición, algo de picardía y mucha paciencia se consigue el resultado que se desea.

    Besitos.

  9. Luz del Alma ha dicho
  10. Gracias Eulalia por todo lo que compartes, ya intentaré con el nuevo "Menú".
    Un abrazo muy fuerte, Mirta

  11. Elba ha dicho
  12. Eulalia , está mas que hermoso , ya sabes que estoy muy lejos de lograr estas cosas , todavia no pude con el " VOLVER ARRIBA " , pero con paciencia y con esta maestra , lo que he aprendido en un año , no se puede creer...Muchos besos y muy Buen 2010 Elba...

  13. Mª Mercè ha dicho
  14. Yo explicar y tu comprender. No sufrir.

    He abierto una cuenta nueva, con el nombre de la ONG.

    Cargo el código de la nueva plantilla, una vez descomprimido, y pasado a TXT y, en la cabecera sale el nombre del blog de muestra, no el que yo puse en blogger.

    Según estoy viendo lleva sus propios widgets, colores, letras, etc. y no me da acceso a la página de blogger para que yo lo cambie. Hasta aquí, más o menos de acuerdo. PERO, el código HTML es tan enfurrullado, que no hay forma de poder encontrar nada de lo que tú explicas en tus blogs de ayuda.

    Entonces me he dicho: "nena, esto no lo vas a poder solucionar tú solita, así que ya puedes enamorarte de otra plantilla" y es lo que he hecho.

    Me enamoro de otra más sencilla, que ellos mismos ya te dan el código sin necesidad de descargarlo, y ¿qué me ha pasado? Pues que se ha quedado el blog BLANCO. Este es el enlace de la NUEVA plantilla: http://www.blogcrowds.com/resources/blogger-templates/43-sahara

    Ya he decidido dejarme las venas largas, pero tampoco me puedo poner a llorar pues con la lluvia que está cayendo, tendré que salir en barca.

    Petonets i milers d'abraçades!

  15. ..NaNy.. ha dicho
  16. Hola me gusta mucho es que eres una artista de los pies ala cabeza. Saludos

  17. Eulalia ha dicho
  18. Mª Mercè:
    No me extraña que no haya nada en el blog si has copiado lo que se ve debajo de los dos botones, porqué no hay nada. Solo las primeras líneas del CSS y para de contar.
    Lo jodido es que si le das a Dowwnload sale lo mismo.

    Reina: ¿vols una plantilla a mida? jo te la faig tal com tu vulguis amb els colors o imatges que vulguis i de blogger, amb lo cual tindrás tot el que explico i podrás modificar les coses al teu gust.
    Escriu-me i parlem.
    Petons

  19. Mª Mercè ha dicho
  20. Eulalia, debajo mismo de los botones pone: Click Here [Then copy & paste to Edit HTML] y entonces se expande más. Lo he copiado en una hoja word para "verlo" mejor y no he "visto" nada raro (Pongo "ver" entre comillas porque no entiendo mucho el HTML, jajaja)

    T'escric ara mateix.

  21. SemielfaMish ha dicho
  22. ¡Wow, se ve genial ese menú! O_o Queda un efecto muy moderno :)

    Me gustaría hacerte un consulta, Eulalia... Me pasa una cosa un poco rara, y no sé si será cosa de la plantilla orignal o que yo metí la pata al tocar el html para hacer algún retoque... Al entrar a mi blog, se ve normal, pero luego bajango al final de todo, en lugar de haber un "tope" hasta donde se pueda bajar, es como si la parte de abajo se va alargando y alargando, como que no tiene fin O_o ¿Te suena si alguna vez te ha ocurrido esto con algún blog, o a alguien conocido? Si quieres te paso una copia de la plantilla tal como está ahora...

    El blog se llama "En algún lugar", creo que es el único que sale en mi perfil. No hay ninguna urgencia: pesar de ese problema, el blog funciona con total normalidad.

    Muchas gracias, y siento las molestias.

    ¡Saludos!

  23. Eulalia ha dicho
  24. Este comentario ha sido eliminado por el autor.
  25. Eulalia ha dicho
  26. semia
    al añadir el codigo de las estrellitas te cargaste el /b:skin que habia al final del css por eso el blog no se acaba.
    No puedo poner aquí exactamente lo que te falta, pero si me envias un mail te diré qué y donde.

  27. Csr ha dicho
  28. Te quedo genial, a mi en lo personal me gustaria poner un menu acordeon en mi blog asi como este:http://www.phatfusion.net/imagemenu/ pero mas personalizado. XD que pases un exelente dia.

  29. Eulalia ha dicho
  30. Es muy chulo eso Csr. Me ha parecido que se podía descargar el código.
    No lo he hecho porqué no sabría que hacer con él, pero si te atreves ya nos contarás.

  31. La Trucoteca de Blogs ha dicho
  32. Hola Eulalia!
    Pues sí, el menú es muyyy chulo, y ha quedado muy bien.
    La verdad es que El Potro es un gran artista en estos temas de Blogger, y, la creación que ha hecho es estupenda. Lástima que no tengamos más espacio para ponerlo, porque si no... :(
    Muchos saludos desde Murcia y gracias por tener este gran blog ;)

  33. Cabeza de novia ha dicho
  34. Hola Eulalia como estás? Tengo un par de preguntas sobre este menú. Se que deben ser bobadas, pero igual necesito tu ayuda.
    1- ¿Cómo agrego mi dirección de correo al icono de correo? Es decir, cómo hago para que se abra el mail directamente como en el tuyo?
    2- ¿Qué url debo poner en el icono de facebook y en el de twiter para que los lleve a mi cuenta de facebook/twiter?
    3- ¿Cómo puedo hacer para que el menú aparezca arriba a la derecha en la cabecera? ¿Se puede?

    Bueno eso es todo Eulalia, gracias anticipadas por tu ayuda. Saludos desde Argentina!

  35. Eulalia ha dicho
  36. Cabeza de novia: (anda que no os poneis nombres raros para dirigirse a vosotros, algunos, con lo bonito que es decir María o Montse).

    1.-Para poner el mail has de poner tu dirección así: mailto:loquesea@blablabla.com (en fin la dirección detrás de los dos puntos) pero antes de escribirlo mira si ya está lo de mailto: pues si lo repites no funcionará.

    2.- En facebook has de poner la url de tu perfil, o sea la dirección que se ve en la barra del navegador cuando estás en tu perfil. No te preocupes, que si no son amigos no lo verán, solo verán la página de agregarte como amiga. (Puedes hacer la prueba con el mio)
    En twitter igual.

    INCISO: Una forma de saber que hay que poner en esos botones es poner el ratón encima y mirar abajo de todo de la pantalla, a la izquierda, en la barra de estado. Se ve lo que hay en cada botón. Solo has de cambiar mis url's por las tuyas.

    3.- Para que quede a la derecha mira a ver si en el CSS pone algo de text-align y si pone center, cámbialo por right. (No puedo ir a ver la entrada original, so pena de perder este comentario).

  37. Alejandro Araneda ha dicho
  38. ¿Qué tal? Como leí que les interesabe un menú tipo acordeón, les dejo el que he desarrollado. Enlace: http://alejandroaraneda.blogspot.com/

  39. Cabeza de novia ha dicho
  40. Mil gracias Eulalia, nunca me había fijado que al apoyar el cursor sobre el ícono debajo aparecía la url, siempre se aprende algo nuevo jajaja.
    Respecto a la ubicación no logré ponerlo exáctamente donde quería pero me quedó bien debajo de la barra de menú.
    Y en cuanto al nombre jaja, es que Cabeza de novia es el nombre de mi blog por eso lo uso de nickname en todos lados :))

  41. Eulalia ha dicho
  42. Ya me lo imaginaba, incluso hice una entrada hace tiempo explicando lo absurdo de esto, sobre todo si en algún momento se abre otro blog, o se cambia el título.

  43. Eulalia ha dicho
  44. ¡Ah!, por cierto, añado para no borrar el comentario previo, en este caso, si se necesita respuesta, ¿no sería más lógico firmar el comentario para que quien responde no piense que está hablando con una cosa, en lugar de una persona?

  45. Eulalia ha dicho
  46. Alejandro: Interesante ese menú. Lo tendré en cuenta. Gracias.

  47. PONTENOVA.ES ha dicho
  48. Despues de pelearme y mucho, llegue a la conclusion de que no funciona.
    El potro me ha dicho que no funciona en dominios propios, no se, algo falla.
    En el blog de pruebas va perfecto, pero en A Pontenova ni se estira.
    Ahora he echo un menu de imagenes para aprovechar los botones.
    pero aqui va mi duda querida... jajaja
    puedo poner un texto cuando paso el raton por encima, como en el menu original aunque no se amplien???
    vaya cosas que tienme esto del html jaja. eres un genio eulalia.

  49. Eulalia ha dicho
  50. Pontenova:
    Imagino que si, debería funcionar eso del texto al pasar el ratón, que yo sepa funciona en todas partes.

  51. PONTENOVA.ES ha dicho
  52. pero que codigo tengo que poner para que aparezca el texto???
    Tienes alguna idea???

  53. Eulalia ha dicho
  54. Pontenova:
    En la entrada lo explico. Has de cambiar la frase Titulo del enlace por lo que tu quieras que se vea.

  55. PONTENOVA.ES ha dicho
  56. Eso ya lo se, pero este menu no funciona en dominios propios. No se abre nada. yo he conseguido crear un menu con imagenes, que puedes ver en el blog a pontenova. Este que dices tu lo tengo en el blog de pruebas.
    Lo que no se es como se ponen las letras en un menu solo de imagenes. Gracias eulalia, es que no me habia explicado bien.

  57. Eulalia ha dicho
  58. Cualquier enlace con imágenes se construye así:
    a href="ladirección a enlazar" target="_blank" title="lo que se ve al poner el ratón encima"

    img src="la dirección de la imagen que sirve de enlace"

    /a

    Poniendo cada una de estas "frases" entre los símbolos <>

    En la primera, que tiene 3 partes, la primera parte es la dirección, la segunda es para que se abra en otra ventana y la tercera para que se lea algo al poner el ratón encima.

  59. PONTENOVA.ES ha dicho
  60. Ya esta. De nuevo un millon de gracias. Muchas muchas gracias. gracias por compartir tu tiempo.

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