Menú vertical desplegable con jQuery

6 de marzo de 2011 153 comentarios ,
Este es un sencillo pero práctico menú vertical hecho con jQuery y CSS. Tiene un efecto deslizante que aunque su función no es enlazar a alguna página o sección de blog puede usarse para mostrar contenido dentro de él y así ahorrarnos un poco de espacio en el blog.



Para agregarlo a tu blog entra en Diseño | Edición de HTML y antes de </head> pega esto:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.toggle_container&quot;).hide();
$(&quot;h2.togglemenu&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
return false;
});
});
</script>
Ahora antes de ]]></b:skin> pega lo siguiente:
h2.togglemenu {
padding: 0 0 0 30px;
margin: 0 0 5px 0;
background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"
border: 1px solid #2E2E2E;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
height: 45px;
line-height: 45px;
width: 350px; /* Ancho de la pestaña */
text-transform:none !important;
font-size: 2em;
font-weight: 900;
font-family: Florence, cursive; /* Tipo de letra */
float:left;
}
h2.togglemenu a {
padding-left:40px;
background:url(https://lh6.googleusercontent.com/_dsEG33PDaHw/TXKKaRGOqrI/AAAAAAAABG4/nXF4folFnZY/plus_icon.png)no-repeat left center;
color: #fff; /* Color de los títulos */
text-decoration: none;
display: block;
}
h2.togglemenu a:hover {color: #ccc;} /* Color del título al pasar el cursor */
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border: 1px solid #d6d6d6;
background: #f0f0f0; /* Color del contenedor */
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
overflow: hidden;
font-size: 1.2em;
width: 380px; /* Ancho del contenedor */
clear: both;
}
.toggle_container .block {
padding: 20px;
}
Y por último en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript agrega esto:
<h2 class="togglemenu">
<a href="#">Pestaña 1</a></h2>
<div class="toggle_container">
<!-- Aquí va el contenido -->
<!-- Aquí va el contenido -->
</div>
</div>


<h2 class="togglemenu">
<a href="#">Pestaña 2</a></h2>
<div class="toggle_container">
<div class="block">
<!-- Aquí va el contenido -->
</div>
</div>


<h2 class="togglemenu">
<a href="#">Pestaña 3</a></h2>
<div class="toggle_container">
<div class="block">
<!-- Aquí va el contenido -->
</div>
</div>
Ya sólo agrega el contenido que pondrás en tu menú donde se indica en color rojo. Todo lo que agregues ahí es lo que estará oculto y que se mostrará al expandir el menú.
En color verde están las áreas que podemos personalizar. En el caso del color de fondo de las pestañas se cambian en esta parte:
background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"
Es un color de fondo gradiente, el #AAAAAA es el color de arriba y el #000000 es el color de abajo.

Si quisieras agregar otra pestaña sólo añade otro código como este:
<h2 class="togglemenu">
<a href="#">Pestaña 4</a></h2>
<div class="toggle_container">
<div class="block">
<!-- Aquí va el contenido -->
</div>
</div>
Y así de sencillo podemos tener un menú simple, elegante y en el cual podremos meter todo aquello que queramos tener más organizado.


153 comentarios en:

" Menú vertical desplegable con jQuery "

  1. wahaja Excelente potro

    me quede todo el rato jugando el juego ese que pusiste ahajja, saludos y muchas gracias por este menú

    ResponderEliminar
  2. Jajaja, me pasa lo mismo cuando entro a un blog y tiene un juego ¿Al menos ganaste?

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. disculpa yo quiero hacer este menu pero no se donde esta ese codigo ]]> es que estoy aprendiendo en donde pegar los codigos, por fa ayudame plis

      Eliminar
    3. Usa las teclas CTRL + F, así te será más fácil encontrar los códigos.

      Eliminar
  3. hola Potro, gracias por el aporte, hay forma de verlo instalado en algún sitio?

    ResponderEliminar
  4. Estamos iguales MCarlitooH2 Yo no leí nada por estar jugando ese jueguito de X O jajaja! Buena Potro!

    ResponderEliminar
  5. MaG@S RaDioMuSiC, lo tengo en un blog de pruebas pero como está preparado para otra entrada que aún no publico no lo mostré ahí, así que lo puse en esta misma entrada para que lo pudieran ver en acción ;)

    ResponderEliminar
  6. Dios mío, para mí todo esto es muy complicado, pero me encanta verlo, ver cómo se puede hacer..ah, y lo del juego me gusta mucho, :D.
    ¡muchas gracias, potro!

    ResponderEliminar
  7. Creo que habrá que poner una sección de juegos, al menos para desestresarnos un poco después de ver tantos códigos :)

    Gracias por pasar Sofía!

    ResponderEliminar
  8. buenisimo... ahora lo practico en uno de mis blogsa de pruebas tambein a ver como queda y donde podria ir bien..

    Aunque no termine en mi blog oficial me encanta practicar cada truquito para ira aclarandole tus tips a esta cabezota xD...

    Gracias de nuevo Potro Salu2.

    ResponderEliminar
  9. alaaaaaa que bobo Potro, okey, muchas gracias y disculpa jajaja estoy hoy en las nubes aisss!!! un abrazo estimado

    ResponderEliminar
  10. Θdiŋ-k0, al menos te servirá de práctica, si un día te decides ponerlo ya sabrás manejarlo al 100 :)

    MaG@S RaDioMuSiC, es domingo así que es comprensible que todos andemos por las nubes :D

    ResponderEliminar
  11. Esta espectacular!. Me encanta!. Saludos Potro :D

    ResponderEliminar
  12. Qué bueno que les ha gustado. ¡Saludos!

    ResponderEliminar
  13. La verdad, todos estos códigos me parecen mágicos (a golpe de muchísimos errores voy entendiendo algo), pero mi comentario es para El Potro y la gran ayuda que le ha prestado a Viena (Sabores de Viena) y, de rebote, a todos los que seguimos su blog. Gracias Potro.

    ResponderEliminar
  14. Una cosa i se me gusta un menu de una web puedo mostrartilo para ver si puedes consigerme ese menu ?

    ResponderEliminar
  15. Ey potro esta rebueno este menu una pregunta.

    Para ponerlo en una pagina web que no sea blogger cambio los "$(&quot" por comillas oque

    ResponderEliminar
  16. Don Potro ;) excelente! muy buena idea para las etiquetas...bien explicado, pipí cucú -expresión cordobesa que dice algo así como 'perfecto'- jajaja

    Besos!

    ResponderEliminar
  17. ¡Qué pasada! Ya tengo algo que poner si más tarde pongo una sección más, ¡lo coloco seguro! Potro, está de muerte :)

    ResponderEliminar
  18. El Oteador de los Mercados, estoy seguro que Viena es muy afortunada al tener tantos amigos como ustedes que la quieren mucho. ¡Bienvenido a Ciudad Blogger y gracias por tu visita!

    ResponderEliminar
  19. XikaAnime, depende de cómo esté hecho el menú, si gustas puedes mostrármelo y lo agrego dentro de los posts pendientes sólo que tardaría un poquitín porque aun tengo varias entradas que me han solicitado y no he terminado de sacar.

    ResponderEliminar
  20. Sergio Molina, sí, si se trata de una página Web entonces los &quot; se cambian por comillas dobles, y los &#039; por comillas simples.

    ResponderEliminar
  21. Graciela, me encantó esa expresión, la anotaré y ya veré cómo aprovecho la ocasión para usarla cuando charle con la familia, jaja :D

    ResponderEliminar
  22. We Game / Emilio, ¿verdad que sí? A mí igual me ha gustado :)

    ResponderEliminar
  23. nEjO, yo tuve suerte ayer pero hoy parece que sigo dormido porque sólo he podido ganarle una vez. A ver al rato cómo me va ya que esté más despierto :D

    ResponderEliminar
  24. Hola potro desviandome del tema tengo una duda de otra cosa entra a curiosidades del mundo http://curiosidadesofworld.blogspot.com/ y veras que tengo las entradas con imagen pero publique hoy y una entrada no respeto y se ve mal que puedo hacer espero me puedas ayudar GRACIAS

    ResponderEliminar
  25. Potro paso algo con los Seguidores, por lo menos yo no los veo en ningún blog :S

    ResponderEliminar
  26. potro perdon la molestia pero queria consultarte como haces para dividir los gadget con una linea horizontal en la columna derecha? un saludo

    ResponderEliminar
  27. AlexG, lo que sucede es que desde la autopaginación Blogger decide cuántas entradas se muestran en el blog; esto va en relación a la velocidad de carga de tu blog, si Blogger siente que es un poco lento entonces mostrará menos entradas. Quizá necesites aligerar un poco el blog para que puedas mostrar mayor número de entradas.

    ResponderEliminar
  28. Pozo+10™, ¿de casualidad comenzaste a usar Scriptaculous?

    ResponderEliminar
  29. Javier Quiles, podría explicártelo para las plantillas clásicas pero para las plantillas hechas con el Diseñador de plantillas de Blogger no tengo idea :/

    ResponderEliminar
  30. Potro Hay logre ponerlas pero se sobrepasan los bordes.. lo hice con hr width="200" align="left" , y le pondo left, center, right y sigue igual... que podria hacer?.Fijate!

    ResponderEliminar
  31. Si Potro lo uso, pero ya tengo esa solución en mi blog, lo que me paso hace unas horas fue que acá y en todos los blogs no se veían los seguidores, pero en mi blog si, la verdad ni idea que sería.

    ResponderEliminar
  32. Hola Potro. Disculpame que haga un comentario que no se relaciona con esta publicación pero sí con el contenido del blog.
    Quisiera poner en un blog el sistema de comentarios para que dejen mensaje solamente usuarios de Facebook. Busque tutoriales y logre instalarlo pero en la pagina principal no aparece la cantidad de comentarios dejados, ni tampoco el link a los comentarios. Solamente cuando se hace un click en el titulo de la entrada aparece el formulario para dejar mensajes.

    La idea es que funcione igual que el sistema de blogger. Con el numerito de los comentarios en la pantalla inicial del blog y que al hacer click sobre el vaya abajo de todo de la entrada donde se encuentra el formulario.

    Si esto lo has explicado en alguna ocasion te agradeceria si me lo puedes recordar. En caso contrario seria un post muy interesante para que puedas publicarlo.

    Saludos.

    ResponderEliminar
  33. Hola Potro.
    Quería saber como poder poner emoticonos en los comentarios, pero que sean unos que elija yo, no como esos de El Escaparate.

    Gracias :D

    ResponderEliminar
  34. Javier Quiles, pues si lo que se sobrepasa es el ancho del borde entonces reduce el borde, en lugar de width="200" pon un valor más bajo.

    ResponderEliminar
  35. Pozo+10™, supongo que era un problema temporal pues al menos ahora acabo de entrar a tu blog y se ven los seguidores.

    ResponderEliminar
  36. Hola Luvodico Rey

    No creo que eso sea posible. Si bien puedes agregar en tu blog el plugin de comentarios de Facebook no puedes vincularlo con el sistema de Blogger porque justamente es un sistema aparte.
    No es como otro gestor de comentarios (Disqus por ejemplo) que está diseñado para ese fin.
    Por el momento no veo la posibilidad de que se pueda hacer algo como lo que mencionas, a menos que esté equivocado.

    Saludos.

    ResponderEliminar
  37. Marina, puedes usar los del Escaparate o algún otro y sólo les cambias las imágenes por las que quieres.

    ResponderEliminar
  38. Hola Potro, Quisiera q porfavor me ayudaras se que lo q te voy a preguntar no tiene nada q ver con este truco o tema, bueno mi pregunta es la siguiente ¿Como se cambia el nombre de mi blog en Google? por ejemplo al escribir en google el nombre de mi blog x ejemplo CiudadBlogger en google el titulo me aparece solo asi "Ciudad Blogger" y muchas personas lo cambian me gustaria que me dijeras como lo puedo cambiar a un nombre q yo quiera.

    Aki una imagen que muestra a lo que me refiero:
    http://dl.dropbox.com/u/8944635/Como%20se%20hace%20esto%20CiudadBlogger.jpg

    ResponderEliminar
  39. Hola ๖ۣۜÇΣZΛЯۣ™ (ÇΣZΛЯۣ JΣЯICHO),

    El nombre de tu blog se cambia entrando en Configuración > Básico, y donde dice 'Título' se cambia el nombre del blog. Ese es el nombre que aparecerá en los buscadores.

    Los enlaces que mencionas no los agrego yo, esos los agrega Google automáticamente, se llaman Enlaces de sitio y es Google quien decide qué sitios los tendrá así como decide cuáles serán estos enlaces que se mostrarán. No hay algo que nosotros podamos hacer al respecto.

    Saludos.

    ResponderEliminar
  40. Muchisimas Gracias Potro, gracias por tomarte tiempo en responder, muchas gracias de verdad eres el mejor!!!

    ResponderEliminar
  41. Hola te queria pedir si me puedes diseñar mi blog
    mi msn es:
    thegranuzumakinaruto@hotmail.com
    si tienes tiempo me avisas por mi msn

    ResponderEliminar
  42. hola >_< un saludo hehehe, ehm no sabia donde escribir esto O.O pero bueno si no es mucha molestia, cuando puedas podrias poner un tutorial para colocar esta galeria en el blog http://imageflow.finnrudolph.de/

    bueno, no sé si se pueda en blogger >_< pero me gustó mucho como se ve.

    saludos otra vez n.n

    ResponderEliminar
  43. primero ese gato me esteba dando una de aquellas, marcador final??
    74-36
    gane (H)

    saludos

    ResponderEliminar
  44. SenninX, lo siento pero no me dedico a eso.

    Miki-kun, parece que sí se puede en Blogger, deja estos días le echo un ojo y si todo sale bien lo publico ;)

    Carlos Ledezma - Administrador, jajajaja ¿74-36? vaya que te has distraído un rato con el juego :D

    ResponderEliminar
  45. Gracias Potro, es que yo no me manejo bien con esto de los javascript xD

    ResponderEliminar
  46. esta es la web http://animeid.com me gusta los dos menus que estan ariba de todo i el que esta en la parte de derecha i es el de abajo el ultimo
    porfa ci puedes casarlos te estare muy agredecido i gracias de todas frmas

    ResponderEliminar
  47. Potro entonces me dices como se hace para poner las lineas separadoras para las plantillas clasicas?

    ResponderEliminar
  48. En las clásicas sólo busca esta línea y agrega lo que está en negrita:

    .sidebar .widget, .main .widget {
    border-bottom:1px solid #000;

    ResponderEliminar
  49. potro no puedo conseguir que ocupe todo el ancho de la sidebar, y si le pongo mas ancho de un lado se me sobre pasa y del otro me queda un espacio vacio..

    ResponderEliminar
  50. Hola Javier,

    ¿Te refieres a la separación entre gadgets?
    ¿En cuál blog lo has puesto?

    ResponderEliminar
  51. si a la separacion entre los gadget, hay lo puse en en blog de poker para que lo veas

    ResponderEliminar
  52. Sí ocupa todo el ancho lo que sucede es que no todo lo que ves es justo el ancho de la sidebar. Recuerda que todos los elementos en la plantilla tienen una separación entre ellos. Eso que ves que no se alcanza a cubrir es la separación entre todo el contendor del blog y el contenedor de las entradas.
    Sin embargo puedes hacer unos ajustes para que esa línea se extienda:

    <hr style="width:160%; margin-left:-40px;"/>

    ResponderEliminar
  53. Sos un maestrooooooo! muchasss gracias, disculpa las molestias, te lo agradezco y te enlazo a mi blog, no es la gran cosa pero algo es algo je.. un saludo!

    ResponderEliminar
  54. Siempre que sea un enlace de corazón para mi es la gran cosa :)
    Gracias!

    ResponderEliminar
  55. perdon pero necesito saber porfavor como localizar #sidebar-wrapper #main-wrapper #outer-wrapper #header-wrapper en la plantilla sencilla que te da blogger.. un saludo!

    ResponderEliminar
  56. Las plantillas del Diseñador no tienen esos contenedores ni esos nombres. Aún no las conozco muy bien así que te la deberé esta vez :/

    ResponderEliminar
  57. aaa, porque queria saber como separar las columnas y como ponerle borde al blog si le das una mirada al mio tiene las columnas juntas y no tiene borde, no se si me podrias ayudar.. un abrazo

    ResponderEliminar
  58. En esas plantillas no se pueden hacer todas las modificaciones que se le podrían hacer a otras plantillas basadas en las clásicas. La mayoría de las modificaciones posibles se hacen desde el Diseñador de plantillas, fuera de ahí es poco lo que se les puede hacer :/

    ResponderEliminar
  59. Potro con respecto a lo que te pregunte mas arriba mi blog tiene un nombre en el titulo pero en Google solo aparece el nombre de mi blog en el titulo y no aparece lo que yo le puse en mi blog

    x ejemplo mi blog se llama Ciudad Blogger y en el titulo tengo Ciudad Blogger trucos y tutoriales para tu blog, pero en google no me aparece ese nombre solo me aparece "Ciudad Blogger" y no es lo que puse en el titulo de mi blog

    Me podrias ayudar por favor?

    ResponderEliminar
  60. Hola ๖ۣۜÇΣZΛЯۣ™,

    Si apenas hiciste el cambio necesitas que Google indexe de nuevo tu blog para que pueda mostrar el cambio. La mayoría de las veces puedes acelerar ese proceso redactando algunas nuevas entradas para que Google regrese e indexe de nuevo tu blog.

    Ahora, lo de 'Trucos y tutoriales para tu blog' es la descripción del blog, esa también se modifica en donde te comenté antes. Si tu blog no tienen ninguna descripción no la mostrará.

    También se recomienda que el blog tenga sus debidos meta tags.

    Saludos.

    ResponderEliminar
  61. potro cambie la plantilla de blogger por una minima y no logro agrandar el ancho del blog por mas que cambie el widht de #outer, sidebar, main y todo queda siempre igual.. que estoy haciendo mal?

    ResponderEliminar
  62. Pues no parece haber nada mal, ¿a cuánto quieres ensancharlo? He entrado a tu blog y veo que ya lo tienes a un ancho de 1000px

    ResponderEliminar
  63. sii ya lo arregle jeje gracias de todas formas.. pero como hago para poner una imagen de fondo pero que no se vea en el outer-wrapper sino solamente a los costados.. como tu que tienes un color gris a los costados y un blanco en el outer..

    ResponderEliminar
  64. Cambia el color de fondo que hay dentro de body { con eso se verá otro color en los lados.

    ResponderEliminar
  65. Gracias potro buen aporte pero necesito un menu vertical como el de esta web www.ichianime.com aquellos menus donde dice (listado de animes o listado de mangas) esos asi desplegables.
    Gracias

    ResponderEliminar
  66. Hola Jorge Luis,

    No los veo desplegables, pero igual puedes hacerlo con el gadget de Lista de enlaces y luego les puedes poner un icono como se indica en esta entrada:
    http://ciudadblogger.com/2009/06/poner-iconos-en-etiquetas-y-otros.html

    Saludos.

    ResponderEliminar
  67. gracias por responder potro pero no son desplegables no supe describir es decir son aquellos que se puede bajar tu yalos vistes es que no tengo el nombre de ese menu y me es muy necesario.

    ResponderEliminar
  68. Es del mismo modo que te he dicho; una vez que lo pongas identifica si ID y agrega esto antes de ]]></b:skin>

    #ID {height:200px; overflow:auto;}

    En donde dice ID lo cambias por el ID de tu gadget, por ejemplo LinkList1

    ResponderEliminar
  69. hola potro te pide algo esta en el comenterio 49 al final no has podido consigerlo ??

    ResponderEliminar
  70. Nop, te respondí hace unos días en esta entrada:
    http://ciudadblogger.com/2011/03/menu-horizontal-deslizante-con.html

    ResponderEliminar
  71. Potro puedo usarlo para una entrada en una Pagina en blog ?

    ResponderEliminar
  72. Sí, de hecho el que tengo de ejemplo está puesto en la entrada, así que debe funcionarte igual en una página estática del blog.

    ResponderEliminar
  73. Si pero cual seria el procedimiento? quiero cambiarlo y poner otras cosas,espero tu ayuda :)

    ResponderEliminar
  74. Es el mismo procedimiento sólo que el código que iría en un elemento HTML/Javascript lo pondrías dentro de la entrada.

    ResponderEliminar
  75. Gracias potro, lo pude hacer :)
    como dices que no se puede poner enlaces.
    Existe otro parecido? , pero que se pueda poner url de mis paginas del blog?

    ResponderEliminar
  76. No es que no se puedan poner enlaces, en ese espacio tú puedes poner lo que quieres, incluso enlaces, lo que pasa es que no es un menú tradicional.
    Más adelante publicaré otro parecido que es exclusivo para agregar enlaces.

    ResponderEliminar
  77. hola potro!
    Mira estoy intentando colocar links dentro de este menu, que al desplegarse se pueda hacer click en el texto, etcetera...
    veo que en el tuyo colocaste imagenes en ves de texto, pero a mi no me esta funcionando =s
    Me aparece el cursos para editar texto (aunque no se pueda)
    Fijate porfabor
    www.animestealer.com
    te lo agradesco =)

    ResponderEliminar
  78. Hola Nehuy,

    En el código te están faltando dos cosas, una es una letra H antes de ref= y otra es encerrar entre comillas la URL. Lo tienes de esta forma:
    <a ref=http://www.animestealer.com/search/label/yu-gi-oh%20zexal>Yu-Gi-Oh! Zexal</a>

    Y debe ser así:
    <a href="http://www.animestealer.com/search/label/yu-gi-oh%20zexal">Yu-Gi-Oh! Zexal</a>

    ResponderEliminar
  79. Hola Potrillo, primero GRACIAS TOTALES!! por tanta ayuda... ahora te consulto porque lo intente solito y no pude lograrlo... lo que quiero es que en vez de que sea el degrade de fondo mas las letras, sea una imagen la que vaya ahi en los titulos. y que al hacer clic en esa imagen se deslice tal cual lo hace asi como esta ahora... porque imagen?, porque en cada navegador se ve diferente tanto el color como las letras y queda bien feo!... asi que si me ayudas te lo agradeceria... obviamente para que sea util para todos, podrias simplemente EXTENDER el post... para que en vez de poner letras se pueda poner imagen. ESPERO ME HAYAS ENTENDIDO... UN ABRAZO GIGANTE POTRAZO!.

    ResponderEliminar
  80. esta es mi web para que lo veas funcionando. (olvide ponerla en el mensaje enterior.)

    rmmusica.com.ar

    ResponderEliminar
  81. Hola RM Musica,

    De hecho el original era una imagen degradada sólo que yo lo modifiqué con CSS para que todos pudieran personalizarlo con el color que más les fuera conveniente.
    Sólo es cuestión de eliminar esta parte:

    background-image: -moz-linear-gradient(#AAAAAA, #000000);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"

    Y cambialo por esto:
    background: url(URL de la imagen) no-repeat;

    Con eso será mas que suficiente ;)

    Saludos y otro abrazo para ti!

    ResponderEliminar
  82. 22 - 11 Primera Vez que le gano a la Maquina..!

    ResponderEliminar
  83. Jajaja, ni me hubieras recordado del juego, cada vez que entro a este post me quedo 15 minutos jugando, pero no, no tengo tanta suerte como la has tenido tú :D

    ResponderEliminar
  84. hola, oye modifique el menu para que se viera mas o menos como tengo la plantilla. El problema es que cuando abro las pestañas se ve como una curba arriba que no pude quitar y pienso que talvez sea del java.
    http://mierdajk.blogspot.com/

    ResponderEliminar
  85. Busca esta parte de tu plantilla y elimina lo que está en negrita:

    .main-inner .widget h2 + div, .footer-inner .widget h2 + div {
    border-top: $(title.separator.border.size) solid $(widget.border.color);
    padding-top: $(widget.padding.top);
    }

    Por cierto que arriba de tu plantilla se ve este texto:
    /*menu vertical jqueri */

    Sólo buscalo y elimínalo para que ya no salga.

    ResponderEliminar
  86. Wena gracias... eres casi magico jajajaaa...
    ahora si que lo arreglo mas y añado a mi blog...

    Dejame felicitarte y agredecerte por toda la informacion que tienes en este blog, de verdad me ha sido muy util.

    Gracias!

    ResponderEliminar
  87. Gracias Alcion, qué bueno que ya ha quedado como querías :)

    ResponderEliminar
  88. En la entrada se indica en color rojo dónde se agrega el contenido que quieras mostrar.

    ResponderEliminar
  89. Hola Potro, podria cambiar en este truco el tamaño de la letra (de las pestañas), y la figura de cruz color azul?

    Muchas gracias...

    ResponderEliminar
  90. Hola Leonardh.,

    En el segundo código que se agrega busca esta parte:
    font-size: 2em;

    Ese es el tamaño de la fuente que puedes cambiar por otro valor más alto.
    Un poco más abajo verás la URL de una imagen, esa es la imagen del signo de más, por lo que si deseas ponerlo más grande necesitarás colocar una imagen a la medida que deseas.

    Buen fin de semana!

    ResponderEliminar
  91. Queda de Lujo el menu jajaja,
    Saludos y porsupuesto tambien te deseo tengas un excelente Domingo. Bye...!

    ResponderEliminar
  92. Que tal Potro, oye para poner un Menu adicional cuales codigos repito,lo que quiero es personalizar 1 o 2 mas, para que queden distintos en cuanto colores y todo eso.

    Se que simplemente podria añadirlos en :

    Diseño | Elementos de la página | Añadir gadget | HTML/Javascript

    Pero lo que yo quiero es comenzar 1 o quiza 2 mas distintos y agregar otro tipo de personalizacion.

    gracias.

    ResponderEliminar
  93. Supongo que debes repetir todos los códigos menos esta línea:
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

    Luego, en los códigos que has repetido cambiar todos los toggle_container que encuentres (en todos los códigos que has añadido nuevamente) por:
    toggle_container1

    Lo mismo para h2.togglemenu cambiarlo por h2.togglemenu1

    ResponderEliminar
  94. Ya he podido realizar el nuevo menu, gracias por tu respuesta....!

    ResponderEliminar
  95. POTRO : Quisiera saber como puedo hacer para que no se interponga con otro el slider. Ya que funciona uno y el otro se detiene.

    ResponderEliminar
  96. Depende cuál sea el otro slider que tienes, si también usa jQuery quizá sólo baste con eliminar uno de los scripts de jQuery. Sino funciona entonces puede ser probable que no sea compatible con el otro script que usa el slider, o que el slider en cuestión no se lleva con jQuery. Pero sin saber cuál es es imposible adivinar...

    ResponderEliminar
  97. hola....genial post....de curioso podrias mandarme el codigo que utilizas en la parte de plantillas para mostrar esas imagenes que deriban a una pagina...

    mi email es: animusanimax_blogs@hotmail.com

    si puedes gracias desde ya XD
    saludos

    ResponderEliminar
  98. Es una tabla HTML, en una celda puse una imagen y en la celda de junto otra.
    Saludos.

    ResponderEliminar
  99. :) oks gracias...soy nuevo en esto y sin saber jejej me mando igual pero de apoco se va en progreso...saludos y gracias de nuevo

    ResponderEliminar
  100. Tú mismo puedes hacer la prueba y conocer la respuesta.

    ResponderEliminar
  101. muy buenas, antes de nada Gracias por tu blog y por tu labor, tengo montones de paginas tuyas a marcadores, este blog me es de gran ayuda
    tengo un pequeño problemilla con el menú en IE8 y es que no me muestra las pestañas aunque el efecto jQuery si que funciona y en Opera no muestra el texto de las pestañas, no tengo ni idea de como ponerlo bien, veo que a ti si que te funciona en IE8 aunque sin los bordes redondeados y en Opera te pasa igual que a mi. Como podría arreglarlo?
    Otra cosa, seria posible que en vez de expandir el Submenú hacia la derecha se expandiera hacia la izquierda?
    te dejo aquí la dirección de mi blog de pruebas, ya no se que hacer, si no encuentro solución así se va a quedar, en FireFox i chrome se ve bien, IE me da muchos problemas :(
    El Blog: http://jquerydavid.blogspot.com/

    ResponderEliminar
  102. Hola Potro!..
    Wow!! Lo he usado para "esconder" toda la musica que irá en cada sección.. Y ASÍ AHORRO ESPACIO! ..CARAMBA!! ..jajajaja
    Estupendo truco.
    Lo he utilizado en las páginas estáticas, el contenido de ellas siempre en edicion Html para publicar...Funciona!.. Esto para los que quieran saberlo :)
    Gracias Potro..un placer descubrir tu mundo.
    Un beso.

    ResponderEliminar
  103. Hola. Me gusta mucho tu blog. Tengo una pregunta: ¿como hago para que cuando este uno abierto y abra otro se cierre el anterior?

    ResponderEliminar
  104. David, puedes probar cambiar el efecto del fondo de la pestaña por una imagen, o un color sólido. Si es una imagen cambia esto:

    background-image: -moz-linear-gradient(#AAAAAA, #000000);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"


    Por esto:
    background-image:url(URL de la imagen);

    Si es un color entonces así:
    background-color:#000;

    ResponderEliminar
  105. Angie, un placer para mí poder contar con tu visita. ¡Saludos!

    Juplagon, el script no tiene esa característica :/

    ResponderEliminar
  106. Hola potro, como estas. Recién acabo de descubrir tu página, wow si que me sorprendes, hay muchísimas cosas. Sabes me llamó la atención, como es que pudiste sacar el código html del juego de Neave e insertalo allí en la pestaña? Me gustaría saber como es que se obtiene el codigo, ya que no hay botón alguno que tenga la opcion de copiar y pegar html. Gracias y felicidades por tu página, me encantó. Te sigo! =)
    Abrazos desde Perú.

    ResponderEliminar
  107. Hola Antoxwoman,

    ¡Bienvenida a Ciudad Blogger!
    El juego es un archivo hecho en flash con extensión SWF, sólo descargué el juego, lo subí a un hosting, y en la pestaña puse el código que usaría para cualquier archivo flash:
    http://ciudadblogger.com/2009/06/insertar-banners-en-flash.html

    ¡Saludos!

    ResponderEliminar
  108. hey muchas gracias, al final lo pude solucionar, también utilice este: http://ciudadblogger.com/2011/08/menu-vertical-desplegable-tipo-acordeon.html, le puse una tabla con links i anda perfecto
    ya tienes un seguidor mas!

    ResponderEliminar
  109. Excelente David, espero verte seguido por acá :)

    ResponderEliminar
  110. ¿Cómo puedo hacer este mismo menú pero de manera horizontal?

    Gracias !

    ResponderEliminar
  111. Ni idea Pacheta, nunca he visto alguno parecido en forma horizontal.

    ResponderEliminar
  112. hola potro un saludo te cuento que no he podido con este menu ya que tengo una plantilla creada con el artisteer3 y ps me da algunos problemas uno de ellos es incompatibilidad con scryptaculous por el uso de jquery he querido que mis etiquetas se contraigan y expandan pero no he podido asi que me dio por ensayara este y el resultado fue el mismo me aparece el menu pero hay algo que lo bloquea y no lo deja funcionar y te pido el favor y me puedes dar una mano la url del blog es http://elpalacioanime.blogspot.com/

    ResponderEliminar
  113. Con Scriptaculous y jQuery puedes aplicar un parche para que ambos funcionen:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    Pero el problema más allá de eso es que las plantillas de Aristeer usan scripts que hacen incompatible todo, es por eso que nunca las recomiendo usar, sobre todo si quieres personalizar tu blog.

    ResponderEliminar
  114. hermano ayudanme ese otro tema http://tvembed.eu/channel/12803/none/mmawrestling/TNA-TURNING-POINT-(PPV)

    esta pagina con darle click en los canales se habre el canal arriba sabes como los hace enseña la pantalla aparece arriba cuando das en los canales

    ResponderEliminar
  115. mi correo es soccer_jumbo@hotmail.com agregame y poder a ayudarme mejor .gracias

    ResponderEliminar
  116. http://tvembed.eu/ esta es la pagina cuando le das click en el canal no te lleva a otra ventana solo mente ahi es como si fuera un ifreme o algo parecio ayudame

    ResponderEliminar
  117. Hola mahoma,

    El primer link que dejaste no contiene ningún video, al menos cuando lo he abierto dice que no hay una transmisión todavía.
    El segundo le he dado click a varios enlaces pero nada me abre en iframes, todo abre en páginas distintas como se hace normalmente.

    ResponderEliminar
  118. gracias por responer EL POTRO bueno te has dado tiene iframe entra a http://tvembed.eu/ escoge los partidos del los enlaces y depsues te manda a escoger canales depues se abre iframes de los canales pantalla sabes como lo hace

    ResponderEliminar
  119. o mejor el potro enseñame esto mira este pagina
    http://pxwwe3.foroes.net/h8-Repes tiene un varios iframes. enseñame algo parecido que los canales se vean en el cuadro del iframe .bueno el potro disculpa por las molestias. o mira su codigo se fuente de la pagina y me esseñas a hacerlo algo parecido

    ResponderEliminar
  120. Hola itzack,

    Aquí hay una forma de hacerlo:
    http://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html

    ResponderEliminar
  121. Hola Potro que tal Mi problema es el siguiente... Tengo un Slider en la parte de arriba de mi blogger www.bienmusic.com y cuando trato de poner el codigo en la plantilla no me funciona el slider se ven todas las imágenes del slider que puede ser?

    ResponderEliminar
  122. Hola bienmusic, es porque tienes varias versiones de jQuery en la plantilla, deja sólo la más actual:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

    ResponderEliminar
    Respuestas
    1. Hola Potro, ami me sucede lo mismo y solo tengo una versión de Jquery (la mas actual). Tengo el Orbit Slide que saque de este blog. saludos.

      Eliminar
    2. Hola PES KITS, ¿ya has revisado que no tengas más versiones de jQuery?

      Eliminar
  123. Hola: copié y pegué los listados en los lugares correspondientes y todo OK.
    Pero el listado que va antes de >
    me aparece visible en el blog arriba del header y no encuentro la forma de quitarlo u ocultarlo.

    En los intentos que realizé borré los listados que había pegado y nada.
    Al pegarlos de nuevo sucede que al guardar los cambios el primer listado,el que va arriba de HEAD me da error,como que hay error de escritura.
    Pero estoy copiando y pegando además de revisarlo un montón de veces y lo mismo.
    Si alguien me puede ayudar estoy muy agradecido.
    Alberto.

    ResponderEliminar
  124. Hola Alberto,

    Hay dos etiquetas que se parecen pero no son las mismas, una es <b:skin><![CDATA[/* y otra es ]]></b:skin>

    Es antes de esta última donde deben ponerse esos códigos, tú lo has puesto antes de la primera y es por eso que aparecen en la cabecera del blog.

    Saludos.

    ResponderEliminar
  125. Hola Potro:
    Las unicas etiquetas con "skin" que aparecen en el listado son:
    tal como mencionas no aparece.
    Es posible que el archivo esté dañado?
    De ser así es posible teclear de nuevo esos códigos,o como sería posible recuperar el original.
    Gracias.

    ResponderEliminar
  126. Hola Alberto,

    Todas las plantillas de Blogger tienen esas dos etiquetas. Si no la encuentras usa las teclas CTRL+F, aparecerá una pequeña barra de búsqueda en tu navegador, ahí escribe el código que buscas y lo localizarás de inmediato.

    Saludos.

    ResponderEliminar
  127. Gracias Potro,perdón por molestar tanto pero recién comienzo con ésto del blog.

    ResponderEliminar
  128. No es ninguna molestia Alberto, para eso estamos ;)
    Cualquier otra duda que tengas pregunta con completa libertad y confianza.
    Saludos.

    ResponderEliminar
  129. hola no se si sabran pero con la nueva version de blogger no puedo poner eso de "skin" ... bueno no se si pueden poner de la version actualizada... gracias, me gusto la pagina

    ResponderEliminar
    Respuestas
    1. ¿Qué tipo de plantilla usas? Porque en una cuenta uso la nueva interfaz y puedo editar las plantillas como siempre.

      Eliminar
  130. Hola Potro!
    Una pregunta, hay alguna forma de dejar abierto siempre la primera pestaña? Gracias.
    Saludos.

    ResponderEliminar
    Respuestas
    1. No, la función se aplica por igual a todas las pestañas :(

      Eliminar
    2. No pasa nada Potro, ya intentaré otra cosa ;) muchas gracias de todos modos y sigue así, tienes una gran página!
      Saludos!

      Eliminar
  131. Hola, Potro, te saludo de nuevo =) y te consulto a la vez LOL. Puse este menú en un blog de pruebas (me gusta) pero ¿habrá manera de que al abrir cada una de las pestañas se abra en su propio espacio? me explico: puse tres pestañas en forma horizontal y cuando abro la pestaña del centro o de la derecha se desliza su contenido en la pestaña izquierda. Aquí te dejo el enlace y ojalá me eches una vez más la mano. http://garrick-7.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Hola VOXenOFF, no se puede con este menú ya que tiene a todas las pestañas encerradas en el mismo contenedor.

      Eliminar
  132. Muchas gracias, potro, voy a darme la libertad de buscar otro menú en tu blog. Buena tarde.

    ResponderEliminar
  133. Potro, ya solucioné "eso", lo que hice fue individualizar los menús: en lugar de uno puse tres y son independientes uno de otro al abrirse. Muchas gracias de nuevo.

    ResponderEliminar
  134. Gracias Potro, es justo lo que buscaba y siguiendo tus pasos lo he instalado sin ningún problema.. sólo un favor más te pido, podrías recomendarme un buen generador de color gradiante para personalizarlo un poquito más??
    Gracias de antemano.. Saludos

    http://sgroyaparadise.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Este te puede servir:
      http://css3.mikeplate.com/

      Saludos!

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger