Menú expandible | Oloblogger En esta ocasión vamos a ver otra forma fácil de hacer un menú expandible. Segunda solución para los que la habéis pedido. Es una chapucilla...

6 de diciembre de 2007

Menú expandible

En esta ocasión vamos a ver otra forma fácil de hacer un menú expandible. Segunda solución para los que la habéis pedido. Es una chapucilla, pero el resultado puede ser bueno según lo que se pretenda. Además no requiere grandes cambios en la plantilla y permite bastante configuracion personal.

Click en los botones para ver el resultado.


Justo antes del </head>, hay que insertar éste código en la hoja de estilo (plantilla):

<style type='text/css'>
.ver_menu { display:block; }
.ocultar_menu { display:none; }
</style>
<script type='text/JavaScript'>
function desplegar(categoria){
var menu = document.getElementById(categoria);
if(menu.className == &quot;ver_menu&quot;){
menu.className = &quot;ocultar_menu&quot;;
}
else{ menu.className = &quot;ver_menu&quot;; } }
</script>

Una vez que tenemos creadas las funciones ver_menu y ocultar_menu, la cosa está fácil. Tenemos que Añadir un nuevo Elemento de Página tipo HTML. Esta sería la estructura básica

<script type="text/JavaScript"></script>
<br/>
<span class="
boton1" align="left"><a href="javascript:desplegar ('boton1');"><img border="0" src="URLDelBoton1/"></a><span id="boton1" class="ocultar_menu">AquiLasOpciones</span></span>

Para cada apartado principal, tenemos que repetir la estructura que hay tras el salto de línea <br/>. Vamos, desde el <SPAN CLASS=... hasta el final.

Hay que cambiar el nombre boton1 por el que corresponda, la imagen de dicho botón y, evidentemente, las opciones del apartado.

Para generar las opciones o dicho de otro modo, los submenús, lo más práctico es utilizar la instrucción <ul>, que se formula de la siguiente manera:

<ul><li><a href="URLEnlace1">NombreEnlace1</a></li><li><a href="URLEnlace2">NombreEnlace2</a></li><li><a href="URLEnlace3">NombreEnlace3</a></li></ul>

UL marca el principio y fin de la lista y LI cada uno de los elementos de la lista. Se pueden sustituir las palabras de los distintos apartados (en el ejemplo NombreEnlace1, 2 y 3) por una imagen alusiva al tema, para lo cual habría que poner en su lugar algo del tipo <img src="URLDeLaImagen"/>

Esto se debe insertar en lugar de la expresión AquiLasOpciones que aparecía cuando se explicaba la estructura básicas.

La configuración final ya depende de vosotros, puesto que podeis poner como botones la imagen que querais. Para los elementos de la lista (enlaces), también podeis usar los recursos habituales, tal y como se explicaba en la entrada sobre Configuración de Viñetas o incluso, como también se ha comentado, imágenes en lugar de palabras .

Para verlo todo junto, se adjunta el código completo del menú de ejemplo que se puede ver al principio de esta entrada.


[Ver/Ocultar Código]
<div align="left"><script type="text/JavaScript"></script></br>
<span class="boton1" align="left"><a href="javascript:desplegar ('boton1');"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXoDXwFyqK80LtQUUAMjPRcGEHmo7eI0-frq60WbPv3jyveaMmJUdFb1DrUhCHLglX-mQhMH0ozoPAPEtXaLpFPUXp1_Gqt2HUcbCPJBQ9bmd10wBtFI5W_nAVrX3g1Ze0yJcWCb6W9_4/s400/AMB+A.gif"/></a><span id="boton1" class="ocultar_menu"><ul><li><a href="http://olografias.blogspot.com/2007/11/ambigrama-milagros.html">Milagros</a></li><li><a href="http://olografias.blogspot.com/2007/10/ambigrama-antonio.html">Antonio</a></li><li><a href="http://olografias.blogspot.com/2007/09/ambigrama-olga.html">Olga</a></li></ul></span></span>
<span class="boton2" align="left"><a href="javascript:desplegar ('boton2');"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPaEdfDNrCaMHEFDm0hcUlGBGo2FSl2mNpssDl0nRgAQiyO2VPc0q7niWQ7fjGvh1SfonzZ-uNOQAx4bCgJcSd0v_VyCPs_YLHJ_nXrss1EEMmUGkVDhR8d-UPWvOIMx1Cw5vSvBgvJpg/s400/TER+A.gif"/></a><span id="boton2" class="ocultar_menu" align="left"><ul><li><a href="http://olojuegos.blogspot.com/2007/01/tercer-ojo-pistas-niveles-1-5.html">Niveles 1-5</a></li><li><a href="http://olojuegos.blogspot.com/2007/01/tercer-ojo-pistas-niveles-6-10.html">Niveles 6-10</a></li><li>ETC</li></ul></span></span></div>


