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 == "ver_menu"){
menu.className = "ocultar_menu";
}
else{ menu.className = "ver_menu"; } }
</script>
.ver_menu { display:block; }
.ocultar_menu { display:none; }
</style>
<script type='text/JavaScript'>
function desplegar(categoria){
var menu = document.getElementById(categoria);
if(menu.className == "ver_menu"){
menu.className = "ocultar_menu";
}
else{ menu.className = "ver_menu"; } }
</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>
<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:
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.
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.
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.
Y muchos más artículos interesantes si nos sigues en...
bueno, este esta mejor que el post que te pedi anteriormente, lo voy a intentar a ver que tal me va, jajaja, saludos
ResponderEliminarLo conseguí, y mi blog cada vez tiene un aspecto mejor. Muchas gracias.
ResponderEliminarUn pequeño homenaje:
http://kikelincaricaturas.blogspot.com/2007/01/premio-dardo.html
Maricon mentiroso esa caca no funciona estafador de mierda,
ResponderEliminaral clikear sobre las imagenes no se despliega nada, en el que muestras si.
Estas ocultando algo parece jajajaja!!
no te pases forest
Eliminarcaballo regalado no se le ve el diente
Botón derecho --> Ver código fuente --> Comprobar código utilizado
ResponderEliminarbueno 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"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
ResponderEliminarMuy 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.
ResponderEliminarGracias ;-)
Yo tengo un pequeño problema con esto..
ResponderEliminarMe 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.
Conan, si has aplicado bien todo el código, no debería pasar eso.
ResponderEliminarHola 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.
ResponderEliminarKeko, 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í.
ResponderEliminarCopia 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.
Buenas, escribo por primera vez y por tanto un saludo Oloman.
ResponderEliminarTengo 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
Priamo, he tardado un poco en contestar y ya veo que lo tienes solucionado.
ResponderEliminarEste 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.
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.
ResponderEliminarDe nuevo gracias por tu trabajo.Un saludo
hola oloman
ResponderEliminarestoy 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
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.
ResponderEliminarhola de nuevo
ResponderEliminarpues creo ke lo tengo bien pero no me va, sino te importa echarle un vistazo, yo te lo envio por email.
gracias , un saludo
hola
ResponderEliminarya lo tengo solucionado;
gracias por todo
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
ResponderEliminarmarcelo jinformatica@infovia.com.ar
Marcelo, no entiendo muy bien lo que quieres, pero a ver si es esto:
ResponderEliminarhttp://oloblogger.blogspot.com/2008/05/menu-vertical-desplegable.html
hola, gracias por el consejo anterior, estoy experimentando con el mismo.
ResponderEliminarSe 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.
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.
ResponderEliminarhe 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
ResponderEliminaren vez de ese +/- puedo poner un gif que tengo en mi picasa?, como lo haria?, gracias por tu ayuda, un saludo
ResponderEliminarHola luz. En tu código hay una parte que forma una tabla con TABLE, TR, TD. La primera celda está así: td width="40px"
ResponderEliminarSe 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.
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
ResponderEliminarya he podido hacerlo mas pequeño, lo único que me falta es quitar el borde de la imagen
ResponderEliminarLuz, la estupenda eres tú, que ya vas encontrando soluciones antes de que conteste ;)
ResponderEliminarPara 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;' >
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.
ResponderEliminarsi 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
¿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 :)
ResponderEliminarPor 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.
ya lo he hecho creo que queda bien, he sustituido el segundo código que das en el data:post.body de
ResponderEliminardiv 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
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
ResponderEliminarya lo he encontrado he puesto el valign="middle"
ResponderEliminaraqui
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td valing='midle' width='40px'>
<a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' 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
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.
ResponderEliminarno mira lo que hice fué intentar que las imagenes de los comentarios me quedaran dentro del recuadro y puse el siguiente código
ResponderEliminar<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
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.
ResponderEliminarrespondiendo a tu pregunta la arroba me sale mas abajo que el texto, ¿donde pongo el heigth?, ay estoy perdidísima
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.
ResponderEliminarya encontré los dos td, uno en
ResponderEliminar<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='"resumen-" + data:post.id'/> ...
y nada y poniendo valing='midle' width='30px' despues de los dos td tampoco
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.
ResponderEliminarEcha un vistazo a algún artículo sobre cómo construir tablas, que te puede ser útil para esta y para otra ocasión.
podría ser aquí
ResponderEliminar<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='"resumen-" + data:post.id'/> </td> <td class='celdaderecha'> <span class='lafecha-resumen' expr:id='"fecha-" + data:post.id'> <script type='text/javascript'>calendario('<data:post.timestamp/>');</script> </span> </td> </tr> <tr> <td class='celdaspan'> <a class='toggleresumenpost' expr:onclick='"toggleResumenPost(\"" + data:post.id + "\")"' href='javascript:void(0);'>[+/-]</a> </td> </tr> </tbody></table> <div class='post-oculto' expr:id='"dummy-" + data:post.id'> <div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> </div> </div> <script type='text/javascript'>resumenPost('<data:post.id/>');</script></b:includable></b:includable>
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:
ResponderEliminarhttp://lh3.ggpht.com/_vzR5XFm52h8/St3rrPHtVxI/AAAAAAAACic/CPqYFL8hfYQ/arroba.gif
el único codigo donde se encuentra la imagen es en este trozo
ResponderEliminar<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td valing='midle' width='30px'>
<a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' 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>
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
ResponderEliminarEse 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;'
ResponderEliminarlo pongo de esta manera, y nada sigue igual
ResponderEliminar<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td STYLE='LINE-HEIGHT:30PX;' valing='middle'>
<a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' 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>
Has vuelto a poner VALING. Es con la n y la g cambiadas: VALIGN
ResponderEliminarDios cuando una no tiene la cabeza bien, pues pasa lo que pasa, perdona el despiste, ahora ya lo corregí, lo he puesto así:
ResponderEliminar<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td STYLE='LINE-HEIGHT:30PX;' valign='middle'>
<a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' 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
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.
ResponderEliminarLo 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.
eres un genio, ahora si, sale estupendo muchas gracias
ResponderEliminarbueno IE ahora de repente ya no me pone el fondo de la imagen, asi que tambien solucionado, un saludo y muchiiiisimas gracias
ResponderEliminarOjo con IE Luz. La versión 8 creo que ya no da problemas con las transparencias PNG, pero los anteriores sí.
ResponderEliminara 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
ResponderEliminaral 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
ResponderEliminarhay alguna forma que cuando liste las entradas de una etiqueta estas se muestren en orden inverso?
ResponderEliminarNo 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.
ResponderEliminargracias, un saludo
ResponderEliminarHola.
ResponderEliminarSabes? 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!
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:
ResponderEliminarMenús. Crea tu propio estilo
Genial, sencillo, funciona perfectamente y encima es XHTML válido.
ResponderEliminarMuchas gracias
Je, je. A veces me sorprende vuestro entusiasmo.
ResponderEliminarUn saludo
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?
ResponderEliminarMuchas Gracias por todo!!
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.
ResponderEliminarGracias 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!
ResponderEliminarLa verdad es que el blog esta muy completo y las explicaciones son exelentes.
ResponderEliminarQuiero 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.-
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".
ResponderEliminarSi 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.
Excelente dato, muy claro.. gracias
ResponderEliminarTengo un pequeño gran y muy molesto problema con este excelente script..
ResponderEliminarResulta 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 ;)
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
ResponderEliminarDesconozco 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.
Hola Oloman soy Probando, me gustaría Preguntar unas cositas.
ResponderEliminarMe 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
Hola Probando. En el buscador, teclea rollover y ahí lo encontrarás explicado, con más extensión de la que puedo darle aquí ;)
ResponderEliminarOlo 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?
ResponderEliminarojala me ayudes de antemano, GRACIAS!
Lo mejor es que te olvides de esta entrada. Es de cuando comenzaba y lo cierto es que me dan ganas de borrarla.
ResponderEliminarPrueba a crear un menú siguiendo el enlace de esta entrada.
El resultado es más elegante y mucho más eficaz. ;)
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
ResponderEliminarAlguna sugerencia??
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.
ResponderEliminarSi 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.
Hola Oloman:
ResponderEliminarPrimero 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.
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.
ResponderEliminarAú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
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..
ResponderEliminarEs que hace tres años estaba muy pegado con esto y no me salía muy bien explicarlo, Wyrven no L2Radamanthys :D
ResponderEliminaruna pregunta, ese script se puede utilizar solo para ponerlo sin imagen?
ResponderEliminarcomo 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!
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
Eliminarmm.. por alguna razón no me salio T-T)
ResponderEliminarAquí 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
EliminarHola, 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ú.
ResponderEliminarJose 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