He recibido muchas peticiones sobre una guía para añadir un menú horizontal a nuestro blogger como el que tengo colocado en la parte superior de Ayuda para mi web.
Lo primero que deberéis hacer es leer este post donde explico donde y como descargar varios menús verticales.
En el fichero que hemos descargado encontraremos un archivo .css y un index.html, también encontraremos las imágenes necesarias para nuestro menú. Lo primero que debemos hacer es ir a edicion de plantilla de nuestro blogger y expandimos artilugios. Ahora abrimos el fichero .css como archivo de texto, copiamos el contenido de este y lo pegamos justo encima de la etiqueta
. El contenido será algo así:
]]></b:skin>
ul#menu { width: 100%; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
ul#menu li a:hover { color: #333; }
ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }
Lo siguiente que debemos hacer es alojar las imágenes de nuestro menú en un servidor para poder utilizarlas en nuestro blog, si no sabéis donde subir las imágenes os recomiendo este servidor de ficheros.
Una vez subidas nuestras imágenes, tendremos que cambiar en el código que hemos añadido anteriormente, donde pone URL de la imágen por la dirección donde las hemos subido.
Ya solo nos queda un paso, una vez que hemos definido el estilo de nuestro menú, solo nos faltará añadirlo a nuestro blog. Entre las etiquetas <body></body>
, añadimos el siguiente código:
<ul id="menu">
<li><a href="#" title="">Pagina1</a></li>
<li><a href="#" title="">Pagina2</a></li>
<li><a href="#" title="">Pagina3</a></li>
<li><a href="#" title="">Pagina4</a></li>
<li><a href="#" title="">Pagina5</a></li>
</ul>
Cada fila será un apartado del menú por lo que podréis añadir y eliminar las que queráis. Por último sustituir "#" por la dirección de la página a la que queréis que vaya el enlace de cada apartado y "PaginaN" por el texto que quieres que aparzca en cada opción. De esta forma ya tendréis vuestro menú integrado en blogger.
Es más sencillo de lo que parece, intentarlo.
También te puede interesar:
Como crear un menús
Como poner un menú en blogger
Suscribirse a:
Enviar comentarios (Atom)
Aplicaciones Android recomendadas
Traductor
Suscríbete vía email
Archivo del blog
-
▼
2008
(119)
- ► septiembre (11)
-
▼
agosto
(22)
- Como poner emoticonos en comentarios de blogger
- Más de 300 plantillas para blogger
- Iconos RSS para mi blog
- Cambio de dominio a ayudaparamiweb.com
- Recopilacion de iconos para tu web
- Dos gadget originales para mi web
- Como insertar juegos en mi blog
- Como añadir últimos post en el sidebar de blogger
- Deshabilitar botón derecho del ratón en nuestra web
- Como poner un menú en blogger
- Añadir enlace para agregar a menéame en cada post
- Ranking de cada post de blogger (estrellas)
- Dividir una cadena de texto en varias partes con js
- Como adelgazar a una persona con photoshop
- Como añadir contador de lectores feedburner a mi web
- Como añadir reproductor flash a mi web o blog
- Botón Agregar a favoritos para mi web
- Review: Overcharg5
- Como aclarar fotos en photoshop
- Poner una imagen de calendario en la fecha de mi blog
- Contadores para mi web o blog
- Añadir feed a mi blog blogger
-
►
2007
(1)
- ► septiembre (1)
23 comentarios:
hola amigo te agradesco por la ayuda que pones en tu blog ah para compartir enlaces.
http://lossecretosdemarketing.blogspot.com
ME PARECE ALGO COMPLICADO POR QUE NO ENTIENDO MUCHO PERO LO INTENTARE Y REGRESARE A DAR MI OPINION PARA VER COMO SE VE EN MI BLOG.
http://videosdelomejordelavida.blogspot.com/
hola! Me gusta esta idea, capaz la utilice en un futuro.
Una pregunta, en mi blog tengo un menu con link a diferents post por sus respectivas etiquetas. Me gustaria agregar otro menu mas, pero al poner agregar gadget me agrega otro menu con las etiquetas q ya tengo.
download-fanatico.blogspot.com , en ese blog podes ver q tiene varios menu, Peliculas Nivel 1, Nivel 2, etc.
Ayuda?, ya he buscado y no encontre nada de como arreglar eso,
Muchas Gracias!!!
Por las dudas: caro_maiden6@hotmail.com
es una tranza pero de igual forma se agradece
no lo he logrado www.cyberlared.tk
hola quisiera pedirte que me colabores ya que no entiendo que son los FEED y como utilizarlos, ademas nose como activar una ventana como esta de comentarios y en la cabezera de mi blog las partes que dicen entradas y comentarios no me llevan a eso sino a otra cosa me gustaria que lo miraras y me colaboraras, además como puedo agrandar el texto en la cabezera
misanotacionescontables.blogspot.com
Yo hice de otra forma el resultado pueden verlo acá
http://edisantplanet.blogspot.com/
CircuitoX
Una pregunta, en mi blog tengo un menu con link a diferents post por sus respectivas etiquetas. Me gustaria agregar otro menu mas, pero al poner agregar gadget me agrega otro menu con las etiquetas q ya tengo.
--------------------------------
A mi tambien me gustaria saber como se hace...
como en esta pagina... http://yumenosekai07.blogspot.com/
tiene apartados, que estan escritos como... Genero, multimedia y grupos....
Mi E-mail: anyi_j_20@hotmail.com
Gracias por adelantado :)
Es un poco complicado, pero para entenderlo bien es asunto de estudiarlo con detenimiento.
Muchas gracias por estos adelantos formidables para enriquecer los blogs.
www.bersoa.com
gracias si pude eeeeeeeeeeeeeee jajaja
|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O|O
|o
|o |o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|o
|0|0|0|0|0|0|0
|0
|0|0
|0
|0|0|0|0|0|0|0
|0
|0|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0|0|0|0|0|0|0
|0
|0|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0|0|0|0|0|0|0
|0
|0|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0|0|0|0|0|0|0
|0
|0|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0|0|0|0|0|0|0
|0
|0|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
|0
hola.. hice todo el procedimiento pero me sale la barra sin los titulos ... ya copie las url de la imagen en el codigo css pero nada ... agradeceria si me ayudaras.. saludos :D
hola soy nuevo en esto de los blog
y ps me queda aribba de mi logo el menu
y el logo se pone en otro lado
por favor a yudame
He colocado el menú en nuestro blog http://agrealuchadoras.blogspot.com/ .
Ahora no se como meter los documentos en el botón Estatutos y Documentación, ?como hago para que los documentos Word, Jpg, pdef, etc..., los pueda introducir en su botón correspondiente, tengo que convertirlos en http://, cómo lo hago?
Gracias por adelantado.
Un saludo de...
Mamen, secretaria de la Asociación AGREA-LUCHADORAS
Soy Mamen de nuevo de la Asociación AGREA-L-UCHADORAS.
Puedes enviarme respuesta a: agrealluchadoras@yahoo.es si te viene bien.
Gracias.
Nada, yo no puedo, pense que lo iciera todo bien pero no :'(
GRACIAS CAPO ANDUBO TODO BIEN
:D:D
a mi también me interesa intercambiar links profdanielalcoba.blogspot.com
Saludos!
Muchas Gracias ! :D
Http://www.NaturallyyGirls.blogspot.com
HOLA, ME AYUDo MUCHO TU TUTORIAL
SI QUIEREN PASARSE POR MI BLOG DE CINE ONLINE
www.cinedifusion.blogspot.com
MUCHAS GRACIAS
Hola!... Gracias por la explicacion; pero no me funciona... AUXILIOOOOOO... ya cree el menu y lo descargue; pero no me deja insertarlo... es Horizontal no Vertical... porfa me ayudan????
http://juan-manuel-hernandez.blogspot.com/
Gracias
hola lo que no entiendo es
Una vez subidas nuestras imágenes, tendremos que cambiar en el código que hemos añadido anteriormente, donde pone URL de la imágen por la dirección donde las hemos subido.
........ alguien me puede ayudar explicandome bien esta parte !! grasias
!!..................