Sé que no a todos les interesan los menús horizontales debajo de las cabeceras, así que para a quienes se les adecua mejor un menú vertical en el blog aquí les van las indicaciones para crear un menú de manera rápida y personalizable.
Entra a Plantilla | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
Ahora en Diseño | Añadir un gadget, selecciona HTML/Javascript y pega ahí esto:
Entra a Plantilla | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* Menú Vertical
----------------------------------------------- */
#menuvert ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px; /* ancho del menú */
font-size: 11pt;
}
#menuvert ul li {
background-color: #B0CBDD; /* color de fondo del menú */
padding: 0px;
}
#menuvert ul li a {
color: #000; /* color de las letras */
text-decoration: none;
display: block;
padding: 10px 10px 10px 20px;
}
#menuvert ul li a:hover {
background: #336699; /* color del botón al pasar el cursor */
border-left: 10px solid #000066; /* color del rectángulo junto al título */
color: #FFFFFF; /* color de las letras al pasar el cursor */
}
Ahora en Diseño | Añadir un gadget, selecciona HTML/Javascript y pega ahí esto:
<div id="menuvert">
<ul>
<li><a href="URL del enlace">Título 1</a></li>
<li><a href="URL del enlace">Título 2</a></li>
<li><a href="URL del enlace">Título 3</a></li>
<li><a href="URL del enlace">Título 4</a></li>
</ul>
</div>
Ya sólo cambia las URL de los enlaces y los títulos de las pestañas; puedes agregar o eliminar tantas pestañas como quieras.
Puedes personalizar los colores del menú a tu antojo, en el primer código he puesto las anotaciones para que sepas dónde cambiar el color de fondo, el color de las letras, etc.
El resultado es este:
Muy bueno bro... durante mi blogger-depresión, hasta había pensado en colocarle un menu de este tipo, pero luego de pensar un rato no sabía donde, y decidí dejarlo como esta. Seguramente lo tendré en cuenta para la próxima recaída!!!! jajajaja.
ResponderEliminarUn abrazo!!!
Pues fíjate que podría quedar bien para agrupar las suscripciones de RSS, mail, Twitter, etc. Digo, en lugar de botones como el mío, podrías usar un menú así.
ResponderEliminarUmmm, de hecho creo que eso haré aquí, jaja. No, no, no, no, me estás contagiado la blogger-depresión, jajaja.
Un abrazo!
Jajajajajaja... perdona bro! las depresiones se contagian mas facilmente que las alegrías.
ResponderEliminarNo es una mala idea... la voy a tener en cuenta... pero para serte sincero... estoy cansado de pelear con Blogger para modificar mi plantilla. Por lo que me voy a dedicar a postear un poco, ya que tengo descuidado mi blog y Respondones. Como habrás visto en el contador, ya nadie entra, y es lógico, hace bastante que tengo todo parado.
Con respecto a tus suscripciones, sinceramente me gustan... pero no puedo decirte si quedará mejor o no el menú.
Gracias por ayudarme a hacer todos los cambios en mi plantilla!!!!!
Un abrazo!!!
Tienes razón, hay que dejar descansar un poco la plantilla y postear que esa es la finalidad de un blog.
ResponderEliminarUn abrazo!
pues empece hace poco a hacer lo mismo..... si........ eh vuelto !!!
ResponderEliminarXD
despues de una bloggerdepresion..... ke por lo visto se hacen famosas...XD
bueno pues yo eh querido hacer un menu asi en el blog pero un pockito mas complicado y con mas efectos pero pues supongo que sera con el tiempo ya que apenas estoy retomando lo de postear.... y en vdd lo lamento...... pero pues almenos no estuvo al 100% abandonado....
saludos potro y cyberbloggero y sigan asi
Mira qué milagro... lo tuyo excedió los límites de una blogger-depresión, jaja.
ResponderEliminarLo importante es que ya estás de vuelta. Me alegro mucho que estés de regreso, espero que empieces a postear pronto.
Saludos.
Hola
ResponderEliminarInteresante eso de la blogger-depresión, buena idea para ponerse de psico-blogger :) jejeje
Voy a intentar hacer este menu vertical...
¿Este efecto que tiene este menu al pasar el cursor lo podria hacer con las etiquetas? ¿qué se modificaría?
Muchas gracias
Hola Jorge,
ResponderEliminarEn el gadget de Etiquetas no, pero podrías crear un menú con las etiquetas, serían los mismos pasos, ya sólo en la URL del enlace pondrías la URL de cada etiqueta.
Saludos.
como puedo ponerle mis propios botones
ResponderEliminarHola locura adolecente,
ResponderEliminarDonde dice color de fondo del menú y color del botón al pasar el cursor sustitúyelos por esto:
background: url (URL del botón);
Ten en cuenta que deberás usar un botón para el modo normal y otro para cuando pases el mouse encima de él.
Saludos.
Potro ¡¡¡¡Me quedaron geniales!!!!
ResponderEliminarSos un Master !!
Cada cosa que me dijiste me salió !! Rápido, fácil, sin vueltas, sencillito. Lo explicas bien ¿que más se puede pedir?
Nada. Solo agraderte mucho.
Date una vuelta y mira el menú vertical !!
Para colmo, los colores son los justo para combinar con mi blog: celeste y azul !!!
Estoy super-feliz :D :D :D
Graciaaaaaaaas Potro !!!!!!!!
Muaaaaaaaaaackkkkkk
Excelente! los colores quedaron justos para tu plantilla =)
ResponderEliminarSaludos!!!
hola potro muy bueno tus consejos los coloque pero quiero saber como hago para el menu tenga su contenido por ejemplo cuando haga click en mensaje me lleve a esa seccion no me sale pegate una vuelta por mi blog www.nochedeclasicos.com.ar lo probe ahi fijate lo que sale nose me podrias explicar por favor
ResponderEliminarHola NOCHE DE CLASICOS,
ResponderEliminarSólo necesitas poner la URL del enlace donde está en color rojo.
Por ejemplo:
http://www.nochedeclasicos.com.ar/2009/09/lo-nuevo-de-ale-sanz-el-cantante.html
Saludos.
Potro, recién hoy y ahora compruebo que los links que coloqué en este truco del menú vertical (yo lo hice oculto además) pero los links... no me funcionan, los puse mal, porque quedó con mi IP.
ResponderEliminarLos copié picando en cada etiqueta (donde tengo los post para editar) y puse en cada etiqueta con el botón derecho del mouse: "propiedades", copié eso, y lo coloqué como link, pero no abren asi !!
Como obtengo la URL de cada etiqueta?? Yo creí que sabía, pero por lo visto... no lo sé :(
Ahora te mando por mail como lo hice yo, que es lo que coloqué :S
Help !!! =)
Hola Maria Rosa,
ResponderEliminarEntra a tu blog y haz click sobre una entrada que contenga la etiqueta a la que quieres sacarle la URL.
Luego con el cursor encima de la etiqueta haz click con el botón derecho del mouse y selecciona Copiar acceso directo. Esa será la URL de la etiqueta, por ejemplo la de Pacientes es esta:
http://drgoliamiguel.blogspot.com/search/label/PACIENTES
Saludos!!!
Pero mirá que fácil era, y yo me compliqué la vida solita (Aaaajajaja!)
ResponderEliminarGraciaaaaaaaas Potro
¿Que haría yo sin vos? ¿Eh? Sin tus instrucciones y tu sabiduría bloggeril, HTML, scrip, y demás chirimbolos ;)
Sos un master !!!!!!!! =)
Jajajaja, sabiduría bloggeril, jajajaja.
ResponderEliminarGracias a ti por tus comentarios, de verdad que me has alegrado la noche ;)
Besos!
Terrible bro!!! quedó excelente!! GRACIAS!!!!!
ResponderEliminarPor nada brother, me da gusto que te haya servido.
ResponderEliminarSaludos!
Muy bueno potro,y si queremos agregar una imagen a un lado del texto,cual seri el codigo o donde iria?
ResponderEliminarHola Borest,
ResponderEliminarEn el segundo código tendrías que poner el código de la imagen antes de donde va el título:
<li><a href="URL del enlace"><img src="URL de la imagen"/> Título 1</a></li>
Pero forzosamente se va a recorrer la imagen cuando se pase el cursor sobre el enlace.
Saludos.
Si bueno,he intentado hacerlo pero puedes mirar mi blog para que veas como queda el menu,queda la imagen por arriba y me baja el texto.Puedehaber solucion a eso?
ResponderEliminarGracias potro, me ha servido perfecto lo acabo de poner en el blog,y que bueno que ya pudiste ver mi blog,muchisimas gracias deveras.Saludos.
ResponderEliminarHola Borest,
ResponderEliminarDentro del código de la imagen pon esto:
valign="middle"
De esa forma debe alinearse la imagen con el texto.
Saludos.
hola "el potro" exelente aporte te queria preguntar.. para hacerlos mas chicos respecto a la altura.. como le hago? ya que a lo ancho son geniales!! pero los siento muy grandes espero que me puedas orientar
ResponderEliminarsaludos :)
Hola Fernand Martinolli,
ResponderEliminarEn el primer código busca donde dice #menuvert ul li { justo abajo de ahí pega esto:
height:35px;
El 35 modificalo hasta que alcance la altura deseada.
Saludos.
Perdón, lo que tienes que pegar debajo de esa línea no es eso, sino esto:
ResponderEliminarline-height:5px;
Saludos.
Orale muchisimas gracias por compartir tus conocimientos funciono a la perfecion.. ahora me surgio una duda ... al momento de pasar el cursor por encima de estos links existe la posiblidad de que reproduzcan un sonido ? si es asi nos pudieras orientar?
ResponderEliminarde antemano muchas gracias :D
Ummm no, incluir ese tipo de efectos es algo complicado y sólo funciona en Internet Explorer.
ResponderEliminarSaludos.
hola potro otra vez yo jeje un saludo y una pregunta
ResponderEliminarde k pagina o donde saco los colores para cambiarle el color de fondo? muy buen menu
Hola Hysterical Fire,
ResponderEliminarEn este sitio puedes localizar el código del color que buscas:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
Saludos.
gracias potro y otra vez, eres el mejor!!!!!!!!!
ResponderEliminarPor nada ;)
ResponderEliminarhola esta muy bueno el blog, me gustaria saber si para hacer un menu se deben colocar todas las entradas de la pagina en las diferentes secciones del menu, si pudieran responderme gracias
ResponderEliminarEJ: si quiero colocar descarga de musica, debo colocar todos los link y sorry por mi ignorancia.
Hola marcia,
ResponderEliminarLo que necesitas es que todas tus entradas tengan etiquetas, por ejemplo, las entradas que traten acerca de música debes ponerles la etiqueta 'música'
Para hacerlo tienes que editar las entradas, y abajo verás un espacio en blanco, ahí debes escribir el nombre de la etiqueta.
Luego entra en Diseño > Elementos de la página > Añadir gadget > Etiquetas.
En ese gadget parecerán las etiquetas de tus entradas, sólo haz click con el botón derecho del mouse sobre la etiqueta y selecciona Copiar dirección de enlace (o algo así), esa es la URL que deberás poner en el menú, de esa forma cuando alguien haga click en Música aparecerán todas las entradas que hablan sobre el mismo tema.
Saludos.
Saben como agregarles a los botones para que haga un sonido al hacerles clic?
ResponderEliminarHola Aixadanixa,
ResponderEliminarAntes había un script que permitía hacer eso pero sólo funcionaba con Internet Explorer, ahora no hay nada que funcione.
hola potro me gustaria que hubiera una separacion entre cada pestaña del menu o un borde para que no se viera todo seguido, es posible?
ResponderEliminarmuxas gracias
Claro, debajo de #menuvert ul li {
ResponderEliminarpega esto:
border-bottom:1px solid #000;
Con eso tendrás un borde entre cada pestaña.
Saludos.
muxas gracias el potro por todo ;)
ResponderEliminarsaludos
creo que me enamore de ti....y soy hombre xD!
ResponderEliminarNo te preocupes, si me conocieras te desenamorarías :D
ResponderEliminarolas potro tengo una dudilla. en mi web ya puse el menu todo chvr pero es muy grueso y me gustaria que sea mas delgado para que no ocupe tanto espacio ps. que codigo debo cambiar? se puede verdad?
ResponderEliminarya obtube lo ke keria yeeee solo disminui los valores en padding eran 10px, 10px, 10px, 20px y yo los reduje a la mitad y listo.
ResponderEliminarpotro en mi blogg la platilla ke coloce suprimer la opcion comentarios, como la habilito?
ResponderEliminarNo he entendido ¿qué opción suprimiste?
ResponderEliminarHola mira tengo una duda, he añadido este menú a mi blog y lo he modificado y todo bien, pero antes de modificarlo (solo he cambiado los colores) me salía una página para añadir comentarios, entradas y demás y ahora lo único que me sale es... nada...
ResponderEliminarLo he quitado y vuelto a añadir por si acaso me he comido algo, pero nada que sigue igual.
Así que... help meee!!!
Hola Laura,
ResponderEliminarNo he entendido bien el problema, ¿en dónde te salía antes añadir comentarios y entradas?
En el menú, yo seleccionaba un enlace y me salía y ahora nada de nada, mira te paso el enlace para que o puedas ver (espero que puedas XD)
ResponderEliminarhttp://laemperatrizdelaluna.blogspot.com/
Es nuevo así que... intenta no asustarte!!!
Pierde cuidado que mis blogs de prueba sí son un desastre.
ResponderEliminarNo aparece nada porque no has puesto la URL a la que enlazará cada pestaña. Ayer te envié un mail explicándote cómo se hace. Revisa tu bandeja de correo no deseado por si acaso se hubiera ido allá.
Hola Potro, che muy bueno! te felicito, porque la verdad todo lo que explicas está buenísimo, y tenés una forma de explicar muy buena jejeje.
ResponderEliminarPero quería preguntarte algo...
Veras, yo tengo un blog, y quería ponerle este menú, pero en una de las pestañas quería ponerle "CONTACTO" como hago para que una persona que entre a mi Blog pueda contactarse conmigo. jeje, nosé si se entiende lo que te quiero preguntar.
Gracias che! Saludos.
Gracias por tus comentarios bug.
ResponderEliminarPuedes hacer un formulario de contacto y que la pestaña contacto enlace a ese formulario.
Saludos.
Muchas Gracias!
ResponderEliminarTengo una pregunta....en este menu como hago para que no me abra otro internet explorer...kiero q me lo habra en la misma pagina sin tener q crear otro IE...ayudenme uu
ResponderEliminarEl menú no tiene ningún atributo que indique que el enlace se abra en otra ventana, quizá has añadido algo que hace eso pero no es el menú.
ResponderEliminarq raro solo he hecho lo q me decia ahi :S...chekeare 1 vez mas pero vale man ^^. Gracias
ResponderEliminarIgual si me dices en qué blog lo has puesto puedo darme una idea de qué pueda ser lo que hace que se abra en otra ventana.
ResponderEliminarHola Potro me encanta todo lo que haces!!! es súper interesante, he aprendido muchísimo, muchas gracias!
ResponderEliminarEstoy armando mi blog que es muy sencillo, pero por ignorancia porque de HTML no se casi nada, (ahora estoy en la fase de aprendizaje) no sé como quitar los puntos que vienen por defecto de los menús verticales en Blogger
Seguro es súper fácil pero para mí es como leer un idioma extraño
gracias otra vez
Hola Paulina Teresona,
ResponderEliminar¿Cuáles puntos del menú? Necesitaría ver el blog para saber a cuáles puntos te refieres.
Saludos!
Hola Potro, finalmente ya lo resolví, finalmente me cambié a tumblr
ResponderEliminaradjunto mi blog
papelesblancos.tumblr.com
muchas gracias por contestar
Paulina
Por nada Paulina ;)
ResponderEliminar¡Saludos!
Hola gracias por tus post los e estado viendo y son muy interezantes.. En relacion a este tipo de menu me preguntaba si sera posible añadirle sub-menu en el mismo y si fuese asi podrias decirme como lograrlo gracias...
ResponderEliminarCon este menú no, ya más adelante publicaré uno vertical que sí pueda tener subpestañas.
ResponderEliminarno puedo no se si lo pego mal cuando voy a vista previa el código que pego en la plantilla se ven detrás del encabezado que estoy asciendo mal
ResponderEliminarProbablemente estás pegando el código después de donde se indica en lugar de pegarlo antes de.
ResponderEliminarmuchísimas gracias por fin di con el error te lo agradezco mucho
ResponderEliminarSaludos mano
ResponderEliminarEste menú me sirve para el blog de aviación? para ponerlo a la izquierda?
Por supuesto, puede servir para cualquier blog ya que no requiere de scripts.
ResponderEliminarhola, gracias por la explicación me resultó todo .... menos que me salen todas las letras al inico del blog, como soluciono eso, me podrias ayudar, te dejo la direccion de mi blog para que me entiendas mejor
ResponderEliminarhttp://regalarte-jsv.blogspot.com/
te agradezco si me ayudas mira que se ve bien feo jajaja
Hola JESSICA, no veo que tengas puesto el menú en tu blog.
ResponderEliminarhola Potro, me me gusta el menu vertical que tienes, pero me gustaria que ese menu estuviera cada palabra adentro de un cuadrito y que estuvieran centradas, crees que se pueda hacer?
ResponderEliminarPara centrar las letras agrega debajo de #menuvert ul li a { esto:
ResponderEliminartext-align:center;
Para que tengan un borde que las enmarque agrega debajo de #menuvert ul li { esto:
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
hola, muy interesante tu blog, muchas felicidades-
ResponderEliminardisculpa tengo un blog y me gustaria ponerle videos de youtube; pero quisiera poner de 4 en 4 en forma horizontal.
se podria hacer esto?
si tienes una respuesta de to agradecería mucho.
Puedes probar usando una tabla y ahí colocar los códigos de los videos.
ResponderEliminarGracias por el menu Potro, un saludo.
ResponderEliminarA ti por tu visita :)
ResponderEliminarHola! Gracias por explicar todo y por el menu :)
ResponderEliminarLa única duda que tengo es esta: dónde están los códigos para cambiar el color?
Un saludo!
Hola Auxi,
ResponderEliminarEn esta parte se cambia el color de fondo:
background-color: #B0CBDD; /* color de fondo del menú */
Saludos!
hola potro, ya te hice una consulta en otro posteo, pero creo que es mas pertinente haberte consultado en este post,
ResponderEliminaresta es la duda, si yo quiero poner en la url del menu la direccion de una de las etiquetas, es super entendible,
para poder hacer eso tuve qe crear un gadget de etiquetas
pero como hago para no tener al gadget por un lado y al menu en otro gadget (de html)
es decir, yo pretendo tener una seccion del menu qe tenga la url de una de las etiquetas y qe el gadget de etiquetas no exista o no se vea, espero haberte expresado claramente, te agradeceré mucho tu atencion!
Hola oso, ya te he respondido en la otra entrada. Saludos!
ResponderEliminarYa sé cuál es mi problema!!!
ResponderEliminarAhora en Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y pega ahí esto
En ese paso, yo no puedo seleccionar HTML/Javascript, no me sale. Al añadir un gadget directamente me da la lista de opciones. ¿Cómo lo soluciono?
http://laputaironia.blogspot.com/
Cuando entras en Diseño > Elementos de la página > Añadir un gadget, verás que del lado izquierdo hay unas pestañas, dicen, Lo básico, Destacados, Los más populares, Más gadgets, y Añade tu propio.
ResponderEliminarEn el primero, en Lo básico da click y verás una lista de gadgets, el primero dice 'Seguir por correo electrónico', y un poco más abajo está el que dice HTML/Javascript, ese es el que necesitas para agregar el menú.
ayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy mil graciassssssssssssssssssssssss que ayer me tiré hasta las cinco de la mañana dándole vueltas!!!!!!!!!!!!!!!!!!!! GRACIAS GRACIAS GRACIAS GRACIAS GRACIAS!!!!!!!!!!!!!!!!!!!!!!
ResponderEliminarahora tengo otro problema :-(... Se me abre el menú, pero igual que el menú de etiquetas... No habría un modo de que, cuando se seleccione una categoria del menu, se despliegue bajo la misma las entradas que contiene?????
ResponderEliminarAsí es el menú y de hecho así son todos, el único gadget que muestra el nombre de las entradas es el gadget llamado Archivo del blog.
ResponderEliminarGRACIAS :-)
ResponderEliminary las letras se pueden poner más gordas??? Es decir, en negrita???
ResponderEliminarSí, debajo de #menuvert ul { agrega:
ResponderEliminarfont-weight:bold;
Antes que nada muchas gracias por tus aportes, en verdad no cualquiera se toma el tiempo de compartir con los demás y contestar todas sus inquietudes.
ResponderEliminarCopié el código y funcionó a la perfección, pero me gustaría saber ¿cómo puedo hacer para que la pestaña permanezca del color seleccionado cuando estas en el contenido que esta debe mostrar?, por ejemplo si estas en la página de "mapa de sitio" la pestaña "mapa de sitio" se muestre con el color de selección.
Espero haberme explicado.
¡Saludos! y muchas gracias de antemano.
Por cierto, en la plantilla "viajes" de blogger inserte el gadget "lista de enlaces" y lo ubique debajo de la cabecera a modo de menú horizontal, pero la barra donde se ubican los enlaces es muy ancha, por lo cual la intenté modificar colocando line-height:20px; debajo de .tabs-inner .widget li { en diseño html pero no sucedió nada.
ResponderEliminarSupongo que no es esa la parte que debo modificar.
Gracias de nuevo.
Hola ツ carlos [я*],
ResponderEliminarUsualmente esos efectos en las pestañas sólo son posibles con uso de algún script, pero no con CSS como en este caso.
Lo de la plantilla que mencionas necesitaría verlo puesto en algún blog para entender bien cuál es el problema y decirte qué opciones hay para solucionarlo.
¡Saludos!
¡Hola!
ResponderEliminarhttp://proob123.blogspot.com/
Esa es la dirección del blog con el que estaba jugando, y como puedes notar la barra horizontal de menús es algo ancha.
¡Qué mal lo de las pestañas! Pienso que es un efecto que tiene mucha vistosidad.
Gracias por tu tiempo.
¡Saludos!
Hola de nuevo ツ carlos [я*],
ResponderEliminarBusca esta parte de tu plantilla:
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
Cambia ese 1em por otro valor, por ejemplo 10px
Saludos.
Funcionó como siempre... En serio, muy agradecido, muy agradecido.
ResponderEliminarHola potro, quiero consultarte algo, como podría hacer para agregarle una subpestaña a alguna seccion de éste menú, por ejemplo que al pasar el cursor por la seccion descargas de éste menu , se deslice una o dos subpestañas.
ResponderEliminardesde ya gracias por la atención, y voy agradecerte una respuesta
saludos
Con este menú no es posible, ya tengo un poco de tiempo que he querido publicar un menú que sí lo permita pero he tenido otras entradas pendientes que no me han dejado hacerlo, pero espero sacar todo lo atrasado lo más pronto posible y publicar un menú vertical con subestañas. Si me esperas unos días podrás verlo ;)
ResponderEliminarpotro ayudame a colocara este menu en mi blogger... aqui te dejo el link: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/
ResponderEliminarHola Redacción, no hace falta repetir la pregunta. En estos días lo pruebo y si sale bien en Blogger lo programo para las próximas entradas. Saludos.
ResponderEliminarhola potro , como andas ? te hago una consulta, tiene un menu vertical en acordeon, desplegable tipo slide que muestre los submenu hacia abajo y no hacia el costado ? como siempre muchas gracias por la atencion y estare atento a una respuesta, saludos
ResponderEliminarHola Torneo Morumbi,
ResponderEliminarHay un menú vertical desplegable al que podrías ponerle los enlaces que quieres mostrar:
http://ciudadblogger.com/2011/03/menu-vertical-desplegable-con-jquery.html
Saludos.
POTRO gracias por la rápida atención. Espero que no tenga problemas al ponerle los enlaces, el tema es que esa subpestaña tiene que ser igual a la pestaña, se logra ?
ResponderEliminarA su vez potro, voy a dejar la direccion en donde encontre hoy un menu del agrado que estaba buscando, el gran inconveniente es que no me funca, podrias probarlo y en la semana o cuando puedas avisarme si te funciono en tu blog de pruebas !!
como siempre te agradesco la amabilidad.
abrazo
me falto la direccion:
ResponderEliminarhttp://www.davidrojas.net/demos/acordeon_multinivel.html#
es el ejemplo de menu que te conte. gracias.
Claro que sí, deja lo pruebo pero no te prometo publicarlo en una semana ya que tengo bastantes posts pendientes, pero en cuanto me haga un espacio lo publico con mucho gusto, sino ese al menos uno que sea bastante parecido ;)
ResponderEliminartal cual potro, sería de mucha ayuda. Esperaré por novedades. y espero darme cuenta de las mismas jejej
ResponderEliminarMuchas gracias.
querido potro, he aprendido tanto de ti, mira aplique este menu en mi directorio, y hoy me entere que en explorer se ve todo negro donde lo puse que es en varias partes al final de la plantilla, tienes alguna idea de porque pasa eso, pues en los otros exploradores me anda de maravilla, odio explorer con tosa mi alma siempre hace problemas tampoco se ve como se debería ver las entradas, que horror
ResponderEliminarOjala me puedas dar un dato de porque sucede:S
aquí mi directorio http://www.bebloggerablogs.com/
Hola Be Bloggera,
ResponderEliminarParece que es porque hay un error en el código del color que has puesto para el fondo del menú. Tienes este:
#244244244;
Recuerda que los códigos hexadecimales son de seis caracteres, y tú has incluido nueve ahí. Cambialo por uno de seis y deberá arreglarse en Internet Explorer.
Saludos y muchas gracias por tu amable comentario.
Muchas gracias Potro lo he arreglado como me dijiste y quedo super, eres maravilloso te pasate
ResponderEliminarPotro te felicito!
ResponderEliminarTambién te quiero hacer una pregunta...
Veo que al menú cuando se le posa el raton le aparece una barrita mas oscura del lado izquiero y tambien la palabra se desplaza un poco a la derecha ¿se pueden cambiar esas dos cosas?
Claro Ariel, sólo cambia esto:
ResponderEliminarborder-left: 10px solid #000066; /* color del rectángulo junto al título */
Por esto:
border-right: 10px solid #000066; /* color del rectángulo junto al título */
El Potro y puedo cambiar que cuando le asiento el raton no se desplace el nombre un poco a la derecha?
ResponderEliminarAbajo de eso agrega esto:
ResponderEliminarmargin-right:-10px;
El Potro y porque pasaba eso? ¿sera que en el código principal de arriba habia algo que hacia que eso pasara?
ResponderEliminarLo que pasa es que el menú tiene un borde al pasar el cursor sobre la pestaña, así que, el grosor del borde (azul fuerte en mi ejemplo) es lo que desplaza el texto. Sino tuviera ese borde no se movería el texto.
ResponderEliminarEl Potro, está muy bueno el menú, además es justo lo que andaba buscando porque vi otros menús por ahí pero no me gustaba la idea de que tuvieran una imagen alojada por ahí.
ResponderEliminarAhora te hago otra pregunta, el tipo y tamaño de fuente se le puede cambiar?
Sí, en font-size: 11pt; cambias el tamaño, y debajo de eso puedes poner el tipo de fuente:
ResponderEliminarfont-family:Arial;
Muchas gracias por las respuestas y además por responder rápido. Te felicito por ayudar y haber creado éste sitio, yo recién estoy empezando con un blog...lo quiero hacer bien y la verdad que lleva mucho tiempo y dedicación
ResponderEliminarSaludos!
Tiempo, dedicación y muuucha paciencia, verás que con eso conseguirás poco a poco darle forma a tu blog tal como quieres ;)
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEl Potro, tengo un problema que tanto el menú como un banner que he puesto en el gadget no me queda centrado...cómo puedo hacer para centrar las cosas adentro del gadget?
ResponderEliminaraca te dejo el blog
ResponderEliminarhttp://thebestonlinestores.blogspot.com/
Hola Ariel,
ResponderEliminarReduce el ancho del menú a 185px (en los códigos dice dónde es el ancho del menú), se ve así porque el menú está más ancho de lo que es el ancho de tu sidebar.
Para alinear elementos dentro de un gadget mira aquí:
http://ciudadblogger.com/2009/12/alinear-elementos-y-gadgets.html
Saludos.
El Potro, siempre de gran ayuda tus respuestas
ResponderEliminarTe hago otra consuta, tengo pensado reformar el ancho de los gadgets de la columna de la izquierda para que queden mejor con el menu, el tema es que estoy pensando tambien agragar otra columna de gadgets del lado derecho pero me pregunto si se podra reformar el ancho de una sola columna de gadgets o si se reforman todas?
Me gustaria saber si es posible reformar el ancho de una sola columna de gadgets
Si agregas otra columna entonces tendrás que aumentar el ancho del blog, de lo contrario todo lo demás se reducirá. Saludos.
ResponderEliminarGracias, disculpa tantas preguntas, saludos !
ResponderEliminarNo hay porqué disculparse ;)
ResponderEliminarHola nuevamente Potro, ya aprendí bien el tema del menú, incluso a añadirle CSS, voy de apoco porque estoy haciendo 4 blogs, la consulta que te quiero hacer es la siguiente: Si lo pongo imágenes a los botones, hay que subirlas si o si fuera de blogger o se pueden alojar de alguna manera en blogger?
ResponderEliminarOtra cosa, poner ese tipo de imagenes le aumente el tiempo de carga al blog?
Hola Ariel,
ResponderEliminarPuedes subirlas a Blogger, de hecho las imágenes que subimos desde Blogger se alojan en Picasa, así que también las puedes subir directo en Picasa:
http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html
Lo del tiempo de carga depende de qué tan grande sea el tamaño de la imagen, sino es mucho no debe afectar.
Saludos.
Este comentario ha sido eliminado por el autor.
ResponderEliminarhola potro, felicitaciones,tienes unos temas de gran ayuda, ahora por favor si me puedes ayudar con este pequeño problema, es con el menú horizontal, no consigo poner a la medida de la imagen que esta de cabecera hay alguna manera que esto se pueda ajustar a esa medida, aquí te adjunto el link, http://constructoraasociadesfega.blogspot.com/ , hechale un vistazo Xfa! desde ya muy agradecido por tu ayuda. SALUDOS CORDIALES.
ResponderEliminarGracias kawsaqi.
EliminarPara extender el menú y que lo cubra todo, cambia esto:
#menucontainer{
position:relative;
height:50px;
color:#FFFFFF;
background:#383636;
width:100%;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
Por esto:
#menucontainer {
position: relative;
height: 50px;
color: white;
background: #383636;
width: 107%;
font-family: Helvetica,Arial,Verdana,sans-serif;
margin-left: -30px;
}
grandioso!!, me re-sirvió, muchas gracias Potro, eso! que cambien otro tipo de menú tuve que guiarme de los puntos que detallas. muchas gracias, un abrazo, saludos desde Perú!!.
ResponderEliminarQué gusto que te haya servido, ¡saludos!
EliminarBuenas. Aqui saluda Manu desde otro usuario =P Resulta que una de la páginas que administro tiene este menu, y funcionaba normalmente. La cuestión es que hace poco revisé y los links que tiene cada pestaña no me los reconoce. Probé en Chrome y Firefox y pasa lo mismo. Nosé si surgió alguna incompatibilidad en la plantilla o qué.
ResponderEliminarPerdon la molestia, saludos
http://universidad-mijd.com.ar
Hola Manu, revisa las URLs, están incompletas, cópialas y pégalas correctamente para que funcionen los enlaces. Saludos.
EliminarMuy buen post Potro pero estoy buscando una manera de crear el menú con una imagen, es decir quiero que el menú sea una sola barra (Una imagen) y que aparezcan los títulos de cada pagina dentro de esa barra pero al darle clic encima de cada texto vaya a su pagina correspondiente.
ResponderEliminarEspero me contestes, necesito muy urgente esa información.
Mira este es un ejemplo de lo que estoy buscando: http://cp-globalpenguin.blogspot.com.es/ ¡Gracias!
No hace falta duplicar los comentarios, ya te he respondido en la otra entrada ;)
EliminarPotro, no me sale... se me queda muy mal ubicado. ¿Qué crees que puede ser?
ResponderEliminarUn saludo
www.antiguedadesreligiosas.blogspot.com
Hola AnticuarioReligioso, estos menús son para la sidebar, si lo pones en esa área quizá debas primero seguir estos pasos:
Eliminarhttp://ciudadblogger.com/2011/03/como-usar-cualquier-menu-en-las.html
Gracias Potro, finalmente he optado por cambiarlo de posición, pero ahora no me salen las barras divisorias ¿Cómo puedo solucionarlo? Gracias de antemano!!
EliminarEn realidad no hay barras divisorias, así es como debe salir. En el del ejemplo se ve así por la plantilla que tengo, cuando lo publiqué tenía otra plantilla en el cual se veía como en el tuyo, así es como debe ser ;)
EliminarHola Potro, sé que has estado de vacaciones y no te quiero meter ninguna prisa,,, Verás, he metido ese código y copiado uno a uno los datos de las pestañas así como urls, bien, todo bien,,, pero parece que debe quedar algún resto de la barra de botones anterior pq aunque la borre me sale cada X tiempo sin ponerla y duplicandome los enlaces. ¿Sabes si es por tener algún codigo duplicado o algo en el html?
ResponderEliminarHola Javier. Quizá existen rastros del otro código que tenías, no sé qué menú tenías antes, pero ve a la entrada donde tomaste los códigos y revisa que hayas eliminado absolutamente todo lo que hayas puesto de ahí.
EliminarSi todo estuviera bien prueba eliminar las cookies y caché de tu navegador, solo por si fuera el caso de que la "memoria" del navegador sigue mostrando algo que existió antes.
Hola Potro,,, el menú que tenía era horizontal y puesto a mano con códigos tomados de tú blog hace ya algún año que otro. De todos modos te quería consultar algo pero no sé donde puedo preguntarte,,, es referente a las plantillas de artisteer,,, ya me comentarás si procede ok? Como siempre gracias Potro por tú amabilidad.
ResponderEliminarComo me dijiste en otro comentario creo que tengo un problema de caché pq ahora he puesto otra plantilla y continua haciendome 2 menús y he de borrar uno.
EliminarDe Aristeer no sé nada Javier, esas plantillas y yo no nos llevamos muy bien, parece que no me quieren :(
Eliminar¿En cuál blog tienes el problema y cuál menú deseas eliminar?
EliminarGracias Potro, lo pude solucionar!!
ResponderEliminarHola potro lo puedo colocar en mi blog http://serviciodereparaciones.blogspot.com.es/ por el lado izquierdo como flotante.
ResponderEliminarGracias,
Nunca lo he intentado hacer flotante Jesus, puedes probar poniendo debajo de #menuvert ul { esto:
Eliminarposition:fixed;
left:0;
top:250px;
Potro querido Gracias... Quedó bien si bien no es un boton de cada color, logre la composición :)))
ResponderEliminarhttp://anapradapecadora.blogspot.com.ar/
Excelente :)
Eliminaryo quisiera decir que voy haciendo cosas en blogger a base de pruebas
ResponderEliminar¿me podeis decir un codigo de menu vertical donde pinche en el titulo y me lleve a donde dice?como por ejemplo una autora Amanda quick pinchar y que me aparezca el lugar donde esta la sipnosis y demas del libro ?
Hola LaBibliotecaria, cualquier menú podría servirte, en realidad tú eliges qué página abrirá la pestaña, es cuestión de que elijas cuál dirección poner en la URL de la pestaña.
EliminarHola protro muchas gracias por tan magnifico aporte y ayudarnos a todos. Me gusta mucho este menú, como hago para colocarlo a la derecha? quiero poner el menú a la derecha. Gracias de antemano. Saludos desde Venezuela.
ResponderEliminarHola, puedes moverlo a la derecha con estos estilos:
Eliminar#menuvert {
float:right;
}
Hola de nuevo, gracias por tan pronta respuesta potro. Esos estilos donde lo coloco? lo que quiero es colocar el menú a la derecha y centrado. Gracias de nuevo.
EliminarTodos los estilos van siempre antes de ]]></b:skin>
EliminarSaludos.
Hola potro disculpa pero tengo otra pregunta. Como hago para poner el menú a la derecha y en el centro. Me quedó arriba a la izquierda. Mira como va http://pruebascsplus.blogspot.com/ espero tu respuesta. Gracias.
ResponderEliminarHola, mira el comentario que está arriba.
Eliminarhola, como hago para el menu de categorias que tienes en tu blog?? con el buscador de google.
ResponderEliminarGracias!
Hola Carlos, el buscador no es parte del menú, es sólo otro gadget que puse debajo del menú. Éste se puede hacer de varias formas, una forma simple es con una tabla HTML:
Eliminarhttp://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html
EXCELENTE¡¡¡¡
ResponderEliminar¡Hola El Potro! Primero decir que me encanta Ciudad Blogger, por mucho que mire no termino de descubrir cosas nuevas sobre los códigos y el mundo Blogger (que tanto se percibe por cualquier lugar xDD) así que mi enhorabuena por este genial blog~~
ResponderEliminarYyyyy una vez dicho eso voy a una duda que tengo sobre este post xD.
Pues me gustaría quitar los puntos negros que aparecen por defecto en las listas verticales de menú, este es mi menú:
http://oi41.tinypic.com/2q1zytc.jpg
Lo que quiero suprimir (los puntos que aparecen por defecto) están enmarcados en un recuadro azul claro. Espero que puedas ayudarme, porque por mucho que lo he intentado no he logrado arreglarlo xD.
¡Gracias de antemano!
Muchas gracias Pegaso. Prueba con este código:
Eliminar.sidebar ul, .sidebar li, #menuvert ul li, #menuvert li {
list-style:none;
}
Hola! gracias por compartir esto, una pregunta, ¿se pueden colocar menus verticales Y horizontales? porque no quiero que quede todo junto en el sector superior, y ademas me gustaría tener menú para otras temáticas a los laterales de mi blog. Muchas gracias
ResponderEliminarPor supuesto baby blue, puedes usar todos los menús que quieras, este lo puedes poner en la sidebar (por ejemplo) y luego puedes poner otro menú más debajo de la cabecera. En la categoría "Menús" encontrarás más opciones.
Eliminarhola ... estoy diseñando una red social movil bastante sencilla y me parece un menu excelente ,,, aunque estoy esperando puedas ayudarme ..
ResponderEliminarnecesito hacer un duplicado del menu osea
como dos listas paralelas .
saludos y gracias de ante mano.
Hola hecgabor, es sencillo, sólo aumenta al doble al /* ancho del menú */ por ejemplo que quede en 400px
EliminarLuego debajo de #menuvert ul li { agrega esto:
width: 49%;
float:left;
Eso hará que el menú se divida en dos columnas.
Saludos.
gracias . es justo lo que buscaba.
ResponderEliminarHola, sigo tu blog desde hace tiempo y ahora que sé que has vuelto, me gustaría saber cómo puedo poner dos menús como este, uno a la izquierda y otro a la derecha. Lo pondría a cada lado de la cabecera, pero creo que eso sé hacerlo.
ResponderEliminar¡Un saludo!
Hola María, gracias por seguir este blog :)
Eliminar¿Lo quieres poner abajo de la cabecera, o justo a los extremos de la cabecera?
Hola,me pregunto como pongo ese menu en una entrada de mi blog,pues uno de los que tengo es de TV y quiero hacer una lista de capitulos con ese efecto que tiene este menu cuando coloco el cursor encima del enlace,o si tienes alguna entrada con lo que necesito para poder hacer mi lista de capitulos,gracias
ResponderEliminarEs de la misma forma, sólo que el último código lo pondrías en tu entrada estando en la pestaña HTML y no en Redactar.
EliminarOk muchas gracias
Eliminarhola! me encanta tu página. ¿cómo hago para insertar este menú vertical en las nuevas plantillas de blogger? gracias!
ResponderEliminarHola, ¿a cuáles plantillas te refieres? ¿a las de Vistas Dinámicas? en ellas no se puede añadir nada de esto, no son personalizables :(
EliminarUna pregunta, si lo que quiero lograr es que el menú esté al lado del banner ¿cómo lo haría? Lo que pasa es que yo seguí paso a paso, pero se sitúa debajo del banner
ResponderEliminarHola, ¿cuál banner y en cuál blog?
EliminarHola, tengo un problema no consigo ese widget HTML/javascript...
ResponderEliminarEntra en Diseño, ahí da click en Añadir un gadget, se abrirá una ventana emergente, dentro de "Lo básico" selecciona HTML/Javascript.
EliminarMuchísimas, muchísimas gracias! era justo lo que estaba buscando! Genial! miles de veces me ayudó tu página, continúa así :)
ResponderEliminar(:
EliminarHola potro, te hago una consulta, como puedo hacer para que en este menu que esta muy bueno al hacer clic en cada pestaña me busque etiquetas agrupando entradas a según las etiqueta. yo intente así
ResponderEliminarhttp://compraventasanjusto.blogspot.com.ar//search/label/musica tendria que buscar las etiquetas con musica. pero me de error
Hola, en esa URL estás duplicando una diagonal. En esta entrada verás cómo obtener la URL de tus etiquetas:
Eliminarhttp://www.ciudadblogger.com/2010/06/menu-de-categorias.html
De cualquier manera no he visto que tengas alguna entrada con esa etiqueta.
Muchas gracias y perdon por hacerte perder el tiempo en contestarme, ya me di cuenta cual es el error, en si siempre funciono, solo que probe mal el menu, pero anda perfecto. gracias
Eliminar