Sexy Drop Down Menu con JQuery y CSS

4 de enero de 2010 349 comentarios ,
sexy drop down menu
Sexy Drop Down Menu es un menú hecho con JQuery y CSS y si no me equivoco es una creación de Soh Tanaka.
Se trata de un menú horizontal muy elegante que tiene un efecto deslizante en sus pestañas, y que además, para ver los sub menús es necesario presionar una flechita en color verde.
Puedes ver un ejemplo de este menú en este blog de pruebas.

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.


Para colocar este menú horizontal en tu blog agregamos la parte CSS correspondiente antes de ]]></b:skin>

/* Sexy Drop Down Menu
----------------------------------------------- */
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 12px;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/S0JD4Lm1ZiI/AAAAAAAAAC8/HOlaXxwCcqs/s320/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.topnav li a {
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover {
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/S0JD4vCBd1I/AAAAAAAAADE/suoyI_vCxm8/s320/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/S0JD36wwAGI/AAAAAAAAAC0/2DVqHMgRPd0/s320/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {
background-position: center bottom;
cursor: pointer;
}
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li {
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://1.bp.blogspot.com/_dsEG33PDaHw/S0JD3qKKC0I/AAAAAAAAACs/9PvbBaVNPqg/s320/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover {
background: #222 url(http://1.bp.blogspot.com/_dsEG33PDaHw/S0JD3qKKC0I/AAAAAAAAACs/9PvbBaVNPqg/s320/dropdown_linkbg.gif) no-repeat 10px center;
}


Luego buscamos la etiqueta </head> y arriba de ella pegamos el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});

});
</script>

Por último coloca en un elemento HTML/Javascript el siguiente código:
<ul class="topnav">
<li><a href="URL del enlace">Pestaña1</a></li>
<li>
<a href="URL del enlace">Pestaña2</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
<li>
<a href="URL del enlace">Pestaña 3</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4</a></li>
<li><a href="URL del enlace">Pestaña 5</a></li></ul>

Arrastra el menú debajo de la cabecera y cambia las URL de los enlaces donde se indica.
Si quisieras agregar más pestañas sólo agrega antes de </ul> esta línea:
<li><a href="URL del enlace">Otra Pestaña</a></li>

Y si quieras agregar sub pestañas entonces agrega esto:
<li>
<a href="URL del enlace">Otra Pestaña</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>

Es un menú muy elegante parecido al menú horizontal deslizante que antes habíamos visto, pero con la particularidad de que este tiene el botón para deslizar las sub pestañas.


349 comentarios en:

" Sexy Drop Down Menu con JQuery y CSS "

  1. La verdad que se ve muy bonito, ese efecto de brillo al poner el cursor y ese detalle de las flechas verdes queda muy bien!

    (voy a tener que googlear porque aún no se bien que es JQuery :P )


    Un abrazo!!!

    ResponderEliminar
  2. Jajajjajaa yo tampoco k es JQuery pero igual , estos tipos de menus son los k me gustan.
    Cuidate.

    ResponderEliminar
  3. brother, JQuery es una librería JavaScript que sirve para crear distintos efectos. Un abrazo!

    *Layla*Crepusculera*, qué bueno que te ha gustado.

    PepeX, sí que son vistosos estos menús, saludos!

    ResponderEliminar
  4. Buena hee.
    Pero tengo un problema
    que no me deja porner el elemento HTML/JavaScript
    abajo de la cabecera...
    Que puedo hacer?¿

    Gracias Saludos

    ResponderEliminar
  5. orale, en vez de decir "contacto" dice "contaco"

    Jeje, muy buen tuto, saludos

    ResponderEliminar
  6. Muy bueno.
    Creo que lo pondre.
    Estoy haciendo un nuevo blog de videos, creo que le pondre ese menu.

    saludos.

    ResponderEliminar
  7. Hola 臖 fuиguzz 臖 ™,

    Dentro de la entrada puse el enlace para saber cómo mover el elemento debajo de la cabecera, aquí lo pongo de nuevo:

    http://ciudadblogger.com/2009/12/anadir-gadgets-abajo-de-la-cabecera-del.html

    Saludos.

    ResponderEliminar
  8. FakeDark, jajaja es verdad, gracias por la corrección!

    El Venado, seguro quedará muy bien en el blog ;)

    ResponderEliminar
  9. Hola otra vez.
    Tengo una duda como borro el menu horizontal de mi plantilla.
    Lo que pasa es que para editar el menu hay que entrar a Edicion de HTML y luego agregarle las pestañas.
    y para poner el tuyo hay que quitar ese.
    ¿Como lo borro desde Edicion de HTML?

    ResponderEliminar
  10. Hola El Venado,

    Si te refieres a eliminar el menú actual que tienes entonces en Edición de HTML busca la etiqueta <div id='nav'> y elimia desde ahí hasta el próximo </ul>
    </div>

    Saludos.

    ResponderEliminar
  11. ahhh.. ahora entindo un poco mas... ¿o sea que con CSS le damos la apariencia y con JQuery lo animamos para que se despliegue? Perdona mi ignorancia.

    GRACIAS!

    Un abrazo!!!

    ResponderEliminar
  12. Exacto, JQuery se encarga de la animación a través del script ;)

    ResponderEliminar
  13. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  14. Buena , =) Peroo no me a funcionado :S no se porque =s, mira como me a quedado, www.davisn.es , e utilizado este blog como pruebas =), pero nada :S , algo mas? Saludos.

    ResponderEliminar
  15. Hola Davis N.,

    No veo que tengas puesto ni el primero ni el segundo código, sin ellos es imposible que funcione.

    Saludos.

    ResponderEliminar
  16. Ahora si =) Ultra-Gracia, parece que aller se borro o ni idea :S, saludos =)

    ResponderEliminar
  17. Qué bueno que ya está funcionando.
    Saludos.

    ResponderEliminar
  18. Hola amigo y como hago para cambiar el menu color negro a otro color por ejemplo a este color #024E80 que es un color azul oscuro, porfavor enviame un comentario o me escribes a publicista@st-travel.net, es urgente amigo para mi blog .... pleaase estoy a espera de tu respuesta....
    Muchas garcias por tu blog excelenteee!!!!

    ResponderEliminar
  19. Hola ST TRAVEL,

    El fondo del menú es una imagen, ya sea que edites la imagen o sino en el primer código dice más o menos al principio esto:
    background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/S0JD4Lm1ZiI/AAAAAAAAAC8/HOlaXxwCcqs/s320/topnav_bg.gif) repeat-x;

    Elimínalo, luego verás unas líneas más arriba que dice:
    background: #222;
    Ahí cambia ese código por el código del color que quieres.

    Saludos.

    ResponderEliminar
  20. hola potro soy nuevo en esto...!!! pero quiero aprender y mejorar mi blog. yo tengo un blog de prueba, copie el menú pero nada no me sirve, cuando se despliega el submenú, y paso el cursor sobre el se buelva a recoger el submenu, no puedo hacer click sobre el
    este es el enlace http://ebcarayuda.blogspot.com/

    ResponderEliminar
  21. Hola Blog de Prueba,

    Eso es porque ahorita no tienes ninguna entrada y el letrero de "Ninguna entrada coincide con la consulta." hace que no se pueda seleccionar lo que hay en las pestañas. Cuando tengas tus entradas verás que el problema desaparece.

    Saludos.

    ResponderEliminar
  22. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  23. como hago para ajustarlo al ancho correcto de mi blog, para que se vea bien, este es el blog que tengo http://ebcar.blogspot.com

    ResponderEliminar
  24. Al principio del primer código dice: width: 100%;
    Eso cámbialo por otro valor hasta que se ajuste, por ejemplo 96%;

    Saludos.

    ResponderEliminar
  25. gracias mi pana!!!! jejeje sos un genio!!! saludos desde venezuela

    ResponderEliminar
  26. He intentado dejarlo lo mejor posible, pero tengo un problemilla con la localización y el color del menú. ¿Cómo puedo dejarlo justo bien colocado y si es que se puede, cambiarle el color a "blanco"? Mi blog es:

    http://kaedefansub.blogspot.com/

    Gracias.

    ResponderEliminar
  27. Hola paulinho,

    Al inicio del código dice width: 100%; eso modifícalo por 96% o hasta que se ajuste al tamaño que quieres.
    Para cambiar el color de fondo del menú lee el comentario #22.

    Saludos!

    ResponderEliminar
  28. Aps, gracias. Pero me surgió un problema. Yo en mi blog tengo eso de "Ver-Ocultar contenido dentro de una entrada", y resulta que al poner este menú me lo bloquea. ¿Sabes por qué ocurre eso? Saludos.

    ResponderEliminar
  29. No debería interferir pero podría ser por ese o por algún otro script.
    Saludos.

    ResponderEliminar
  30. Es que justo le puse la barra de menú y se bloqueó lo de Ver-Ocultar. Por eso lo digo.

    ResponderEliminar
  31. hola gracias por el aporte es buenisimo :) tengo una duda es normal que no pueda ver la flechita verde me gustaria verlos

    ResponderEliminar
  32. no veo los submenus ni la flechita para desplegarlos y ya los he agragado

    ResponderEliminar
  33. Entonces sí genera conflicto, no creo que haya mucho qué hacer :S

    ResponderEliminar
  34. Gracias de todas formas sin submenu no pierde puntos ya buscare arreglo a eso jeje :)

    ResponderEliminar
  35. Hola Lazaro+,

    Al parecer les está causando conflicto a quienes tienen en su plantilla Scriptaculous, no me has dicho cuál es tu blog pero supongo que igual debe ser tu caso.

    Saludos.

    ResponderEliminar
  36. Perdona ya e habilitado la visibilidad de mi perfil no me habia fijado y si creo k tengo Scriptaculous http://miratuspelisgratis.blogspot.com

    ResponderEliminar
  37. No tienes Scriptaculous pero debe ser algún otro script de tu plantilla que está causando conflicto con JQuery, aunque como dices, sigue viéndose bien ;)

    ResponderEliminar
  38. Potro:
    1.-
    Cómo dejo el texto del submenú cargado hacia la izquierda?
    2.-
    Cómo se puede mostrar el texto, distinguiendo minúsculas de mayúsculas (en menú y/o submenú)?

    Saludos.
    Jpz.-

    ResponderEliminar
  39. Hola Jpz,

    Para que el texto del submenú se alinee a la izquierda busca esta línea:
    ul.topnav li ul.subnav {

    Y debajo de ella pega esto:
    text-align: left;

    No he entendido lo de las mayúsculas, en realidad el menú no tiene asignada la propiedad uppercase o alguna otra, el texto se muestra distinguiendo las mayúsculas o minúsculas que tú agregues al menú.

    Saludos.

    ResponderEliminar
  40. potro! probe este menu en un blog, copie asi mismo pero no me aparece la flechita del subnav... que podria ser?

    ResponderEliminar
  41. Es posible que tengas algún otro script (como Scriptacolous) que esté interfiriendo en el funcionamiento del menú.
    Por desgracia estas librerías de efectos generalmente no se llevan bien con otras librerías.

    Saludos.

    ResponderEliminar
  42. Mierda no me sale queda el menu pero las sub pestañas No que puedo hacerr Potro?

    ResponderEliminar
  43. Si no aparecen las flechitas entonces es un problema de compatibilidad entre JQuery y algún otro script, hay no hay mucho (por no decir -nada-) que hacer :S

    Saludos.

    ResponderEliminar
  44. oye una pregunta no hay alguna forma de hacer mas pequeña la barra de las pestañas. es que se sale del marco mi blog.

    ResponderEliminar
  45. Hola fuиguzz,

    En el primer código al inicio dice width: 100%; cámbialo por width: 96%; o hasta que se ajuste.

    Saludos.

    ResponderEliminar
  46. coloque todo como dice el tuto y puse mi barra en mi blog ,pero al hacer click en la pestaña para visualizar las sub pestaña no sale . osea no sale la subpestaña no muestra no se porke si todo esta muy biem colocado :( rayos intente mas de 1 hora copiar y pegar como 1o veces el codigo y nada gracias

    ResponderEliminar
  47. Supongo que debe haber algún otro script que causa conflicto con JQuery y por eso no funciona, eso le ha pasado a muchos al ponerlo :(

    ResponderEliminar
  48. Muchas gracias, me sirvió de mucho!! sos un groso amigo!

    ResponderEliminar
  49. Gracias bug, qué bueno que te ha servido.

    ResponderEliminar
  50. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  51. Hola e instalado este menu en mi blog http://compartiendovirtuales.blogspot.com/ ha quedado muy lindo pero no logro poder centrarlo he probado reducirlo % pero se me achica y todo se va hacia el lado izquierdo.
    Por favor ayudame a solucionarlo, te agradezco mucho. gracias

    ResponderEliminar
  52. Gracias viendo otros comentarios logre solucionarlo. De todas manera me gustarias que entraras en mi blog http://compartiendovirtuales.blogspot.com/ para ver como quedo. Gracias

    ResponderEliminar
  53. Ya lo veo perfectamente centrado ;)

    Saludos.

    ResponderEliminar
  54. Lo agregué a mi blog... hay, que bien que me quedó... como mi blog es un blog colorido y no deprimido, busqué la imagn del fondo, le puse una capa por encima en el photoshop, esa capa la pinté de azul y luego le di estilo de capa "color", así, le puedes cambiar el color al color que más te guste, rojo, verde, amarillo... el que quieras... Jeje, disfrutando del dominio...

    Nos vemos y gracias por compartirlo, hace tiempo vi que me hiba a servir y bueno, recordando, vi que no me equivoqué...

    ResponderEliminar
  55. Exacto, se puede personalizar tanto como se quiera. Ya que pueda entrar a tu blog le echaré un vistazo para ver cómo te quedo :)

    ResponderEliminar
  56. Holaa!! me encanta tu blog cada ves amo mas las cosas que tiene, en este caso se me ocurrio subir esta barrita pero el problema es que sobresale de la pantalla y no c como achicarlo, y no salemente ese es el problema, sino que no me carga la flechita para ver las subpestañas. que ago?
    mi blog es http://demonastrus.blogspot.com espero tu ayuda :)

    ResponderEliminar
  57. Hola Aferael,

    Para reducir el tamaño busca al inicio del primer código donde dice width: 100%; ahí cambialo por 95% o hasta que se ajuste al tamaño que quieres.
    Lo de las flechitas puede deberse a dos cosas, una que el segundo código lo tienes repetido y debe ir sólo una vez.
    Y la otra es que usas un script llamado Prototipe y usualmente no es compatible con JQuery, o sea con el script que hace que este menú funcione.

    Saludos.

    ResponderEliminar
  58. aww! muchas gracias, pude solucionar el problema, y tenias razon, no solo tenia el script sino que tmb el codigo estaba repetido,, tmb pude rebajar el tamaño.
    gracias nuevamente!.

    ResponderEliminar
  59. Me alegra que hayas podido solucionarlo ;)
    Saludos.

    ResponderEliminar
  60. El Potro:
    No me funciona el menu, ya que cuando se despliegan las pestañas al ir a clicar se cierra. Este es mi blog:
    http://kishaper.blogspot.com/
    Un Saludo:
    Muzgo Webmaniatico

    P.D. ¿Porque no puedo usar códigos HTML en los comentarios? He intentado usar el atrubuto FONT pero no me deja.

    ResponderEliminar
  61. Quizá sea por el texto que sigue al cursor, elimínalo y fijate si se arregla.
    Sí se pueden dejar códigos pero tienes que convertir el código a texto plano:
    Guía rápida para dejar comentarios

    Saludos.

    ResponderEliminar
  62. Muchas muchas gracias por esta entrada, llevaba un montón de tiempo con ganas de hacer algo así, y por fin he conseguido instalarlo.
    Un saludo.

    ResponderEliminar
  63. Qué gusto que te haya resultado útil este tutorial.
    Saludos ;)

    ResponderEliminar
  64. aupa e probau a montar un mennu de ests pero pa sorpresa mia me e dau cuenta despues de k al habrirrlo los submenus k me piyan encima de los video no se ven
    pasa kon todos???

    ResponderEliminar
  65. Hola Urko,

    Como el menú funciona con un script no puede haber otro objeto detrás del menú, ya sea un video u otro script, de lo contrario no funcionará.

    Saludos.

    ResponderEliminar
  66. Mil gracias!
    http://pokemon-charizard123.blogspot.com/
    Mira como quedó :p

    ResponderEliminar
  67. quieroi lo mismo pero en vertical !! k le tengo k cambiar

    ResponderEliminar
  68. Este menú sólo funciona en forma horizontal.

    ResponderEliminar
  69. Ayuda ¿Como le quito el enlace a las pestañas que tienen subpestañas?. Porque el enlace iría en las subpestañas y no en la pestña que aparece en la barra del menú. Gracias

    ResponderEliminar
  70. Sólo quita el código alrededor del nombre de la pestaña, es decir, lo que en este ejemplo pongo en negrita:

    <a href="URL del enlace">Pestaña2</a>

    ResponderEliminar
  71. Muchas gracias por la respuesta. Un saludo.

    ResponderEliminar
  72. Otra duda. ¿Se puede eliminar el rótulo que pone :"Mostrando las entradas más recientes con la etiqueta ... Mostrar las entradas más antiguas" porque impide navegar con las subpestañas que des desplegan encima del él? Gracias

    ResponderEliminar
  73. Hola, Potro

    He puesto el menú en este blog de pruebas http://adlfbeta.blogspot.com/
    y cuando despliego los submenús se me esconden detrás de la columna de las entradas

    ¿cómo puedo hacer que se despliegue por encima?

    ResponderEliminar
  74. Déjalo Potro

    Lo voy a quitar y a poner otro

    Gracias

    ResponderEliminar
  75. hola, me pareció muy bueno este menu, muchas gracias, pero no me funcionaron las subpestañas, asi que pienso solo usar las principales, asi q quisiera como hago para quitarle las flechitas verdes ya que no las puedo utilizar. ok gracias de nuevo

    ResponderEliminar
  76. Hola YTA ROBOTIC,

    Sólo elimina las subpestañas del código, es decir, estas partes:
    <ul class="subnav">
    <li><a href="URL del enlace">Sub Pestaña</a></li>
    <li><a href="URL del enlace">Sub Pestaña</a></li>
    <li><a href="URL del enlace">Sub Pestaña</a></li>
    </ul>

    Saludos.

    ResponderEliminar
  77. En ese blog de pruebas tienes dos librerías incompatibles, JQuery y Scriptaculous. Además, tienes dos veces JQuery, el de esta entrada y el de los docks.

    ResponderEliminar
  78. Grfñw... bueno, gracias,entonces este menú lo pondré en uno que estoy diseñando para un amigo...

    Al menos algo he aprendido. :)

    ResponderEliminar
  79. Hola Potro muy buen menu, pero me gusrtaria saber si se puede poner como en la pestaña 3.2 del menu horizontal con efecto deslizante. Gracias

    ResponderEliminar
  80. hola potro queria hacer una pregunta como ponerle a este menu ,a las sub pestaña unas sub pestañas me explico el menu tiene pestañas principales y cada pestaña principal tiene sub pestñas, y yo quisiera poner sub pestañas ha cada sub pestaña ojala pudieses resolver mi problema eso graxias tu blog es genial

    ResponderEliminar
  81. Isra y Goku El Super Sayayin,

    Me temo que no se puede con este menú :(

    ResponderEliminar
  82. ummmmmmmmmmmmm que mal bueno graxias si encuentras alguna manera me avisas gracias

    ResponderEliminar
  83. TENGO UN PROBLEMA CUANDO HAGO CLICK NE LA FLECHA, APARECE EL MENU PERO CUANDO QUIERO SELECCIONA LA SUBPESTAÑA SE ME CIERRA EL MENU SALUDOS MI EMAIL CDPTEAM@HOTMAIL.COM GRACIAS

    ResponderEliminar
  84. Vale, qué bueno que ya lo has arreglado :)

    ResponderEliminar
  85. olle potro no me funciona,lo pongo todo como tu dices y no funciona,me pone todo pero cuando le day en la flecha verde no sale nada no se dezlizan las pestañas,potro porfa ayudame,te dejo el link del blog de pruebas que ise:

    http://esdepruebaesteblog.blogspot.com/

    porfa velo y dime que es lo que falla porfavor potro ayudame

    ResponderEliminar
  86. Hola NNIOO,

    Escribe una entrada para que haya contenido dentro del blog, después de hacerlo verifica si sigue sin funcionar el menú.

    ¡Saludos!

    ResponderEliminar
  87. olle potro ise lo que me dijiste pero no funciono,sigue sin deslizarse las pestañas,no funciona,espero que me puedas ayudar,esque enserio quiero ese menu para un blog que estoy preparando.ayudame porfa

    ResponderEliminar
  88. Pues si lo has puesto correctamente debería funcionar a menos que tengas algún otro script que quizá sea incompatible o bien, trata poniendo el segundo código después de < head >

    ResponderEliminar
  89. HOLA POTRO DE VARDAD QUE EL MENÚ ESTA MUY BONITO... PERO QUERÍA PEDIRTE UN FAVOR.. LO QUE PASA ES QUE YO LE DI LA OPCIÓN A MI BLOG PARA QUE EN CADA PAGINA SOLO ME MOSTRARA CINCO ENTRADAS (WWW.DATOSCURIOSOSWEB.BLOGSPOT.COM).. Y SI ENTRAS TE DAS CUENTA QUE EN LA PRINCIPAL SOLO APARECEN CINCO.. HASTA HAY TODO ESTA BIEN; PERO CUANDO ABRES UNA DE LAS ETIQUETAS EJEMPLO: ANIMALES TE MUESTRA TODAS LAS ENTRADAS Y NO LAS CINCO QUE QUIERO QUE SE VEAN.. Y CUANDO DOY CLIC EN ENTRADAS ANTIGUAS ME DICE QUE YA NO HAY.. PORFA AYUDAME....

    ResponderEliminar
  90. En las etiquetas ya no se puede controlar el número de entradas a mostrar, muestra de 20 en 20, si tienes menos de 20 entradas en una etiqueta entonces es lógico que te diga que ya no hay entradas que mostrar.

    ResponderEliminar
  91. Hola Potro, viendo el blog de pruebas 4 (http://ciudadblogger4.blogspot.com) me fije como al entrar a las paginas se agrega un borde a la pagina, y se hace como un cuadro, queria saber como puedo hacer eso, ejemplo para un gadget, se que es con css, pero me podrias ayudar con una forma basica de como seria, aunque sea con el margen y eso. Saludos.

    ResponderEliminar
  92. No sé a qué te refieres, no veo ningún borde en ese blog de pruebas :s

    ResponderEliminar
  93. Perdon me referia a este http://ciudadblogger3.blogspot.com/p/pagina-uno.html donde creaste como una caja y encerraste el texto, queria saber como agregas los bordes osea que estilos se usan.

    ResponderEliminar
  94. Hola he utilizado la barra todo bien , pero no me funciona el lightbox para las imagenes

    saludos gracias de antemano

    ResponderEliminar
  95. Lightbox no es compatible con este menú porque usan librerías distintas.
    Puedes probar con Shadowbox.

    Saludos.

    ResponderEliminar
  96. Buenisimo ,

    gracias por tu rapida respuesta
    si necesitas algun consejo software de diseño
    ( publicidad ,imprenta,serigrafia)
    aqui estamos

    gracias denuevo

    ResponderEliminar
  97. hola,potro,otra ves yo,no me sirvio,no pasa nada,no se deslizan las pestaña,que decepcion,la verdad que queria mucho este menu en mi blog,olle no podrias postear (por asi decirle) otros menus de este estilo,porfa,o solo guiarme para encontrar uno de este estilo,me podrias ayudar,porfa.y tambien me podrias guiar para encontras plantillas que sean 100% personalizables,esque solo allo unas que no lo son,ayudame porfa

    ResponderEliminar
  98. Hola NNIOO,

    Estoy viendo en tu blog de pruebas que el script lo pegaste debajo de /head y debe ir antes de esa etiqueta, es decir, arriba de ella.
    Prueba de nuevo haciendo esa modificación.

    ResponderEliminar
  99. la ise y pues sigue igual,no funciona,bueno de todos modos gracias por la ayuda,tendre que dejar ese menu y buscar otro,de todos modos muchas gracias por la ayuda ;).y si sabes donde encontrar buenas plantilla para blogger

    ResponderEliminar
  100. Apenas hasta ahora me fijé que es una de las nuevas plantillas de Blogger y la mala noticia es que muchas cosas que verás por la web no se pueden usar en esas plantillas, no sólo este menú, si muchos otros menús y efectos no se pueden aplicar.
    Te sugiero que condigas otra plantilla, en btemplates.com hay mucho de dónde escoger.

    ResponderEliminar
  101. Me anda un poco raro cuando pasa el ratón encima de las pestañas, mas concretamente al quitarlo, ya que hace efecto de cerrarse todas las pestañas al mismo tiempo dos veces seguidas, y queda fatal

    http://testdrawer4everyone.blogspot.com/

    ResponderEliminar
  102. ¿Por cierto, cómo haces para que salga la imagen de usuario tan grande en tu blog? ¡a mi ni me sale!

    ResponderEliminar
  103. vale, he visto el comentario que hice hace un tiempo, el número 83, pero bueno, ¿no hay ninguna manera de que esten al mismo tiempo, sin que uno destruya al otro?

    Es que tener un dock, un menu de estos, usar el shadowbox y el S3Slider haría que por fín mi blog pareciera lo que es: elsitio donde gestiono mis galerías de arte.

    ResponderEliminar
  104. olle potro,pues gracias por la ayuda,que lastima que esas plantillas no sean compatibles,olle segui tu consejo y pues encontre una plantilla en btemplate,muy buena,pero te pregunto,si hay alguna forma de combiar el color de fondo de cada entrada,osea como el tuyo que es blanco,pero yo quiero cambiar el color de fondo de cada entrada,se puede aser esto,si si se puede,me puedes decir como,por favor

    ResponderEliminar
  105. Drawer 4 Everyone, tener tantas librerías de efectos en el blog podría resultar contraproducente, entre ellas que algo no funcione o que no funcione como debería, es por eso que hay que ser muy estrictos al momento de escoger qué le pondremos al blog.


    NNIOO, en la mayoría de las plantillas debe ser de este modo, debajo de .post {
    agrega esto:
    background:#CCCCCC;

    Ese es el código del color, puedes cambiarlo por otro.

    ResponderEliminar
  106. Oye, en el otro menú que has citado habia subpestañas dentro de las subpestañas, ¿aquí también se puede?

    ResponderEliminar
  107. gracias por la rapida respuesta,"potor",justo aora lo probare

    ResponderEliminar
  108. Hola potro muchas gracias por tomarte la molestia de responder a mi inquietud.. pero me surge una nueva pregunta ¿puedo remplazar las etiquetas por este menú? si se puede por fa dime como.. gracias nuevamente...

    ResponderEliminar
  109. Drawer 4 Everyone, recuérdame qué menú porque me he perdido un poco :s

    NNIOO, por nada, saludos.

    americano_10, ¿te refieres a que no aparezcan las etiquetas en las entradas?

    ResponderEliminar
  110. No en todos loe menús se les puede agregar subpestañas, pero tanto el Sexy Drop Down como el que mencionas con efecto deslizante sí tienen subpestañas, incluso en los códigos de ejemplo ya vienen dentro subpestañas.

    ResponderEliminar
  111. no me has entendido, en el otro menú hay pestañas dentro de pestañas, lo que pregunto es si en este tambien se puede.

    ResponderEliminar
  112. Ahora ya te entendí. No, a este menú sólo se le puede agregar subpestañas a las pestañas, pero no subpestañas a las subpestañas.

    ResponderEliminar
  113. Gracias, creo que es así mejor, por que si no sería muy complicado buscar, porque aunque estuviera muy bien catalogado, seria un poco dificil el encontrar muy concreto si no se sabe como se hace, yo por eso lo estoy haciendo con imágenes, y queda chulo. :D

    ResponderEliminar
  114. Concuerdo contigo, cuando se tienen demasiadas subpestañas dentro de otras subpestañas se puede volver todo un dolor de cabeza para los lectores, así que entre más sencillo esté será mejor.

    ResponderEliminar
  115. Potro amigo por favor dime como hago para que el sub menu se vea sobre la entrada, mira como queda, www.aulafunse.blogspot.com y no se que mas hacer, lo he colocado como has dicho. este es un blog de pruebas.

    ResponderEliminar
  116. En las plantillas nuevas de Blogger no está funcionando, de hecho muchos trucos no funcionan en esas plantillas :(

    ResponderEliminar
  117. esta muy bueno una pregunta yo no se mucho de css, para mi proyecto de clases estaba pensando usar este menú pero necesito cambiar esas flechas verdes a naranjas como puedo hacer eso alguien por favor díganme se lo agradecería muchísimo.

    ResponderEliminar
  118. Esa es una imagen, tendrías que editarla con un programa para cambiarle el color, la URL de la imagen es la que está aquí:

    ul.topnav li span {
    width: 17px;
    height: 35px;
    float: left;
    background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/S0JD36wwAGI/AAAAAAAAAC0/2DVqHMgRPd0/s320/subnav_btn.gif) no-repeat center top;
    }

    Ya que la edites la subes a un hosting y cambias la URL.

    ResponderEliminar
  119. Hola!! Este menú se ve muy bien. El caso, esque al instalarlo en mi blog, pueden ocurrir dos cosas:
    1º Sale el menú, pero tambien salen las subpestañas, todas juntas y desordenadas.
    2º Sale el menú, pero no me salen las subpestañas. Me ha pasado esto con 5 tipos de menús...
    ¿Que hago? Lo necesito, es urgente! :(

    ResponderEliminar
  120. En las plantillas nuevas de Blogger no funciona, de hecho muchas cosas no funcionan en esas plantillas.

    ResponderEliminar
  121. APENAS te hiba decir k no funciona
    pero ya me di cuenta que es por mi plantilla :/

    ResponderEliminar
  122. potro UNA VEZ MAS yo
    lo puse en mi blog
    y cuando clickeas la flecha verda
    no sale nada abajo
    porque es?
    gracias

    ResponderEliminar
  123. Si es en la plantilla que me habías comentado no funcionará, casi nada funciona en esas plantillas, si es en otra que no sea de las nuevas necesitaría ver cuál blog es para poder echarle una mirada a los códigos.

    ResponderEliminar
  124. Oye, no sé por qué, pero si pego el código de scriptalous y prototype para hacer lo del efecto ese tan culo del slide, se me ocultan las flechas.

    El código a pegar era este encima de < / h e a d >

    ¿No sabrás por que será ni que tengo que hacer para que dejen de pegarse?

    Ah, y saludos de parte de un amigo mio que es fan tuyo pero que no quiere que lo sepas :D

    ResponderEliminar
  125. hola he puesto tu menú, es fantastico!
    pero no me funcionan las subpestañas, podrias pasarte un momento y decirme en que la estoy cagando?
    Muchas Gracias!!
    Saludos!

    ResponderEliminar
  126. Drawer 4 Everyone, recuerda que Scriptaculous no es compatible con jQuery, y justo ésta última es la librería que se ocupa para el menú, así que si pones las dos al mismo tiempo alguna de ellas dejará de funcionar.

    McClane, ningún menú de subpestañas funciona en las plantillas nuevas de Blogger, de hecho casi nada funciona ahí.

    ResponderEliminar
  127. potro te quiero hacer una consulta como puedo poner el reloj en la parte donde esta la fecha del blog

    ResponderEliminar
  128. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  129. Ya te he respondido en la otra entrada, saludos.

    ResponderEliminar
  130. potro tengo otra duda yo quiero este menu quiero ponerle videos
    ej:
    quiero ponerle un url de justin.tv se puede asi le pongo un monton de URL´s de justin tv y asi creo una especie de reproductor web, ¿eso se puede hacer?

    ResponderEliminar
  131. POTROOOOOO.!!!! NO ME ABRE LA SUBPESTAÑA: REVISA EN: http://mercantil-viajes.blogspot.com/ EN LA SECCION: QUIENES SOMOS? EN EL BOTON VERDE PARA DESPLEGAR LA SUBPESTAÑA NO ME ABRE (DE HECHO NINGUNA) PERO EN ESTA EN PARTICULAR COLOQUE LAURL DE CIUDAD BLOGGER PARA PROBAR. PERO NO DESPLIEGA. ME IMAGINO QUE HICE ALGO MAL PERO NO SE QUE.

    ResponderEliminar
  132. No hiciste nada malo, lo que sucede es que en las plantillas nuevas de Blogger los menús con subpestañas así como otras cosas no funcionan :\

    ResponderEliminar
  133. QUE SITE DE PLANTILLAS ME PROPONES? YA ME CANSO ESA PLANTILLA .. ME PONE MUCHAS BARRERAS..

    ResponderEliminar
  134. Pues en Btemplates.com hay cientos de plantillas, yo en la sección de Plantillas tengo unas cuentas pero hay mucha más variedad en ese sitio.

    ResponderEliminar
  135. hola potro, todo va bien, el unico problema es que cuando les doy click en las flechitas no me aparecen las subpestañas!!

    ResponderEliminar
  136. Hola Cesar, no me has dicho cuál es tu blog, pero si usas las plantillas nuevas de Blogger ningún menú con subpestañas te funcionará :\

    ResponderEliminar
  137. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  138. nose si pueden ayudarme , surge que he peusto en miblog este modo de menus y cuando hago click en la flechita aparece lo que he peusto pero cuando voy a señalar la ultima opcion se minimiza la flecha....no aguanta :S....chekeen si peuden www.ayudasrapidas.blogspot.com.....
    Nose como arreglar esto :S

    ResponderEliminar
  139. Ningún menú de subpestañas funciona en las nuevas plantillas de Blogger.

    ResponderEliminar
  140. Vale man gracias por la respuesta , ya me taba matando xq no sabia como cambiar esa vaina he revisado el codigo + de 7 vces ahahah

    ResponderEliminar
  141. Tengo un problemilla, no soy capaz de hacer que los subpestañas funcionen bien:

    http://salirseporlatangente.blogspot.com/


    Algún consejo??

    ResponderEliminar
  142. no habia leido que las subpestañas no funcionan en las nuevas plantillas. He solucionado el problema (no muy bien, todo sea dicho) cambiando position: absolute;
    por position: left; consigo que me funcionen, aunque desgraciadamente no queda muy bonito XD

    ResponderEliminar
  143. Algo más debe hacerse, la verdad es que con esas plantillas he preferido no acercarme mucho pues poco les entiendo, pero debe ser algún estilo del área de "tabs" que impide que se desplieguen las subpestañas.

    ResponderEliminar
  144. disuclpa potro pero yo ise todos los pasos si me sale el resultado pero si lo pongo debajo de la plantilla si sale pero las pestañas y subpestañas no solo cuando la pongo a un lado se desliza las pestañas ayudame porfa mi blgo es http://wweslim-9.blogspot.com/ porfa ayudame

    ResponderEliminar
  145. Wow men muy bueno el post pero.. tengo un problema amigo no se si me podes ayudar es que el menu esta bn normal lo que no me sale son las subpestañas me sale gris pero no sale ni los links ni los textos ayudame men y de ante mano gracias por todo

    ResponderEliminar
  146. Alexander, los menús de subpestañas no funcionan en las nuevas plantillas de Blogger.

    Andres, supongo que los estilos de la plantilla que usas interfieren con este menú. Lamentablemente no conozco la plantilla que usas por lo que no sabría decirte dónde está el problema :\

    ResponderEliminar
  147. hola ayudanme porfavor porfavor!!!!!!!!!!!!!!!!!

    porq ami no me agarran ningun menu despejable no se despeja

    ResponderEliminar
  148. En las plantillas nuevas de Blogger no funciona ningún menú desplegable.

    ResponderEliminar
  149. Hola! Necesito tu ayuda... he creado mi blog (http://awengranger-beingpatty.blogspot.com/)
    Realize ese menu con la ayuda de la pag Pure CSS Menu, y todo parecia que iba bien hasta q lo puse... las subpestañas aparecen detras del diseño de la pagina principal... la unica solucion q encontre fue agrandar el espacio entre las pestañas y el inicio de las entradas... pero no creo que esa sea una verdadera solucion... que me recomiendas? deberia cambiarme de plantilla? ...he leido tus comentarios donde dices q las nuevas plantillas de blogger hacen la vida de una un infierno y estoy de acuerdo con eso... pero aun asi? alguna idea de la solucion a mi problema?

    ResponderEliminar
  150. Pues la verdad es que esas plantillas sí son lindas pero poco útiles si es que quieres personalizarlas a gran modo ya que casi nada funciona en ellas.
    En algunas ocasiones se soluciona agregando dentro de los estilos del menú este atributo:
    z-index: 5;

    ResponderEliminar
  151. Hola de nuevo Potro. Aquí vuelvo a amargarte un poco la existencia.

    He visto este menú y me he dicho a mi mismo: "este hombre es un jefe, siempre tiene en su blog lo que me hace falta para el mío.

    He copiado todos los códigos como están aquí en el post pero:

    1) el menú completo me queda un poco mas pequeño que el ancho del blog y no entiendo a causa de qué.
    2) la única pestaña que tengo con subpestañas no se me despliega (al menos en mi Ipod) no lo probé en el pc.

    ¿alguna forma de resolverlo? Gracias de antemano.

    ResponderEliminar
  152. Hola de nuevo Samu,

    Por desgracia ningún menú con subpestañas funciona en las plantillas del Diseñador de Blogger :\

    ResponderEliminar
  153. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  154. ami me pasa lo mismo de samu pero al revez el menu se me sale "ancho" que puedo hacer amigo ? aca te dejo mi sitio:http://bestiagames.blogspot.com/

    ResponderEliminar
  155. En el primer código hay una parte que dice width: 100%; cambia ese 100% por 98% u otro valor hasta que se ajuste a la medida de tu blog.

    ResponderEliminar
  156. gracias viejo tu como siempre antento mil gracias

    ResponderEliminar
  157. ola kiesiera saber si se puede editar el html del blog, es decir poner dos efectos distintos a la vez

    ResponderEliminar
  158. nada gracias al final lo e conseguido solo.... :)

    ResponderEliminar
  159. perdon me a surgido otro problema :
    keria saber si en este menú en las subpestañas se puede poner el URL de una pagina web que no sea la pagina blogger , osea que si se puede ; por poner un ejemplo el URL de youtube en una subpestaña de este menu

    ResponderEliminar
  160. te dejo aki el link para que veas que si me funcionan las pestañas pero aun repasando mil veces los URL de las subpestañas.... nada no hay manera de hacerlos funcionar...
    http://elshow15b.blogspot.com/

    ResponderEliminar
  161. Puedes poner cualquier URL que quieras sin importar si es de Blogger o no. El problema es que en las plantillas del diseñador de Blogger no funciona ningún menú de subpestañas.

    ResponderEliminar
  162. Muchas Gracias Potro funciona perfecto.

    ResponderEliminar
  163. hola estoy tratando de usar la barra pero no me despliega los sub menus. tendras idea de por que sera? gracias por la ayuda.
    http://sdtiac.blogspot.com/

    ResponderEliminar
  164. En las plantillas hechas a través del Diseñador de plantillas de Blogger no funciona ningún menú de subpestañas.

    ResponderEliminar
  165. Tengo alguna manera de hacerlo andar entonces? que me recomendarias?
    Muchas gracias por la ayuda.

    ResponderEliminar
  166. En esas plantillas no, no hay modo, o al menos no conozco la forma de hacerlo.

    ResponderEliminar
  167. Hola porto , como comentas que con las plantillas del diseñor de bloger no funciona , me fui de visita a btemplates,mi sorpresa es que las plantillas han sufrido una tranformacion importante, ahora como se cual es la que me deja incluir los submenus desplegables
    un saludo

    ResponderEliminar
  168. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  169. Las plantillas de Btemplates no son una modificación de las plantillas del diseñador sino de las plantillas clásicas de Blogger así que no debe haber ese problema con los menús. Lo que sí debes considerar con esas plantillas es que son muy modificadas y es posible que muchos nombres y elementos de la plantilla sean completamente diferentes a los originales y después puedas tener problemas cuando quieras realizar una personalización.
    Sin duda la mejor opción sigue siendo utilizar la plantilla Mínima de Blogger y en base a ella personalizar la plantilla, pero eso es opcional.

    Saludos.

    ResponderEliminar
  170. Definitivamente y despues de probar varios menú´s me quedo con este que si mal no recuerdo fue uno de los primeros gracias a tu ciudad aprendi a colocar. Con esta plantilla me funcionan las subpestañas que era la razon que no me dejaba colocarlo en anteriores pruebas. en fin, leyendo leyendo, ahora se como ubicarlo junto a la cabecera, pero; quiero que el fondo gris (rectangulo) del menu se alinie con el area blanca de mi plantilla (area de entradas y widgets) y se como cambiar el tamaño de la letra para que ajuste, pero ese fondo no se como hacerlo mas pequeño. Probe cada link de los elemrntos del menu para buscar la imagen y ubicarlo en el codigo, pero nungun link me lleva a esa imagen (rectangulo gris). Me da mucha pena con usted hermano, pero dañando se aprende y preguntando tambien. Se que podras darme tu consejo. Saludos

    ResponderEliminar
  171. otra cosa que surgio. cuando borre los codigos del menu que tenia (tipo dock) quiza boore algo mas que hizo que el fondo gris del que hable en el comentario anterior desapareciera. ahora he empezado el procedimiento de nuevo, he vuelto a borra los codigos de este menu (sexy d) y los he vuelto a colocar siguiendo los pasos y aun so sale el rectangulo gris del fondo, solo sale el de las subpestañas. me volvi un ocho y pensar que este si era el menu definitivo. Potro salvame de esta hermano

    ResponderEliminar
  172. La imagen gris es la primera URL que se encuentra en el primer código, o sea, esta:
    http://2.bp.blogspot.com/_dsEG33PDaHw/S0JD4Lm1ZiI/AAAAAAAAAC8/HOlaXxwCcqs/s320/topnav_bg.gif

    El ancho del menú lo puedes modificar también en esa primera parte donde dice width: 100%; ahí puedes modificarlo por otro valor más pequeño, por ejemplo 95%

    Con el otro problema sólo será cuestión de que revises de nuevo el código del otro menú y veas que has eliminado sólo lo que había que agregar en él y empezar de cero con este menú.

    Saludos.

    ResponderEliminar
  173. listo mi pana. Sencillamente volvi a cargar la plantilla y comence de cero. Menos mal que no habia mucho que recargar. ... Problema resuelto ... hasta pronto

    ResponderEliminar
  174. Potro como se puede hacer para que las secciones esten un poco mas juntas

    ResponderEliminar
  175. Busca esta parte del código:


    ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    position: relative;
    }

    Cambia ese 15px por un valor más bajo para reducir el espacio.

    ResponderEliminar
  176. y por ejemplo si deseo bloquear un video para que no aparezca el menu de flash player, ¿como puedo hacerlo?
    claro usando JAVASCRIPT.
    Gracias

    ResponderEliminar
  177. No he entendido tu pregunta, en el menú tú agregas el enlace del sitio o entrada que desees, no videos.

    ResponderEliminar
  178. HOla, tengo un problema con los submenús, el fondo negro los sobrepasa, éste es el blog: www.bajoluzpropia.blogspot.com

    ResponderEliminar
  179. Lo más seguro es que sea por un estilo de tu plantilla.
    Prueba eliminando todo esto de tu plantilla para ver si así se soluciona:

    #page-navigation { width:960px; height:auto; background: #ccc url(http://3.bp.blogspot.com/_9FoH-7_4Le0/S8eh_8b6wUI/AAAAAAAAAy0/HcxHFabfSXc/s1600/nav-bg.png) repeat-x;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px; }
    #page-navigation .widget-content ul { width:960px; margin:0; padding:0; list-style:none; font: bold 13px/36px "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: lowercase; }
    #page-navigation .widget-content ul li { margin:0; float: left; background: url(http://4.bp.blogspot.com/_9FoH-7_4Le0/S8eiAFwKU6I/AAAAAAAAAy8/G_1JWmsSExU/s1600/nav-li.png) no-repeat right 0; }
    #page-navigation .widget-content ul li a { padding: 1px 20px 3px 20px; color: #ddd; text-decoration:none; text-shadow: #000 0px 1px 0px; }
    #page-navigation .widget-content ul li a:hover { color:#fff; }

    ResponderEliminar
  180. Excelente, ya quedó. Muchas gracias,

    saludos.

    ResponderEliminar
  181. Excelentes aportes Potro.

    Muchas gracias!

    ResponderEliminar
  182. oye potro te queria decir es que a mi el menu se me ve afuera del blog se pasa un poquitito para afuera eso se puede arreglar o no porfavor espero la respuesta

    ResponderEliminar

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