Para que los botones queden más juntos, habría que eliminar del código el espacio en blanco entre DIV's, que en esta ocasión se ha dejado para una mayor claridad en la explicación. Si se quiere dejar un menú más o menos horizontal, entonces hay que ponerlo todo seguido, sin introducir el salto de línea entre ellos.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

85 comentarios :

  1. bueno, este esta mejor que el post que te pedi anteriormente, lo voy a intentar a ver que tal me va, jajaja, saludos

    ResponderEliminar
  2. Lo conseguí, y mi blog cada vez tiene un aspecto mejor. Muchas gracias.
    Un pequeño homenaje:

    http://kikelincaricaturas.blogspot.com/2007/01/premio-dardo.html

    ResponderEliminar
  3. Maricon mentiroso esa caca no funciona estafador de mierda,
    al clikear sobre las imagenes no se despliega nada, en el que muestras si.
    Estas ocultando algo parece jajajaja!!

    ResponderEliminar
    Respuestas
    1. no te pases forest
      caballo regalado no se le ve el diente

      Eliminar
  4. Botón derecho --> Ver código fuente --> Comprobar código utilizado

    ResponderEliminar
  5. bueno yo me estoy iniciando y no entiendo muy bien , sobre todo eso de "Una vez que tenemos creadas las funciones ver_menu y ocultar_menu" no se si podrias ayudarme en esto.

    ResponderEliminar
  6. "crear las funciones ver_menu y ocultar_menu". Esto es simplemente un comentario para intentar aclarar que es lo que hemos hecho en el paso anterior. Sólo eso

    ResponderEliminar
  7. Muy bueno el ejemplo ;-) Claro que en la función JS, en la parte del IF, hay que sacar los &Quot; y cambiarlos por ". Así funciona de maravilla.

    Gracias ;-)

    ResponderEliminar
  8. Yo tengo un pequeño problema con esto..

    Me funciona bien y tal, pero hay a veces que cuando cargas la página, el menú desplegable está desplegado, quiero decir, que no está oculto los enlazes. ¿Hay alguna forma de remediar esto, para que siempre que carges la página siempre permanezca oculto?

    Gracias, y por cierto gran blog.

    ResponderEliminar
  9. Conan, si has aplicado bien todo el código, no debería pasar eso.

    ResponderEliminar
  10. Hola Oloman, me pasa una cosa curiosa con este método, el tema es que voy poniendo enlaces (unos 6 llevo ya), y el 1º y el último de estos enlaces no me lleva a ningún lado, me he percatado que escribo el código como lo muestas, lo guardo y visualizo y la sorpresa es que el código me lo cambia, vuelvo a rectificar el código y nada no hay forma, se quedan algunas opciones sin las comillas y el signo = en donde va la url, a ver que te parece. Un saludo.

    ResponderEliminar
  11. Keko, he copiado y pegado el código que se da a modo de ejemplo y me funciona correctamente. El post es antiguo y pensaba que quizás alguna modificación en Blogger pudiera hacer que ahora funcionara mal, pero no es así.

    Copia y pega este y prueba. Si te funciona, sustituye enlaces por los tuyos. Prueba de nuevo y si te funciona, añade los nuevos enlaces que necesites. Así podrás comprobar si es que se trataba de un error al teclear.

    ResponderEliminar
  12. Buenas, escribo por primera vez y por tanto un saludo Oloman.
    Tengo un problema, todo lo hago (creo) según dices pero el resultado es que en mi blog no sale El boton con el nombre.Todo lo demás funciona.
    Yo creo que es porque no sé que poner en "URLDelBoton1/" (yo he puesto la URL del modelo de tu boton de este post)


    Otra cosa; Donde puedo acceder a "más tipo de botones"

    Mi blog en construccion es: priamo22.blogspot.com

    gracias

    ResponderEliminar
  13. Priamo, he tardado un poco en contestar y ya veo que lo tienes solucionado.

    Este post es bastante casero, pero tiene la gracia de que todo te lo haces tú mismo. Si quieres otras opciones para menús más "sofisticados", busca en la barra Google de la derecha con la palabra MENU.

    Con respecto a los botones, tenemos una categoría para ellos. En los cuadraditos superiores bajo la cabecera, pincha en el del dibujo del botón, para acceder a todos los posts relativos.

    No obstante, no es muy difícil diseñarte tu propia imagen que sirva de botón.

    Un saludo.

    ResponderEliminar
  14. Oloman,soy priamo tienes algun articulo (no lo he encontrado) que haga referencia al desarrollo de las barras-menu desplegables que tienes en tu blog: p.e "Los que mas comentan" "Donde estamos"...veo que se despliega y contrae en forma de acordeon.Me encantan.
    De nuevo gracias por tu trabajo.Un saludo

    ResponderEliminar
  15. hola oloman
    estoy con un blog y keria hacer un desplegable asi;lo de antes del head vale pero todo lo demas, en ke parte va????????
    por ejemplo,el codigo completo del menu ke esta al final donde se situaria???
    muchas gracias por adelantado

    ResponderEliminar
  16. Israel, la parte de HTML la tienes que poner en un elemento HTML (ver en el post como añadir uno), que normalmente irá situado encima de las entradas. Lo creas en la sidebar, por ejemplo, y luego lo mueves a ese sitio... o a cualquier otro que gustes.

    ResponderEliminar
  17. hola de nuevo
    pues creo ke lo tengo bien pero no me va, sino te importa echarle un vistazo, yo te lo envio por email.
    gracias , un saludo

    ResponderEliminar
  18. hola
    ya lo tengo solucionado;
    gracias por todo

    ResponderEliminar
  19. favor: como hago lo siguiente, que un menu se despliegue y tenga varias opciones y en cada opcion vaya a una pagina pero dentro del marco principal. osea esta dividida en 3, superior, derecha e izquierda. el Menu desplegable que este a la izquierda y al hacer click en la opcion aparesca la pagina en la izquierda. Gracias
    marcelo jinformatica@infovia.com.ar

    ResponderEliminar
  20. Marcelo, no entiendo muy bien lo que quieres, pero a ver si es esto:
    http://oloblogger.blogspot.com/2008/05/menu-vertical-desplegable.html

    ResponderEliminar
  21. hola, gracias por el consejo anterior, estoy experimentando con el mismo.
    Se me ocurrió algo y quiero que me digas si es posible: tengo una "lista de enlaces" (creada con el widget de blogger), que da como opciones ordenar alfabéticamente, ordenar alfabéticamente pero al revés, y no ordenar. LO QUE me gustaría es ordenar cronológicamente dichos enlaces.
    ¿qué dices? ¿será posible? ¿podrías darme alguna idea?
    gracias otra vez y las veces necesarias.

    ResponderEliminar
  22. De manera automática no, BdlE, pero hay otra opción más que es ordenarlos cómo tú quieras. Cuando editas el gadget, a la izquierda de los enlaces hay una flechitas arriba-abajo que sirven para reubicar los enlaces.

    ResponderEliminar
  23. he puesto en mi blog [+/-] pero me sale mas abajo que el título de la entrada, como lo puedo arreglar gracias, www.luz-tic.blogspot.com

    ResponderEliminar
  24. en vez de ese +/- puedo poner un gif que tengo en mi picasa?, como lo haria?, gracias por tu ayuda, un saludo

    ResponderEliminar
  25. Hola luz. En tu código hay una parte que forma una tabla con TABLE, TR, TD. La primera celda está así: td width="40px"
    Se trata de alinear verticalmente añadiendo por ejemplo un valign="middle". Esto funciona, pero creo que no es muy correcto. En su lugar podrías añadir una etiqueta STYLE para fijar en los dos TD un LINE-HEIGHT con la misma altura.

    Para poner una imagen, directamente sustituye [+/-] por
    <img src='URL_IMAGEN' />
    Si lo haces así, aprovecha para hacer una imagen del mismo alto que el texto del título del post.

    ResponderEliminar
  26. ya me sale pero la imagen es un gif y me sale grandisimo, lo puedo achicar, me dirías como, gracias por tu ayuda, eres estupendo

    ResponderEliminar
  27. ya he podido hacerlo mas pequeño, lo único que me falta es quitar el borde de la imagen

    ResponderEliminar
  28. Luz, la estupenda eres tú, que ya vas encontrando soluciones antes de que conteste ;)

    Para quitar el borde y aprovechar para meter ahí el tema de las dimensiones...
    <img src='http://lh6.ggpht.com/_vzR5XFm52h8/Sts7uoWcVZI/AAAAAAAACgk/m0-o-FXBtoY/owlWHTl.gif' style='width:35px; height:35px; border:0px;' >

    ResponderEliminar
  29. yo , solo cacharreo, hace solo un mes que me he metido con esto del blog, a ver si estos estudian algo, intento ponerlo lo más atractivo posible, pero hay veces que no hay manera, la verdad que en html no he programado nunca, pero supongo que como todo es ponerse.
    si me puedes dar alguna sugerencia de alguna cosa que pueda ser interesante a mis alumnos díme, sería de agradecer, un saludo voy a ver si puedo quitar el dichoso borde

    ResponderEliminar
  30. ¿Para que entren tus jóvenes alumnos? Pues obligándoles a comentar en el blog como prueba de que han visto tus artículos y dos negativos al que no lo haga :)

    Por una experiencia similar, te puedo decir que el simple hecho de que sea algo que huele a didáctico ya les tira para atrás.

    Si tengo que dar alguna idea, se me ocurre que para ellos mejor lo inmediato, menos texto y más multimedia (imágenes, sonido y vídeo). Por cierto, que no sé si la banda sonora les gustará. Quizás debas poner los 10 primeros de Los Cuarenta. ;)

    Echa un vistazo también al sistema de posts con sumarios que quizás te convenga ponerlo para mostrar un resumen de la información más reciente en la portada del blog. Como además son sólo unas pocas líneas lo que se ve, no asustas con un texto largo de primeras, volviendo a la idea del anterior párrafo.

    ResponderEliminar
  31. ya lo he hecho creo que queda bien, he sustituido el segundo código que das en el data:post.body de
    div class='post-body entry-content'

    me funciona bien, lo que no sé es si habrá algún problema.
    perdona que no te ponga el código tal cual pero cuando lo hago me da un error diciendome que mi html no es aceptable, no se por que me pasa esto

    ResponderEliminar
  32. perdona te volví a pregutar lo mismo en otro enlace sigo con el tema de poner la imagen alineada con el texto, es que no encuentro TABLE, TR, TD. por donde lo busco en las definiciones, en el cuerpo,..., gracias

    ResponderEliminar
  33. ya lo he encontrado he puesto el valign="middle"
    aqui
    <b:includable id='PeekABooPost' var='post'>

    <div class='post uncustomized-post-template'>

    <table><tr><td valing='midle' width='40px'>

    <a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'><img src='http://lh3.ggpht.com/_vzR5XFm52h8/St3rrPHtVxI/AAAAAAAACic/CPqYFL8hfYQ/arroba.gif' style='width:30px; height:30px; border:0px;'/></a>< pero nada la arroba me sigue saliendo mas abajo

    ResponderEliminar
  34. Luz, ¿La arroba abajo o quizás el texto arriba? Ambas cosas. Prueba a ponerle un HEIGHT a las celdas del tamaño del alto de tu imagen. De esa manera la imagen ocupará todo el alto. Luego al texto le das un LINE-HEIGHT de los mismos pixels para intentar hacer lo mismo. Espero que lo del punto y coma que te he comentado hace un momento sea el origen del problema actual de tu blog.

    ResponderEliminar
  35. no mira lo que hice fué intentar que las imagenes de los comentarios me quedaran dentro del recuadro y puse el siguiente código
    <style type='text/css'>

    #comments-block.avatar-comment-indent {

    margin-left:0;

    }



    #comments-block .avatar-image-container {

    float:left;

    height:49px;

    position:static;

    width:49px;

    margin-right:15px;

    margin-top: 15px;

    }



    #comments-block .avatar-image-container img {

    background:#333 url(url imagen de fondo) no-repeat 50% 50%;

    border: 2px double #003366;

    display:block;

    float:none;

    min-height:45px;

    min-width:45px;

    padding:3px;

    }



    #comments-block .avatar-image-container.avatar-stock {

    background:#333 url(http://lh5.ggpht.com/_vzR5XFm52h8/St84A9KeeyI/AAAAAAAAClQ/6LskTDdGtrg/Sin%20nombre.jpg) no-repeat 0% 0%;

    border: 2px double #003366;

    }



    #comments-block .avatar-image-container.avatar-stock img {

    display:none;

    }



    img.delayLoad {

    max-height: 45px;

    max-width: 45px;

    min-height: 45px;

    min-width: 45px;

    }



    </style>
    y se me fue todo al garete, el caso es que en internet explorer se veía bien

    ResponderEliminar
  36. lo he quitado y ya no hay problemas, se vuelve a ver, pero como meto la imagen dentro, quito la flechita que sale y el número lo coloco a la izquierda y mas grande, son muchas cosas lo siento.
    respondiendo a tu pregunta la arroba me sale mas abajo que el texto, ¿donde pongo el heigth?, ay estoy perdidísima

    ResponderEliminar
  37. Igual que en el primer TD pusiste un VALIGN="MIDDLE" para centrar la imagen, ahora haz lo mismo en el segundo TD, que es el que contiene el título del post. Eso o colocar un STYLE="LINE-HEIGHT:30PX; también en el TD. Cada TD es una celda de una tabla.

    ResponderEliminar
  38. ya encontré los dos td, uno en
    <b:includable id='PeekABooPost' var='post'>

    <div class='post uncustomized-post-template'>

    <table><tr><td STYLE='LINE-HEIGHT:30PX'>

    y el otro en:
    <b:includable id='ResumenPost' var='post'>

    <b:includable id='ResumenPost' var='post'> <table cellpadding='0' cellspacing='0' class='post-resumen'><tbody> <tr> <td STYLE='LINE-HEIGHT:30PX' rowspan='2'> ... <h3><a expr:href='data:post.url'><data:post.title/></a></h3> <p class='txt-resumen' expr:id='&quot;resumen-&quot; + data:post.id'/> ...

    y nada y poniendo valing='midle' width='30px' despues de los dos td tampoco

    ResponderEliminar
  39. Hmmm. No me suena eso. Debería haber un TABLE, un TR y dos TD, uno para el dibujo y otro para el título del post con una etiqueta H3. Todo con sus correspondientes cierres después. En la celda (TD) del título de la entrada es donde se debería incorporar el valign='middle'. De todas formas creo que ya lo tienes con un formato aceptable.

    Echa un vistazo a algún artículo sobre cómo construir tablas, que te puede ser útil para esta y para otra ocasión.

    ResponderEliminar
  40. podría ser aquí
    <b:includable id='ResumenPost' var='post'> <table cellpadding='0' cellspacing='0' class='post-resumen'><tbody> <tr> <td rowspan='2' valing='midle' width='30px'> <h3><a expr:href='data:post.url'><data:post.title/></a></h3> <p class='txt-resumen' expr:id='&quot;resumen-&quot; + data:post.id'/> </td> <td class='celdaderecha'> <span class='lafecha-resumen' expr:id='&quot;fecha-&quot; + data:post.id'> <script type='text/javascript'>calendario(&#39;<data:post.timestamp/>&#39;);</script> </span> </td> </tr> <tr> <td class='celdaspan'> <a class='toggleresumenpost' expr:onclick='&quot;toggleResumenPost(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'>[+/-]</a> </td> </tr> </tbody></table> <div class='post-oculto' expr:id='&quot;dummy-&quot; + data:post.id'> <div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> </div> </div> <script type='text/javascript'>resumenPost(&#39;<data:post.id/>&#39;);</script></b:includable></b:includable>

    ResponderEliminar
  41. No creo. Eso tiene pinta de ser para lo de Leer Más, pero creo que tú lo tienes montado con otro tipo de código. Lo que es seguro es que tiene que estar por dónde la imagen de la arroba. Búscala y cerca tiene que estar lo del título del post:
    http://lh3.ggpht.com/_vzR5XFm52h8/St3rrPHtVxI/AAAAAAAACic/CPqYFL8hfYQ/arroba.gif

    ResponderEliminar
  42. el único codigo donde se encuentra la imagen es en este trozo

    <b:includable id='PeekABooPost' var='post'>

    <div class='post uncustomized-post-template'>

    <table><tr><td valing='midle' width='30px'>

    <a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'><img src='http://lh3.ggpht.com/_vzR5XFm52h8/St3rrPHtVxI/AAAAAAAACic/CPqYFL8hfYQ/arroba.gif' style='width:30px; height:30px; border:0px;'/></a></td><td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>

    <div class='post-body' expr:id='data:post.id' style='display:none'>

    <p><data:post.body/></p>

    <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>

    </div>

    </b:includable>

    ResponderEliminar
  43. pongo STYLE='LINE-HEIGHT:30PX' en vez de valign=midle y en el otro td que está justo antes de h3 class='post-title' y nada

    ResponderEliminar
  44. Ese exactamente es el trozo de código dónde hay que hacer las modificaciones. Espero que el VALING que has reproducido sea una errata, porque es VALIGN. De todas formas, en el segundo TD es dónde tienes que poner ese VALIGN='MIDDLE' para que centre verticalmente el texto y ahí es dónde podrías incorporar también un STYLE='LINE-HEIGHT:30PX;'

    ResponderEliminar
  45. lo pongo de esta manera, y nada sigue igual

    <b:includable id='PeekABooPost' var='post'>

    <div class='post uncustomized-post-template'>

    <table><tr><td STYLE='LINE-HEIGHT:30PX;' valing='middle'>

    <a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'><img src='http://lh3.ggpht.com/_vzR5XFm52h8/St3rrPHtVxI/AAAAAAAACic/CPqYFL8hfYQ/arroba.gif' style='width:30px; height:30px; border:0px;'/></a></td><td STYLE='LINE-HEIGHT:30PX;' valing='middle'><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>

    <div class='post-body' expr:id='data:post.id' style='display:none'>

    <p><data:post.body/></p>

    <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>

    </div>

    </b:includable>

    ResponderEliminar
  46. Has vuelto a poner VALING. Es con la n y la g cambiadas: VALIGN

    ResponderEliminar
  47. Dios cuando una no tiene la cabeza bien, pues pasa lo que pasa, perdona el despiste, ahora ya lo corregí, lo he puesto así:

    <b:includable id='PeekABooPost' var='post'>
    <div class='post uncustomized-post-template'>
    <table><tr><td STYLE='LINE-HEIGHT:30PX;' valign='middle'>
    <a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'><img src='http://lh3.ggpht.com/_vzR5XFm52h8/St3rrPHtVxI/AAAAAAAACic/CPqYFL8hfYQ/arroba.gif' style='width:30px; height:30px; border:0px;'/></a></td><td STYLE='LINE-HEIGHT:30PX;' valign='middle'><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>
    <div class='post-body' expr:id='data:post.id' style='display:none'>
    <p><data:post.body/></p>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    </div>
    </b:includable>
    Pero nada sigue igual, de todos modos dejalo, me va a volver loca y tampoco queda tan mal.


    he cambiado la imagen que va delante de las etiquetas, las he creado con gimp y le he puesto un fondo transparente, sabes decirme por que en internet explorer me muestra un fondo de la imagen que no es transparente, y en firefox, me sale bien. gracias

    ResponderEliminar
  48. Sí, porque la verdad es que no sé que pasa y efectivamente, no está centrado pero está bien. Sólo una cosa más para que pruebes: cambia los tags H3 por SPAN, porque creo que al venir después, sus atributos "mandan" sobre los anteriores y es posible que en H3 tengas alguna propiedad que se pegue de tortas con las que estamos intentando poner.

    Lo de IE es porque IE es así de chulo. No hay más explicación. Generalmente pasa con los PNG con transparencia, por lo que supongo que será ese tipo de imagen la que has utilizado. Prueba con un GIF.

    ResponderEliminar
  49. eres un genio, ahora si, sale estupendo muchas gracias

    ResponderEliminar
  50. bueno IE ahora de repente ya no me pone el fondo de la imagen, asi que tambien solucionado, un saludo y muchiiiisimas gracias

    ResponderEliminar
  51. Ojo con IE Luz. La versión 8 creo que ya no da problemas con las transparencias PNG, pero los anteriores sí.

    ResponderEliminar
  52. a mi con la IE 7, ya me sale bien, gracias, si veo que da problemas los pongo todos en gif y ya está, un saludo

    ResponderEliminar
  53. al cambiar los tags H3 por SPAN, me quedaba centrado, pero el texto de la entrada me la cambiaba como enlace, quité de nuevo el span y puse h3, y milagro se ve centrado con el texto que tengo en las entradas, en IE no claro, solo en firefox

    ResponderEliminar
  54. hay alguna forma que cuando liste las entradas de una etiqueta estas se muestren en orden inverso?

    ResponderEliminar
  55. No Luz. La esencia de un blog es que las entradas más recientes aparecen delante de las más antiguas. En Blogger hoy por hoy no hay posibilidad de cambiar esto.

    ResponderEliminar
  56. Hola.

    Sabes? no me funcionó. puse ell código tal como está puesto en la planilla html, y luego cree un gadget con el siguiente código. Sin embargo, no me aparece absolutamente nada, ni las imágenes ni los enlaces. ¿Qué puede estar pasando?

    Gracias!

    ResponderEliminar
  57. Debería funcionar, porque ya ves que aquí si lo hace. No obstante, hay opciones mejores, como por ejemplo la que se explica en esta entrada:
    Menús. Crea tu propio estilo

    ResponderEliminar
  58. Genial, sencillo, funciona perfectamente y encima es XHTML válido.

    Muchas gracias

    ResponderEliminar
  59. Je, je. A veces me sorprende vuestro entusiasmo.
    Un saludo

    ResponderEliminar
  60. Hola! He usado varios trucos que aquí enseñas y me funcionan perfecto!! En el menú el único inconveniente que tuve fue que no se visualizaban las imágenes de "imageshuck"... Lo que si no he encontrado por ninguna parte (y hace tiempo que busco) es algo que me permita al presionar en las etiquetas que las entradas de estas se muestren de la más antigua a las más nueva, ¿Existe algo que me lo permita? y si no es asi ¿Me recomiendas algún otro truco?
    Muchas Gracias por todo!!

    ResponderEliminar
  61. Hola Makiss. Lo de la imagen se soluciona creando tú una al gusto :) Con respecto a lo de las entradas en orden inverso, que yo sepa, no se puede hacer. Si quieres mostrarlas de otra manera, no sé si un INDICE te podría valer. Usando el buscador interno podrás encontrar varias opciones.

    ResponderEliminar
  62. Gracias Igual! Al menos ya no seguiré buscando algo que no existe xD. Probaré lo que me dices :) Si no me resulta nada...Me tendrás de nuevo por acá je,je!

    ResponderEliminar
  63. La verdad es que el blog esta muy completo y las explicaciones son exelentes.
    Quiero sacarme una duda con un problema que tengo:

    Al menu se le asigna una direccion a donde ir cuando le damos click sobre las pestañas.
    Si yo creo una entrada nueva, luego de haber ya incorporado "mi menu":

    1) como la relaciono con la pestaña correspondiente? ya que es una entrada posterior a la creacion misma del menú.
    2) En caso de que no se pueda, cuando yo quiera actualizar la entrada correspondiente a la pestaña, debería "editar" la entrada no?

    Perdón si no soy muy claro.

    Saludos.-

    ResponderEliminar
  64. Si los enlaces de tu menú los hiciste de manera manual, siempre que los actualices tendrás nuevamente que modificarlos a mano. Esta entrada es para ese tipo de enlaces, aunque tienes otra que explica un recurso online para hacer menús "estilosos".

    Si quieres un menú de categorías/etiquetas que se actualice de manera automática, deberías ver Pestañas automáticas con categorías, aunque para eso, primero deberías etiquetar todas tus entradas, porque me parece que no tienen etiquetas.

    Este es otro sistema de hacer botones automáticos y este, otro parecido con una nube.

    ResponderEliminar
  65. Excelente dato, muy claro.. gracias

    ResponderEliminar
  66. Tengo un pequeño gran y muy molesto problema con este excelente script..
    Resulta que al hacer uso de este por primera vez, lo creo en una entrada y todo funciona de maravilla, pero al editar la entrada y guardarla reslta que el script deja de funcionar y debo hacer toda la entrada de vuelta para que funcione el script.. se que es algo de "Edicion de HTML" porque al hacer click alli veo que que el codigo cambio y no se cual es el motivo.. se que me hace perder mucho tiempo!! si me pudes dar una solucion te lo agradeceria! :D

    Saludos ;)

    ResponderEliminar
  67. La solución es que lo hagas todo desde Edición de HTML y no sucumbas a la tentación de ver como queda en Redactar o Vista Previa :D

    Desconozco el por qué, pero eso ocurre a veces cuando redactas código en un post... le das a la Vista Previa y se altera el código. ¡Cosas de Blogger! No puedo darte otra contestación.

    ResponderEliminar
  68. Hola Oloman soy Probando, me gustaría Preguntar unas cositas.
    Me gustaría saber donde se tiene que poner un código (que hace que al pasar por encima del ratón cambie la imagen).... En qué lugar? Boton1 o UrldelBoton1/ ??

    Gracias ante todo y Buenisimo trabajo

    ResponderEliminar
  69. Hola Probando. En el buscador, teclea rollover y ahí lo encontrarás explicado, con más extensión de la que puedo darle aquí ;)

    ResponderEliminar
  70. Olo grax x el menú lo explicas de forma tan sencilla que hasta el más desentendido del tema aprende, una consulta que soy re noob en esto, para hacer este mismo menú pero horizontal con submenus se puede?, o aunq no sea utilizando el ver/ocultar menú como se podría hacer?

    ojala me ayudes de antemano, GRACIAS!

    ResponderEliminar
  71. Lo mejor es que te olvides de esta entrada. Es de cuando comenzaba y lo cierto es que me dan ganas de borrarla.

    Prueba a crear un menú siguiendo el enlace de esta entrada.

    El resultado es más elegante y mucho más eficaz. ;)

    ResponderEliminar
  72. como lo hago funcionar bien en una entrada? porque lo he utilizado y me funciona bien pero cuando pongo en editar entrada, luego me aparece abierto y no se expande ni contrae, solo queda abierto

    Alguna sugerencia??

    ResponderEliminar
  73. ElektroDanZ entiendo que sí funciona, pero no lo ves desde el editor. En el editor de entradas muchas veces los códigos no funcionan bien, aunque una vez publicado el post correspondiente, la cosa va perfecta. En la mayoría de casos, con el nuevo editor y Vista Previa, es suficiente para comprobar si todo va bien.

    Si tienes dudas, de si va a salir bien y no quieres publicar algo "en falso", móntalo primero en una entrada de un post de prueba.

    ResponderEliminar
  74. Hola Oloman:
    Primero de nada presentarme. Soy Javier Acebras y hago pontenova.es.
    Segundo es la 1ª vez que te escribo, pues con quien mas he compartido mis inquietudes ha sido con Rosa.
    Tambien hablo mucho con el potro de ciudad bloguer.
    Bueno, pues ahora al tema, que me pongo muy triste y esto tiene que seguir.
    Lo que nos ocupa es crear un menu con submenus para las nuevas plantillas de blogger. Yo estoy cambiando mi blog, pontenova.es para la nueva plantilla, pero me falla el menu. Los blogs que uso para probar son: http://probapontenova.blogspot.com/
    Bueno, este y alguno mas, pero nos centraremos en este.
    El caso es que el menu va bien en firefox, pero no funciona en explorer.
    He probado muchos diferentes, he eliminado cosas de la plantilla y nada. Si quieres puedes leer en ciudadblogger lo que he intentado:
    http://ciudadblogger.com/2009/09/menu-horizontal-con-efecto-deslizante.html?commentPage=3
    El caso es que estas plantillas traen estilos definidos para el menu de debajo de la cabecera como ya seguro que sabes. Yo creo que lo ideal y mas facil, seria eliminar los estilos, pero no lo consigo.
    /* Tabs es la caracteristica que controla el menu. aunque elimine todo no funciona, te hablo siempre de explorer, ya que en firefox si lo hace.
    Yo creo que el problema esta en la cabecera, que en este caso esta eliminada, pero hay un codigo en el header que hace referencia a es.
    Mas o menos en esta parte: <b:section class='tabs' id='crosscol-overflow' showaddelement='no'
    Haber si le puedes echar un vistazo y logramos configurar un menu con submenus para las nuevas plantillas en explorer. Yo creo que eliminando el estilo que trae por defecto ya tiene que funcionar.
    Pues muchas gracias. Me alegro de hablar contigo.
    No se si esto tendria que ir aqui, pero es lo mas parecido que encontré en tu blog.
    Siento mucho lo de Rosa, muchisimo.
    Un saludo.

    ResponderEliminar
  75. Pontenova cómo no andas mucho por aquí, no sabes que yo le tengo mucha manía a las plantillas del nuevo diseñador y el motivo principal es que estoy convencido de que no aportan más que incomodidades para aquellos que nos gusta hacer cambios en las plantillas estándar. Sólo vienen bien a quién quiere una interface fácil para construir un blog y no necesita salirse de lo que ofrece ese sistema. Valga tu caso como ejemplo.

    Aún así, es muy posible que no sea culpa de Blogger, sino de IE, ya que algunas propiedades de este navegador no se interpretan como deberían. Esto pasa mucho precisamente con los menús, ya que algunos requieren de pequeños hacks o excepciones hechas en el código para este navegador (también puñetero, por cierto).

    No es el caso del que explica El Potro, porque ese funciona bien en todos los navegadores, pero el tuyo no hace el mismo efecto y me parece que lo has construído de otra manera ¿no?

    En primer lugar, se me ocurre que pruebes a bajar o subir el gadget que contiene todo el código del menú, desde Elementos de Página, para sacarlo del Crosscol a ver si así funciona sin afectarle ese estilo que comentas. Si sigue igual, probablemente sea lo que comento del navegador. Entonces deberías probar con el código de Ciudad Blogger.

    Por último, puedes también probar con esta página cuyos códigos están muy bien construídos para todos los navegadores y que incluye la opción de "subniveles" en los distintos elementos del menú: Enlace

    Nota: No es que me quiera escaquear. Es que ni sé ni quiero saber cómo meterle mano a las nuevas plantillas

    ResponderEliminar
  76. Hola, Muy buen post.. es lo que estava buscando y la verdad la solucion es bastante simple de implementar, lo que si la explicacion y el codigo no se entienden bien al principio.. jejej y hay q pegarle una segunda leida :P..

    ResponderEliminar
  77. Es que hace tres años estaba muy pegado con esto y no me salía muy bien explicarlo, Wyrven no L2Radamanthys :D

    ResponderEliminar
  78. una pregunta, ese script se puede utilizar solo para ponerlo sin imagen?
    como el que tu pusiste abajo de la entrada, el que dice: [Ver/Ocultar Código]
    quisiera saber como puedo poner uno así, te lo agradece mucho :D
    ¡saludos!

    ResponderEliminar
    Respuestas
    1. Perfectamente. Sólo tienes que cambiar la imagen por un texto. El primer y segundo trozo son realmente los interesantes de este post, porque el menú es una patata :S

      Eliminar
  79. mm.. por alguna razón no me salio T-T)

    ResponderEliminar
    Respuestas
    1. Aquí tienes la explicación concreta de los elementos desplegables o para mostrar/esconder cosas: http://www.oloblogger.com/2008/02/en-cualquier-parte-de-la-pgina.html

      Eliminar
  80. Hola, ando usando el cogido, pero a la hora de que le doy click para que el menú se despliegue el la opción siguiente no se mueve, queda sobre puesto, como se puede hacer para que avance y se acomode de acuerdo a largo de la primera opción del menú.

    ResponderEliminar
    Respuestas
    1. Jose Ricardo, este post es muy antiguo, de cuando empezaba y era más torpe que nadie. Prueba con este otro mejor: http://www.oloblogger.com/2012/08/menu-dropdown-codigo-basico.html

      Eliminar