Como poner un menú en blogger






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
]]></b:skin>
.
El contenido será algo así:


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

¿No te funcionan los cambios?
¿Deseas añadir algo nuevo y no sabes como?
Nosotros lo hacemos por ti

23 comentarios:

cybert09 dijo...
13 de septiembre de 2008, 1:31  

hola amigo te agradesco por la ayuda que pones en tu blog ah para compartir enlaces.
http://lossecretosdemarketing.blogspot.com

Los Mejor en Videos de Amor, Humor, Fantasmas, Chismes, Chicas, Horoscopo, Manga, etc. dijo...
20 de octubre de 2008, 4:38  

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/

Anónimo dijo...
24 de octubre de 2008, 4:09  

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

Cyber La Red dijo...
30 de octubre de 2008, 20:40  

es una tranza pero de igual forma se agradece

no lo he logrado www.cyberlared.tk

Beatriz Marriaga dijo...
14 de diciembre de 2008, 16:33  

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

Edisantplanet dijo...
25 de enero de 2009, 5:23  

Yo hice de otra forma el resultado pueden verlo acá

http://edisantplanet.blogspot.com/

CircuitoX

Anónimo dijo...
27 de enero de 2009, 12:13  

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 :)

Bernardo Socha Acosta dijo...
3 de febrero de 2009, 11:00  

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

ladygagacolombia dijo...
2 de mayo de 2009, 5:25  

gracias si pude eeeeeeeeeeeeeee jajaja

Anónimo dijo...
20 de junio de 2009, 21:38  

|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

Anónimo dijo...
8 de julio de 2009, 11:35  

|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

Anónimo dijo...
8 de julio de 2009, 11:36  

|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

David dijo...
22 de julio de 2009, 23:50  

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

555aron dijo...
29 de julio de 2009, 3:46  

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

AGREA-L-UCHADORAS dijo...
4 de agosto de 2009, 3:48  

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

AGREA-L-UCHADORAS dijo...
4 de agosto de 2009, 3:51  

Soy Mamen de nuevo de la Asociación AGREA-L-UCHADORAS.
Puedes enviarme respuesta a: agrealluchadoras@yahoo.es si te viene bien.
Gracias.

Diego Chamadoira dijo...
30 de agosto de 2009, 12:38  

Nada, yo no puedo, pense que lo iciera todo bien pero no :'(

fede dijo...
7 de octubre de 2009, 2:26  

GRACIAS CAPO ANDUBO TODO BIEN
:D:D

Prof. Daniel Alcoba dijo...
22 de noviembre de 2009, 23:58  

a mi también me interesa intercambiar links profdanielalcoba.blogspot.com

Saludos!

NaturallyGirls dijo...
9 de enero de 2010, 18:00  

Muchas Gracias ! :D

Http://www.NaturallyyGirls.blogspot.com

roberto dijo...
10 de febrero de 2010, 19:15  

HOLA, ME AYUDo MUCHO TU TUTORIAL
SI QUIEREN PASARSE POR MI BLOG DE CINE ONLINE

www.cinedifusion.blogspot.com


MUCHAS GRACIAS

jamanelher dijo...
7 de abril de 2010, 7:14  

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

Anónimo dijo...
25 de septiembre de 2012, 4:15  

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
!!..................

Cuéntanos que te ha parecido este artículo

Emoticonos en blogger
:) :'( :( :P :D :$ ;) :-I :-X :o :O |O :\

Traductor

Suscríbete vía email

Introduce tu dirección de correo:

Suscríbete

Seguidores