Menú vertical para tu blog de blogger (II)


Gracias a César he descubierto este otro menú vertical para blogger que aunque se parece al que ya os expliqué anteriormente se convierte en otra muy buena opción para tu blog.

¿Quieres ver este menú en movimiento? ¡Clic aquí!

Para instalar este menú debes hacer lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Busca ]]></b:skin> (teclea Ctrl + F para buscar más rápido)
4) Justo arriba de ]]></b:skin> pega el siguiente código:

/* Menu nav
----------------------------------------------- */

#nav,#nav li {
margin: 0;
padding: 0;
list-style: none;
}

#nav a {
width: 140px;
height: 27px;
background: url(http://img46.imageshack.us/img46/2955/menunav.gif) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}

#nav a:hover {
background-position: 0 -27px;
color: #900;
text-decoration: none;
}

Código a copiar/pegar


5) Clica en vista previa y si no hay ningún problema, guarda tu plantilla.
6) Ahora ves a Diseño->Elementos de página->Añadir un gadget->HTML/Javsscript. En él pega el siguiente código:

<ul id="nav">
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
</ul>

Código a copiar/pegar


Sustituye cada # por el enlace de la entrada que quieras enlazar en este menú.

Si deseas añadir o eliminar enlaces en el menú, fíjate en la estructura. Elimina o añade esta línea:
<li><a href="#">Título</a></li>

¿Qué modificaciones puedes hacer? Pues poca cosa, a menos que decidas cambiar la imagen de fondo (http://img46.imageshack.us/img46/2955/menunav.gif) por otra que hagas. Debes tener en cuenta que si empleas otra imagen deberás adaptar el tamaño width (ancho) y height (alto).

14 comentarios:

  1. grandeeeeeeeeeeee!!!

    Una vez más, gracias a ti he mejorado uno de mis blogs.

    Saludos y gracias!!

    ResponderEliminar
  2. Gracias "el que grita". Me alegro que te haya sido de utilidad. Un saludo amigo.

    ResponderEliminar
  3. Que bueno amigo te felicito en verdad me ha sevido tus guias gracias

    ResponderEliminar
  4. Una pregunta más, ya que soy el único que te incordio en esta entrada...si te pregunto por cambiar el color de los botones?

    Se que es una imagen y no se hasta que punto lo has creado tú o lo has tomado de otro lado, pero me encantaría poder cambiar los colores para uniformarlos con el resto del blog
    www.creatingwedding.blogspot.com

    Por otro lado, también me serviría si me dijeras de algún programa para hacer botones con relieve como estos, pues ya me embarcaría yo en la remodelación jejejeje.

    Un abrazo compañer@!!!

    ResponderEliminar
  5. @Dj Dionicio. Gracias por tus palabras, me alegro que te haya servido mi blog.

    @elquegrita. Hola amigo, la imagen no la he creado yo ni este menú, lo pone en la entrada. Para hacer imágenes deberías trabajar con algún programa como Photoshop o similar.

    ResponderEliminar
  6. Muchas gracias por las ideas de tu blog, me había desanimado un poco con mi blog porque no sabía como personalizarlo y cada vez que tenía una idea tenía que desistir por no saber como hacerlo. Me has ayudado mucho.
    Ahora tengo un problema, he podido agregar este menú, pero para mi blog preferiría un menú horizontal o pestañas para los contenidos...y no he encontrado esto... puedes indicarme si tienes ya esta entrada y yo no la sé ver?'

    ResponderEliminar
  7. hola amigo esta super el blog, me gustaria preguntarte hace poco me hice un blog y quisiera saber como coloco mis link en la barra de menu que trae por defecto mi plantilla si pudieras ayudarme , gracias

    ResponderEliminar
  8. Super esta información amigo, te felicito por thu blog y px espero tener mas ayuditas despues...
    bye

    ResponderEliminar
  9. Hola, ya aplique este menu a mi blog ^^. Lo que no me termina de convencer es que el blanco del fondo de los botones, resalta en el rosa del fondo ¿como puedo hacer para quitarle el recuadro blanco a los botones?

    ResponderEliminar
  10. Gracias por el dato, pero mi pregunta es q para la imagen de fondo ¿tiene q estar en linea para q aparesca ahi? lo que pasa ese de rojo es un link y yo quisiera saber si se puede añadir el fondo de mi equipo y no necesariamente de internet..

    ResponderEliminar
  11. Hola
    copio y pego lo que pusiste pero me voy a vista previa y no me sale nada, ayudame porfa que de esto no se nada

    ResponderEliminar
  12. Hola!! Conseguí agregar el formulario de contacto abajo de las entradas y ahora me gustaria saber cómo se hace para que en el menú aparezca el acceso directo así el que quiera comunicarse hace clic directamente ahí en lugar de ir al pie de cada entrada. Espero que sea posible y no muy complicado porque soy 0 tecnología... Lo mío son los libros!! Gracias!!

    ResponderEliminar
  13. Gracias por el consejo :) me ayudo muchisimo

    ResponderEliminar
  14. disculpa las molestias
    me explicas donde encuentro :1) Vamos a Diseño
    2) "Edición de HTML" en el nuevo formato de blogger?
    es decir donde encuentro la edicion de html en el nuevo formato xq no la veo por ningun lado

    ResponderEliminar