Menú horizontal con subpestañas y buscador integrado 2

24 de marzo de 2013 576 comentarios ,


Hace algún tiempo vimos el menú horizontal con subpestañas y buscador integrado y desde eso me han preguntado cómo hacer ese mismo menú pero de varios niveles, es decir, que las subpestañas del menú también tengan subpestañas. El menú a continuación tiene esa característica, además de conservar el buscador dentro del menú.
Los estilos redondeados en los submenús se han quitado por cuestiones estéticas, pero ya saben que cualquiera de estas monerías pueden personalizarse a consideración y gusto propio.

El menú puedes verlo 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 poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:
/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGGNaAkmwOxBxDVGuTrcxl6pTHKO3VkKVEjPUC0Sn-G-Hwi4XcYtQb9kM-jZtxkCy98zjQG1JwwFtt4m8nX33gB3bTbYlW_JETJeNYRAXUgg0J2nBz_MIolewb-ff6sDKYuDQr23f6c9H/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGGNaAkmwOxBxDVGuTrcxl6pTHKO3VkKVEjPUC0Sn-G-Hwi4XcYtQb9kM-jZtxkCy98zjQG1JwwFtt4m8nX33gB3bTbYlW_JETJeNYRAXUgg0J2nBz_MIolewb-ff6sDKYuDQr23f6c9H/) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYtHNe1CpoSEXOhfTo3FrsEnX4IuqNreDKzbbBsTr1QHHF0sgtwbBtP4ucNm-NgrUkGll625TcQrw-WTi5pz3OI7aNWltO31SWpQ7EVZA-neoq42qilCSAqY_BHwArbHJ15O11FWe2u0k/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Luego entra en Diseño y en un gadget HTML/Javascript pega lo siguiente:
<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>


<!-- Buscador -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</li>

</ul>
</div>
Guarda los cambios y listo. En color verde puedes ver las áreas para cambiar los colores.

Antes de <!-- Buscador --> puedes agregar más pestañas si lo deseas.
Si quisieras añadir otra pestaña simple, agrega una línea como esta:
<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>
Si quisieras agregar una pestaña con subpestañas entonces agrega este código:
<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<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>
Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:
<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Con esta variación del menú podemos agrupar más enlaces y categorías en poco espacio, y que además, al conservar el buscador dentro del menú hace que sea un menú práctico, compacto y útil.


576 comentarios en:

" Menú horizontal con subpestañas y buscador integrado 2 "

  1. Si llegara hacer primera es el fin del Mundo ◔◡◔
    Excelente aporte Potro,

    Muchísimas Gracias y bechotes enormes.✿

    PD: Insistiré y volveré a insistir \ (•◡•) /

    Besys ✿

    ResponderEliminar
    Respuestas
    1. Ojalá y no tengas boca de profeta, si no, hasta aquí llega el mundo ヽ(゚Д゚)ノ
      ¡Besos!

      Eliminar
  2. Hace tiempo tenía ese menú, y precisamente por que las subpestañas no tenian subpestañas lo cambié por otro :/

    Igual agradece :D

    ResponderEliminar
    Respuestas
    1. Pues ahí está por si después te decides a tenerlo de nuevo :)

      Eliminar
  3. Yabadabadooo!!! genial tiene una pinta fantástica y tiene más de lo que buscaba. Muchas gracias por estas y todas las cosas que publicas. Un saludo!

    ResponderEliminar
  4. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Eso depende de la velocidad de carga del blog:
      http://ciudadblogger.com/2011/06/cuando-en-el-blog-aparecen-menos.html

      Pd. Elimino el comentario por el aviso que está al final.

      Eliminar
  5. Que bueno, Potro, más una opción. Que tengas una buena semana
    saludos
    Gaby

    ResponderEliminar
  6. Hola!
    Yo he hecho un menú con pestañas y subpestañas con otro tutorial más antiguo. Mi duda es: si ahora quiero añadír más información o fotos en alguna de las subpestñas ¿cómo lo hago?
    Muchas gracias! la verdad que aún no me creo que lo haya conseguido ya que estoy totalmente pez en estas lides! Eres un genio!

    ResponderEliminar
    Respuestas
    1. Si quieres añadir más pestañas tienes que poner otra pestaña como se indica en el otro tutorial y ahí enlazar las entradas o página que quieras. Si quieres que tenga subpestañas entonces tendrás que quitar el menú que tienes y poner el de esta entrada.
      Saludos.

      Eliminar
  7. Tengo una duda..
    En mi blog tengo una barra con pestañas de menú y con 1 tiene submenús. Los submenús te redirigen a las 'etiquetas' Osea, esto: http://gepe-nails.blogspot.com.es/search/label/AZUL . Hasta ahí bien. Pero luego, en una pestaña del menu quiero poner una pagina que no exista, es decir, que no tenga ninguna etiqueta. Eso se puede hacer? xD
    Quiero algo así como los submenús de esta web http://www.masnailart.com/p/premios.html
    Me explico como un libro cerrado, pero espero que puedas ayudarme jaja Un saludo

    ResponderEliminar
    Respuestas
    1. Hola Gepe-nails, sólo pon el signo de número # en lugar de la URL del enlace, con eso quedará inactiva la pestaña.

      Eliminar
    2. Vale, ahora que lo acabo de leer, me he explicado mal xD
      Quiero dirigirlo a una pagina de mi blog, que aun no está creada, pero que si que quiero crear, el caso es que no se como se crea.. Podría ser una entrada, y pongo el link de la entrada en el submenu, pero no quiero que esa entrada se vea publicada entre las entradas actuales que tengo.
      No se si se me entiende jaja Muchas gracias :)

      Eliminar
    3. Bien, si quieres crear una página (de las que no aparecen en la portada) ve a la sección "Páginas", da click en "Página nueva" y selecciona "Página en blanco".
      Saludos.

      Eliminar
    4. Oh, millones de trillones de gracias :)

      Eliminar
  8. Hola potro:
    Pues he cambiado de diseño y este me gusta más pero cuando vas a contacto el fondo es diferente que en la portada ¿Como soluciono ese problema?
    http://noticiasdevideojuego.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Es por el formulario, el código añade una hoja de estilos que declara que el fondo debe ser blanco y con un margen superior:
      <link href="http://www.emailmeform.com/builder/theme_css/f4AG5n24xl4m0wqc7O" rel="stylesheet" type="text/css"></link>

      Eliminar
  9. Hola:
    Me ha dado la curiosidad de saber si vosotros vais a vender camiseta como el que esta ahí arriba del todo?

    ResponderEliminar
  10. Hola Potro como siempre superándote y excelentes tutoriales.un abrazo.

    ResponderEliminar
  11. Yo uso la antigua desde hace bastante y la verdad me tiene contentísimo.
    Gracias Potro !

    ResponderEliminar
  12. Hola potro:
    pues he puesto en mi blog contacto y mapa del sitio y cuando entro en mapa del sitio me sale en la pestaña esto: https://dl.dropbox.com/u/23889866/problema.png
    entra aquí: http://noticiasdevideojuego.blogspot.com.es/p/mapa-del-sitio.html
    y en la pestaña saldrá asi... y tambien pasa en contacto ¿como puedo solucionarlo?

    ResponderEliminar
    Respuestas
    1. Tal vez tengas que optimizar los títulos:
      http://ciudadblogger.com/2009/05/optimizar-los-titulos.html

      Eliminar
    2. No veo que tengas esos cambios, de hecho no veo ninguna etiqueta TITLE en tu blog, si no tienes el código que se menciona en esa entrada pónselo.

      Eliminar
  13. Estimado Potro, tengo un problema con este código quiero anexarle mi dirección y no lee las entradas. He tratado de contactarme con el creador del mismo, pero no contesta. Si puedes te agradecería enormemente me ayudes con este problema.

    ResponderEliminar
    Respuestas
    1. Hola, no he comprendido el problema, ¿me puedes dar más detalles?

      Eliminar
    2. El problema se genera en el código que se encuentra en mi blog como post destacado. Funciona muy bien con la dirección blogspot, pero cuando coloco la redirección hacía un dominio personalizado deja de funcionar.
      Te pido ojalá me ayudes a encontrar una solución con este código u otra manera de hacer algo parecido. Por favor...

      Eliminar
    3. Si funciona bien con blogspot no hay razón para cambiarlo al personalizado, mientras el gadget funcione no hay razón para cambiarlo.
      De cualquier forma no sé a cuál código te refieres, sólo dices "este código" pero no dices cuál, ni en cuál blog. Con tan pocos detalles me es imposible entenderte :/

      Eliminar
    4. Gracias por responder. Como te decía era el post destacado (se sostiene mediante un código) por eso te lo mencionaba, pero se mejoró solo. Pese a ello, agradezco tú respuesta y voluntad a colaborar. Grandes saludos desde la Patagonia Chilena...

      Eliminar
  14. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  15. Hola. Potro. queria saber si me podrias ayudar a como instalar este slider que me parece muy bueno a cualquier plantilla. http://www.pixedelic.com/plugins/camera/

    ResponderEliminar
    Respuestas
    1. No lo conozco, pero según veo ahí vienen las instrucciones (en "usage"), supongo que en la descarga debe venir el demo para que revises el código fuente. Yo por mi parte lo probaré cuando tenga un poco de tiempo que ahora ando corto de él :)

      Eliminar
  16. Hola Potro,

    Hace ya un buen tiempo que veo tu blog, está genial y gracias a el he mejorado mucho mi blog (Cosas de Javier Becerril). Resulta que llevo unos días volviéndome loco buscando un código html para insertar cuadros de texto en una entrada de blogger, y he encontrado el código, pero no es el que yo quiero, pues lo que pretendo con ese cuadro de texto es meter un código html dentro para que mis lectores puedan incluir un gadget en su blog ¿lo entiendes? Es decir, me gustaría saber como incrustas esos cuadros de texto que usas tu para poner ahí el código como los cuadros que has usado en este post. Por favor necesito ayuda urgente.

    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Cosas de Javier, lo que yo uso son bloques entrecomillados, no sé si lo que estés buscando sea esto:
      http://ciudadblogger.com/2009/04/codigo-para-que-nos-enlacen_26.html

      Eliminar
    2. Hola,

      No es eso lo que andaba buscando, pero muchas gracias de todas formas, tu blog es muy bueno;)

      Eliminar
  17. hola me ayudarias cn el problema que me aparece en blooger Erroor bX-5dvf4a

    ResponderEliminar
  18. Hola, acabo de poner este menú en mi blog de Tengo un conejo y justo encima me aparecen unos guiones, podrás apreciarlo mejor si miras encima del buscador ya que sobresalen dos. (Esto viéndolo con Firefox)
    Si veo el blog con IE, se ven más claramente esos guiones que afean un poco... ¿eso es así en ambos exploradores o es que he puesto algo mal?
    Muchas gracias por tu atención.

    ResponderEliminar
    Respuestas
    1. Hola Maite, elimina el contenido que tengas dentro de .widget ul li, .widget #ArchiveList ul.flat li {

      Eliminar
    2. Genial, ya lo he corregido, muchísimas gracias. Saludos.

      Eliminar
  19. Potro, recurro a ti para que me ayudes en algo.
    Juro que intente solucionarlo por mi cuenta pero se que una parte de código habré borrado de los comentarios.

    El problema es que no se ven las imágenes de los comentaristas, solo se ve la imagen de anónimo aún cuando el comentarista tenga una imagen.

    Este es mi blog: El blog del Nerd

    Espero que puedas ayudarme:l

    ResponderEliminar
    Respuestas
    1. Hola Victor, instala la plantilla original en un blog de pruebas y compara el área de los comentarios, de esa forma sabrás qué le falta. Si tienes un respaldo de la plantilla (todos debemos tener siempre uno) instálalo.

      Eliminar
    2. Ya lo hice, y copie los códigos tal cual y sigue sin resolverse el problema :l

      ¿Conoces algún tutorial o algo paso a paso para restaurar los comentarios?

      Eliminar
  20. Hola Potro!!!
    Definitivamente, tus ideas y aportes son espectaculares para todos los que tenemos un blog. Necesito solicitar tu ayuda URGENTE!!!! y quise enviarte un mail, pero no pude. Por favor ayudame!!!
    Lo que pasa es que hace tres días que mi blog no actualiza las entradas en los blogs amigos, que me tienen enlazada... y ésto es algo que me complica muchísimo, ya que es casi como si ya no existiera y mis blogger amigos, no tienen como enterarse que publiqué....
    Aunque intenté averiguar que podía hacer en internet, debo ser sincera y decirte que no supe que hacer... Creo que el tema tiene relación con los feeds, o me equivoco???. te ruego que por favor, me puedas ayudar y dar una idea clara de lo que podría hacer para poder volver a la normalidad, ya que tu eres un master en la materia...y yo solo soy una simple usuaria fiel de blogger.
    De ante mano muchas gracias!!!!!!!. Estaré muy atenta a tu respuesta!!!

    ResponderEliminar
    Respuestas
    1. Hola Mami de una Monita. Sí, es posible que el problema sea con los feeds, pero sin saber en cuál blog tienes el conflicto me es imposible saber cómo ayudarte :/

      Eliminar
  21. HOla potro una pregunta encontre este enlace en facebook http://aunquenotepuedover.blogspot.com/p/online.html pero cuando entro carga y sigue y nunca abre yo tengo mis dudas xq cuando le quito p/online.html ese parte si carga explica xq ponen esos enlaces si saben que no cargaran

    ResponderEliminar
  22. Hola El potro. Siento molestar pero hace días que estoy intentando solucionar un problema que tengo y quería saber si me podías ayudar. Estoy creando un blog e instalé una plantilla, pero, al ponerla, queda un espacio en blanco entre los post y la columna derecha. ¿Puedo convertir ese espacio en blanco en una columna para insertar gadgets? Gracias por adelantado.

    Te dejo la url de mi blog: http://noticiasdelajuventus.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola nicolas161, de hecho ahí parece que va una especie de sidebar, al menos en el demo original aparece algo:
      http://maxmagdemo.blogspot.mx/

      No sé si tengas que configurar algo más o si la plantilla que descargaste está incompleta, tal vez en la página del autor de la plantilla encuentres más información.

      Eliminar
  23. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola GoreBlast Corpse, el problema no es el gadget sino una entrada publicada, debe ser que quedó abierto algún DIV. Ingresa a cada una de las últimas entradas publicadas y mira en cuál se ve la sidebar de ese modo, en esa entrada es donde deberás revisar su HTML y corregirlo.

      Pd. He eliminado el comentario por el aviso que está al final.
      Saludos.

      Eliminar
    2. Muchísimas Gracias Potro !!!! en verdad no sabes de la que me has salvado, efectivamente se trataba de una entrada problemática, tuve que volver a hacerla, y todo regreso a la normalidad .fue un error con el Spoiler para ocultar y mostrar contenido. en efecto se quedo abierto un DIV

      Gracias por tu ayuda, como siempre eres el mejor en la plataforma!,

      se me fue lo del aviso inferior, lo tomare en cuenta D:

      Eliminar
  24. Hola Potro:
    Ayer acudí a ti, dejándote un comentario, explicándote el problema que tengo en mi blog, sin dejar la dirección del mismo. No se porque no apareció ni el comentario, ni tu respuesta, pero en verdad no se como pedir tu ayuda, si no tienes habilitados los mails...
    Bueno, por si puedes ayudarme, te cuento que mi blog no actualiza las entradas en los blogs que me tienen enlazada y estoy desesperada, ya que ellos no pueden saber que publiqué y disminuyeron a cero mis visitas... Siento que no existo y la verdad es que el blog es algo muy importante para mi. Por favor, te ruego me ayudes y me des algun consejo para mejorar esta ingrata situación. Muchas gracias desde ya!

    ResponderEliminar
    Respuestas
    1. Hola, ya te he respondido más arriba, a veces tardo un poquito en aprobar los comentarios y responder porque ando corto de tiempo entre el trabajo, la familia, y los otros blogs, pero a todos respondo :)

      Eliminar
    2. Hola Potro!!!:
      Muchas gracias por responderme!!!!!!!!!!!!!!!. Te dejaré el nombre del blog, para saber como me puedes ayudar http://mamdeunamonita.blogspot.com/
      La verdad es que he tratado de comprender que hacer, para que mis nuevas entradas aparezcan en las listas de quienes me tienen enlazada, pero la verdad es que me declaro bastante incompetente con el tema... y no descubro cual es el problema, ya que no hice nada anormal y de pronto, mis entradas dejaron de actualizarse...
      Ojalá puedas ayudarme!!!, mira que mis visitas han disminuído totalmente y el contacto con mis seguidores, es muy importante para mi.
      De ante mano, muchas gracias!!!!

      Eliminar
    3. Hola de nuevo. En efecto hay un problema con el feed, si entras a él verás que no abre:
      http://mamdeunamonita.blogspot.com/feeds/post/default

      Mira esta entrada, quizás alguno de esos casos sea el tuyo, tal vez sólo sea un problema con la configuración y está deshabilitado:
      http://ciudadblogger.com/2012/01/problemas-con-el-feed-de-tu-blog.html

      Eliminar
    4. Hola nuevamente!.Gracias por la información. Mira hice todo lo que pude, y quedó con la siguiente URL: http://mamdeunamonita.blogspot.com/feeds/post/default?max-results=10.
      Validé en feedvalidator el blog Http://mamdeunamonita.blogspot.com/ (no me permitió con la dirección que escribí antes y no se si lo que hice estuvo bien)... Luego, mandé el Total ping y me informó que estaba todo bien, pero ingresé a google nuevamente con la dirección anteriormente dada y tampoco la abrió!, ya no se que más hacer...
      Por favor, necesito saber cual puede ser el error, que ya he revisado más de 10 veces, según lo que escriste en la entrada de los problemas con el feed y se supone que estaría todo bien, pero no se me actualizan las entradas aún...
      Y me da una pena y una desesperación terrible.
      Muchas gracias!, me quedo a la espera de tu respuesta!

      Eliminar
    5. ¿Tienes asociado tu blog con Feedburner? Si es así, ¿recuerdas haber hecho alguna modificación en el panel de control de Feedburner?
      ¿Ya has verificado que en la Configuración el blog tengas activado el feed en "Completo"?

      Eliminar
  25. Hola El Potro, hace unos dias te deje un comentario en este hilo http://ciudadblogger.com/2012/04/menu-horizontal-con-subpestanas-y.html esta pendiente de tu aprobacion, ya que lo puse hace dos dias y no aparece aun, lo que te preguntaba bien vale aqui mismo, ya que es el mismo menu, pero mejorado.. podrias ayudarme, lo que te preguntaba era ..que codigo hay que poner para cambiar el buscador simple que aparece aqui tambien por el buscador personalizado de google? gracias llevo varios dias haciendo pruebas pero no logro hacerlo..
    Te dejo la pagina es una de pruebas..

    http://diafragmandoaf8.blogspot.com.es/

    saludos.

    ResponderEliminar
    Respuestas
    1. Hola Diafragmaf8, el mismo día que hiciste la pregunta te respondí, es el comentario #332.1, recuerda que hay que darle click en "Cargar más..."

      Eliminar
    2. Gracias Potro ya lo vi, en eso de "cargar mas" no me habia dado cuenta y ya me parecia raro en ti , que los contestas todo..

      saludos..

      Eliminar
  26. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Leviantart, tal vez debas agregar metas para Facebook (busca en Vagabundia) pero igual dicen que subiendo las imágenes en PNG es más fácil que se muestren en Facebook, haz la prueba de esto último con una nueva entrada y mira si resulta.

      Pd. Elimino el comentario por el aviso que está al final.
      Saludos.

      Eliminar
    2. Intenté lo segundo y nada, busqué en vagabundia pero solo conseguí esto <Contenido Meta = " descripción de su blog 'name =' description '/>
      <meta content = ' palabra clave su blog 'name =' keywords '/>

      lo que no entiendo es esto descripción de su blog, palabra clave su blog, los meta estaban en mi plantilla, otro cosa por ejemplo si yo hice una copia de mi plantilla y esta copia se la di a alguien y luego este la subió a su blog, es posible que algunos HTML de mi plantilla se hayan juntado o mezclado y esto este generando el problema de las publicaciones de los entradas por facebook??

      Eliminar
    3. A esto me refería:
      vagabundia.blogspot.com/2011/07/optimizar-las-etiquetas-meta-para.html

      Lo otro no, sí puede haber problemas con Google pero no con Facebook.

      Eliminar
  27. Hola Potro, una duda:
    ¿Hay alguna forma de que las páginas de abran de una forma más dinámica, como desplegándose, o de alguna manera un poco original?

    ResponderEliminar
  28. Hola Potro, como siempre, millones de gracias por tu aporte y tus explicaciones tan sencillas...te comento...Yo ya tenía mi menú tal cual lo quería, únicamente quería iinsertar el buscador... pero le he insertado directamente, y si lo pongo en la medida q indicas, me aparece debajo del buscador, y si le reduzco la medida, de 228px a 140px por ejemplo, se me corta la imágen dell buscador y no me aparece el redondeo del final...¿cómo lo soluciono?? he probado diferentes medidaas y siempre pasa.... gracias!!!!!

    ResponderEliminar
  29. Ya lo he solucionado, muchas gracias de todas formas :)

    ResponderEliminar
  30. Hola Potro... Tengo que pedirte un ayuda... Tuve que abrir un nuevo blog (me inhabilitaron el anterior) y puse sidebars con lista de enlaces... Pero ahora cuando quiero poner o quitar enlaces me dice "que corrija errores de este formulario". No se qué es lo que pasa, solo son enlaces. Agradezco si podés ayudarme. Saludos

    ResponderEliminar
    Respuestas
    1. Hola Lolilu, me parece que hay un error con el gadget, a mí me pasa lo mismo desde el lunes :(

      Eliminar
    2. Ahh, sisi, entonces debe error de blogger y no mío, jajaja. Perdón, pero es que como siempre me mando "macanas", le escribí a "mi salvador", jajaja- Entonces a esperar a ver si ellos lo solucionen.
      Gracias totales, como siempre. Saludos ;)

      Eliminar
  31. Hola de nuevo, me he dado cuenta que cuando accedo a una página dándole a las etiquetas, al salir el enlace de "Mostrar todas las entradas" interfiere con el menú desplegable y no se puede hacer click en las pestañas que bajan. ¿Se puede corregir ese problema? Gracias. Te dejo un enlace para que veas a lo que me refiero. http://conejoinfo.blogspot.com.es/search/label/alergia

    ResponderEliminar
    Respuestas
    1. Hola Maite, puedes arreglarlo con estos estilos:
      .status-msg-wrap {
      z-index: 0;
      }

      Eliminar
    2. Muchas gracias, ¿pero dónde pongo eso?. Yo es que de estas cosas no sé nada de nada... =P

      Eliminar
    3. Muchas gracias ¿pero dónde lo pongo? Es que de estas cosas no sé nada de nada =P

      Eliminar
    4. Todos los estilos van siempre antes de ]]></b:skin>
      Saludos!

      Eliminar
    5. Gracias en serio, por tu amabilidad y tiempo dedicado en ayudar a los demás. Saludos.

      Eliminar
  32. Hola otra vez:
    Perdona que te moleste tanto, pero le he añadido un scroll infinito al blog para que cargue todos los post desde la página principal, y va bien... Le he añadido con "Compartidísimo" (http://www.compartidisimo.com/2012/11/scroll-infinito-en-el-blog.html)
    El problema es que cuando carga los posts, estos ya no aparecen con la opción de "Leer más...", sino enteros.
    ¿Qué hago?
    Para lo de "Leer más..." he usado esta entrada tuya: http://ciudadblogger.com/2010/06/leer-mas-automatico-menos-en-el-primer.html

    ¿Cómo lo soluciono? Y, si no lleva solución, ¿cómo lo elimino?
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. No sabría responderte eso Miguel, Karla sería la más apropiada para hacerlo. Si quieres eliminar ese Leer más sólo deshaz los pasos que seguiste.

      Eliminar
  33. hola potro, soy un perfecto novato en este campo de blogger. mi problema es que no hay manera de que, en la página principal, se vean más de cinco entradas. podrías ayudarme? Un saludo y gradias.

    ResponderEliminar
    Respuestas
    1. Hola Molongofw Juan, mira esta entrada:
      http://ciudadblogger.com/2011/06/cuando-en-el-blog-aparecen-menos.html

      Eliminar
  34. Hermanaso, muy buen aporte, resulta que hice tal cual la cosa pero no veo ningun despliegue de submenus!!!??? que estare haciendo mal?

    ResponderEliminar
    Respuestas
    1. Hola, ¿has seguido los otros pasos antes en caso de que uses una plantilla original de Blogger?

      Eliminar
  35. oye potro como puedo hacer para colocar una imagen en los comentarios que al hacer click en ella redireccione a una url ?

    es quelo he intentado con este código <(etiqueta IMG ACA ) src="AQUI VA EL LINK DE TU IMAGEN">


    pero al intentar ponerlo medice que Tu HTML no puede aceptarse: No se permite la etiqueta.: IMG

    ResponderEliminar
    Respuestas
    1. Hola camilo, ¿una imagen en un comentario? no se puede, Blogger no lo admite.

      Eliminar
    2. si amigo pero entonces como podrá sabes si talvez cambiando LA CAJA DE COMENTARIOS POR UNA DIGAMOS AJENA A BLOGGER FUNCIONE?

      Eliminar
    3. No sé decirte, sé que existen algunos gestores de comentarios como Disqus, pero nunca he visto que alguno permita insertar imágenes.

      Eliminar
  36. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola ErsFasteN, al estado HOVER del elemento que quieras ponle el color que deseas y una transición para que tenga desvanecimiento:

      color:#fff;
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;

      Para las etiquetas es igual, sólo que en lugar de un color sería un background:

      #Label1 li {
      background:#ccc;
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      }

      Eliminar
    2. El primer codigo, el de HOVER, donde lo debo aplicar, en que parte de la plantilla, osea antes o despues de que codigo?. Quiero que esos efectos sean en TODOS los LINKS del blog.

      Eliminar
    3. Y el segundo en donde debo aplicar?. Perdon, es que nose donde ponerlos a ninguno de los 2 :(

      Eliminar
    4. Los estilos van siempre antes de ]]></b:skin>
      Si quieres aplicarlo a todos los enlaces mira esta entrada:
      http://ciudadblogger.com/2009/04/personalizar-links.html

      Eliminar
    5. Potro con respecto a los Links quedo GENIAL!, pero el unico problema fue lo de las etiquetas, yo no me referia a cambiarle el color al Gadget de las Etiquetas, osea si pero solo a las etiquetas que yo les pase el mouse por encima.

      Eliminar
    6. Otra cosita mas Potro, quisiera agregar el efecto de los Links pero en el recuadro de las Etiquetas Fieldset y Legend, como podria aplicarlo?.

      Eliminar
    7. Cuando necesites que suceda algo al pasar el mouse usa el HOVER:

      #Label1 li:HOVER {
      ....
      ....
      }

      Igual para lo otro, de hecho se aplica a cualquier elemento que quieras, sólo identifica la clase, ID o etiqueta y aplícaselo. Haz tus pruebas.

      Eliminar
    8. Logre aplicarlo en las Etiquetas, pero no en el recuadro de Fieldset y Legend. No encuentro la manera, ya lo puse de esta manera:

      #Fieldset li:HOVER {

      Tambien lo puse en el codigo que me das en la entrada respectiva a Fieldset y Legend, lo puse de distintas formas pero no funciona. Me podrias decir tu como hacerlo? :\

      Eliminar
    9. El FIELDSET no es un ID sino una etiqueta, sólo los IDs llevan el signo de gato. Las etiquetas no llevan nada, se ponen así nada más. Pero tampoco es una lista, así que no lleva el LI

      fieldset:hover {
      ....
      ....
      }


      http://ciudadblogger.com/2011/07/usando-la-etiqueta-fieldset-y-legend.html

      Eliminar
    10. Gracias potro, funciono perfectamente!. Tendre en cuenta sobre los ID y Etiquetas, y sobre las listas (li)

      Eliminar
  37. Hola, soy nueva en esto de los blogs, y no encuentro lo que dices de "Luego entra en Diseño y en un gadget HTML/Javascript pega lo siguiente:".

    Si me voy a "diseño", que es donde se añaden los gadgets con el buscador de gadgets, no veo ningún sitio donde editar HTML/Javascript. Si entro a editar los gadgets que ya tengo, ninguno da la opción de ver ni modificar su código.

    ResponderEliminar
    Respuestas
    1. Diseño > Añadir un gadget > HTML/Javacript.
      Ahí debes pegar el código.
      Saludos.

      Eliminar
  38. Potro tengo un codigo para hacer que los gadget se esten mas juntos, o creo que era para que esten mas cerca del titulo. Puedo pasartelo por aqui?

    ResponderEliminar
    Respuestas
    1. Es un codigo, para que los gadgets esten mas cerca del titulo de los mismos, por ejemplo tengo un Gadget de Seguidores, y el titulo esta un poco LEJOS del gadget, entonces con este codigo estan mas juntos. Queda un poco mejor. Nose si ya lo tendras, pero te gustaria que te lo pase por aqui?

      Eliminar
    2. Por supuesto, todo lo que sea para compartir es bienvenido :)

      Eliminar
    3. Potro aqui estan los codigos con los que consegui ajustar perfectamente todos los Gadgets, que serian añadiendo estos codigos antes de ]]> :

      .widget {
      padding-top:2px;
      padding-bottom:2px;
      margin-top:2px;
      margin-bottom:2px;
      }


      Perdon por demorar en escribir, no habia visto el mensaje, espero que ayude!.

      Eliminar
  39. Me pregunto porque no sacas mis comentarios y no los contestas, no lo entiendo!

    ResponderEliminar
    Respuestas
    1. Hola Magdalena, todos los comentarios te los he respondido, recuerda que en entradas de más de 200 comentarios tienes que dar click en "Cargar más..." para ver todos los comentarios, incluyendo los tuyos.
      Los únicos comentarios que he eliminado son los que has repetido varias veces, el resto están publicados y contestados.
      Saludos.

      Eliminar
    2. gracias potro, es mi inexperiencia, no consigo encontrarlos, pero seguiré buscando, gracias de nuevo.

      Eliminar
    3. Descuida, a muchos les pasa ;)
      Te recomiendo usar el link "Suscripción por correo electrónico" que está debajo de cada formulario de comentarios, así sabrás cuando alguien más comente en la entrada donde dejaste el comentario.
      Saludos.

      Eliminar
  40. ayuda nose ke pasa ke no me deja y sigo todo los pasos.

    ResponderEliminar
    Respuestas
    1. No sé cómo ayudarte si no sé en cuál blog lo has puesto.

      Eliminar
    2. bcpf12012.blogspot.com
      Nose ke pasa ke no me deja.

      Eliminar
    3. Lo que sucede es que más arriba tienes unos estilos para los comentarios a los cuales le quitaste la llave de cierre, eso hace que todo lo que haya debajo no funcione:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      .comments .comments-content .icon.blog-author {
      background-repeat: no-repeat;
      background-image:
      .comments .comments-content .loadmore a {
      border-top: 1px solid #999999;
      border-bottom: 1px solid #999999;
      }

      Eliminar
    4. perdona potro eso ke me has enviado: .comments .comments-content .icon.blog-author {
      background-repeat: no-repeat;
      background-image:
      .comments .comments-content .loadmore a {
      border-top: 1px solid #999999;
      border-bottom: 1px solid #999999;
      }
      Eso es lo ke debo poner o lo ke está mal?

      Eliminar
    5. vale ya me sale pero me sale en la parte en la parte de abajo en verde la de arriba porke?

      Eliminar
    6. Al background de tu menú le falta una F en el código, son hexadecimales, o sea, de 6 caracteres, el tuyo tiene cinco nada más: #FFFFF

      Eliminar
  41. Hola Potro, genial tu blog, se aprende muchísimo, quería preguntarte para usas este menu desplegable pero yo querría quitarle el buscador, es molestoso y no me sirve, he probado a borrar la parte

    #search {
    width: 228px; /* Ancho del buscador */
    height: 22px;
    float: right;
    text-align: center;
    margin-top: 6px;
    margin-right: 6px;
    /* Imagen de fondo del buscador */
    background: url(http://4.bp.blogspot.com/_qgZA1ny_dAs/Szuhn02zO6I/AAAAAAAADdI/u2etpRWlwF8/s1600/search-bar.png) no-repeat;
    }
    #search-box {
    margin-top: 3px;
    border:0px;
    background: transparent;
    text-align:center;
    }



    y se me quita de la derecha, pero vuelve a salirme en el lado izquierdo. es un cuadrado blanco que pone "buscar". en otro blog que tengo logue quitarlo, pero en este no soy capaz...gracias!!

    ResponderEliminar
    Respuestas
    1. Hola, sólo elimina el código del buscador:

      <!-- Buscador -->
      <li>
      <form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
      <input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
      </li>

      Eliminar
  42. Tengo un pequeño problema, quiero disminuir el ancho de la barra (lo sé) pero después quiero centrar la barra, ajustarla al centro, ¿es posible? ¿qué tengo que modificar?

    ResponderEliminar
    Respuestas
    1. Tal vez puedas aplicarle un margen izquierdo al contenedor principal, por ejemplo:

      #menuWrapper {
      margin-left:100px;

      Eliminar
  43. Hola Potro! Llevo mil horas intentando saber por qué no me funciona este tutorial.
    Este es mi blog: http://amande9.blogspot.com.es/

    Si pego el estilo antes de ]]> no me más que letras arriba del blog, y si lo pongo después, me sale el menú horizontal, pero al escribir el gadget en HTML/Javascript, no se me desplegan las pestañas.

    ¿Qué deb hacer?, estoy desesperada :( un beso! Mercii

    ResponderEliminar
    Respuestas
    1. Hola, el código de los estilos debe ir justo antes de ]]></b:skin> no antes de <b:skin><![CDATA[/*
      También debes seguir los pasos que se mencionan en el enlace que está en el aviso.

      Eliminar
    2. He hecho lo que me dijiste y me aparece el menú horiontal, pero sigue sin desplegarse. Las pautas del aviso las seguí; quizás otro error tonto?

      Eliminar
    3. AH! Por fin lo conseguí! Siento ser tan novata pero es mi primer blog! Una última pregunta, para hacer el menú un pelín más grande y que se ajuste mejor al tamaño escrito de mi blog?

      Eliminar
    4. Hola de nuevo, en donde dice /* Ancho del menú */ puedes modificar esa área.

      Eliminar
  44. Hola Potro!
    Tengo un problemilla, te cuento a ver si puedes echarme una mano.
    Mi blog es de manualidades, a si que tengo puesto el menú del listón, que le va bastante bien, pero este menú me parece bastante más útil.

    He "combinado" los códigos de ambos menús, hasta ahí todo bien. Pero al guardar los cambios en la plantilla me aparece un punto negro al lado del nombre de la última pestaña, y no sé como identificarlo en el código para quitarlo.

    Mi blog es craftiemarie.blogspot.com

    Si pudieras echarle un ojo y decirme en que fallo te estaría muy agradecida.
    Un saludo ;)

    ResponderEliminar
    Respuestas
    1. Has hecho muy buen trabajo Marie :)
      Para quitar ese punto sólo añade debajo de #crosscol ul li { esto:
      list-style: none;


      Saludos.

      Eliminar
    2. :D
      Ya está solucionado! Mil gracias Potro!
      Encima la respuesta ha sido súper súper rápida! A sí da gusto, de verdad ;)

      Eliminar
    3. Te juro que no lo hago por molestar, pero me ha surgido otra cosa xD

      Ahora no sé por que ****** el texto no queda centrado en la barra de menú, he conseguido centrar el cajón de búsqueda, pero por más que toco no hay manera con el texto >.<

      Ya que estamos, me gustaría preguntarte si hay manera de reducir el espacio que queda entre la barra del menú y la fecha y el título del gagdet.

      Se despide; La pesada ;)

      Eliminar
    4. No es ninguna molestia, para eso es este blog ;)
      Aplica ambos estilos para resolver ambas cosas:
      #crosscol ul {margin-left: 30px;}
      #HTML1 {margin:0;}
      .main-outer {margin-top:-10px;}

      Eliminar
    5. Muchas gracias Potro!
      Menuda paciencia tienes, te ganarás el cielo por esto ;p

      Eliminar
  45. Este comentario ha sido eliminado por el autor.

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

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

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

    ResponderEliminar
  49. potro tengo un problema... no sé si a alguien más le pasa. En mi Ipad no se visualiza el menú, cuando le doy a mi página www.profedeele.es en el primer segundo se visualiza, pero después se va y queda en blanco, desaparece el menú. ¿A qué puede ser debido?

    ResponderEliminar
  50. Hola gracias por la información, pero ¿Comó puedo hacer para agregar mas de dos "links url" en una pestaña?, es decir si tengo varios post que quiero incluir a una sola pestaña en el menú sin sub-pestañas, ¿Qué debo hacer?

    ResponderEliminar
    Respuestas
    1. Usa etiquetas en tus entradas y luego enlaza esas etiquetas:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
  51. Gracias por el menu, la verdad es que tenia el anterior que pusiste pero este me viene mucho mejor...peor tengo una gran duda D:!! si añado muchos menus/submenus..eso seria malo para el tiempo de carga de la página? es que me da algo de miedo poner demasiado en las plantillas.

    Gracias por todo tu trabajo ^^eres de gran ayuda

    ResponderEliminar
    Respuestas
    1. Cualquier elemento que se añada es "algo" que el navegador tiene que cargar, aunque en este caso al ser sólo HTML no sería muy significativo ese tiempo de carga.

      Eliminar
    2. Entiendo gracias por responder ^^ y otra duda..en el anterior menu se podia modificar el espacio entre pestañas (de las de arriba del todo) en este se podria? es que queria poner todas las letras y no me caben.

      Gracias de nuevo ^^

      Eliminar
    3. El ancho es autoajustable, no está definido sino que se hace más angosto o más ancho según el contenido del texto de la pestaña.

      Eliminar
  52. como le hago para que cuando le den a una pestaña no se habra nada, y solo se pueda entrar a los sitios mediante las Sub pestañas?

    Ej. Pestaña -> Pestaña 1
    Sub Pestaña -> Pestaña 2
    Sub pestaña -> Pestaña 3

    Lo que digo es que al dar a pestaña 1 no se abra nada, pero al dar a la 2 y a la 3 si que se abra la página que yo les ponga

    ResponderEliminar
  53. Perdona ser tan pesada >.< pero es que ami no me salen las sub páginas, y e copiado exactamente el código como lo tienes puesto

    ResponderEliminar
    Respuestas
    1. Habría que ver en cuál blog lo has puesto. En cuanto a lo primero en vez de poner una URL pon el signo de número #

      Eliminar
  54. Ahora Puedes Explicarlo Para la Nueva Interfaz de Edicion Html De Blogger?'

    ResponderEliminar
    Respuestas
    1. Ok Ya me di Cuenta Muchas Gracias Potro ;) Es que cuando le doy CTRL+F Y Busco el Codigo nunca Aparecen pero ya me adapte al nuevo diseño Gracias :D

      Eliminar
  55. este es el blog : http://librosjuvenileselbuho.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. No veo en el código las subpestañas, parece que las has eliminado.

      Eliminar
    2. si, las elimine por que no me salian, espera ahora lo pongo y cuando puedas lo miras

      Eliminar
    3. Es porque no están completos los pasos que se deben seguir para quienes usan las plantillas del Diseñador, debes seguir todos los pasos que se mencionan en el aviso, con eso no tendrás problema.

      Eliminar
    4. >.< siento ser tan pesado pero es que soy muy torpe para estas cosas..

      he descubierto que me falla, es que no borre esto:



      pero borro lo que tienes puesto en rojo (class='tabs'), y sigue igual, no se que hay que borrar exactamente, por que no se me pone nada en rojo.

      Y una vez más disculpa mi torpeza

      Eliminar
    5. Aún queda otro class='tabs section' por ahí, debes buscar todos los que encuentres y eliminar lo que se indica.
      Saludos.

      Eliminar
    6. muchisimas gracias ya consegui ponerlo :) y siento mucho a ver sido tan pesado >.<

      Eliminar
  56. Los segui todos pero ese no era el problema, el problema era que aunque lo estaba poniendo el el lugar indicado tenia otro codigo hay mismo y no podian estar abajo de ese codigo y cuando lo puse arriba de ese codigo que es el de las redes sociales funciono de una vez, pero gracias de todas forma, ya esta resuelto. Gracias Potro!

    ResponderEliminar
  57. Hola de nuevo Potro, disculpa las molestias pero queria comentarte una duda acerca del menu desplegable pues he intentado algo de mil maneras y no logro hacer lo que yo quiero.
    Tengo este blog sobre las cofradias de mi pueblo,
    http://passioostippensis.blogspot.com.es/
    y este es mi menu desplegable:






    ahora quiero que en la pestaña de "hermandades" salgan dos subpestañas, una que ponga pasion y la otra gloria,
    a su vez, dentro de la de pasion se abren otras subpestañas y de la de gloria otras tambien, eso es lo que no se hacer, pues al mirarlo y hacerlo tal como pone arriba lo he probado de mil formas y lo que no logro es cerrar la subpestaña de "glorias", pues no se por que pero me incluye las pestañas siguiente de arriba del todo (reportajes, videos, diseños...) como si fuera parte de esa subpestaña

    espero que sepas a lo que me refiero y mil gracias de adelanto

    ResponderEliminar
    Respuestas
    1. Hola Nono, lo que sucede es que no estás creando y cerrando bien las etiquetas de las subpestañas. No he podido ver el código que pusiste, pero si el menú que usas es el mismo de esta entrada entonces ponlo tal como está, no elimines nada, después de que pongas los nombres de las subpestañas que deseas (el ejemplo ya las tiene) entonces quita las que no quieras y usa la Vista Previa para asegurarte que todo está bien. Recuerda que cada grupo de enlaces va siempre entre <ul> y </ul>
      o <ul class='sub'> y </ul>

      Eliminar
    2. hola potro, no te pude poner el codigo porque no me deja ponerlo en este mensaje, si me das tu correo te lo mando y lo ves, si no es molestia, por lo demas voy a intentar hacer lo que me has dicho, si no, cogere el que está de ejemplo e intentare adaptarlo al mio. mil gracias!

      Eliminar
  58. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola, si el menú no tiene la opción de subpestañas entonces tienes que quitarlo y poner uno que sí tenga esa opción.

      Pd. Elimino el comentario por el aviso que está al final.
      Saludos.

      Eliminar
    2. Quitar el menú no, pero ponerlo sí, hay varios tutoriales, el de esta misma entrada es justamente uno de ellos.

      Eliminar
  59. Hola como estas? No encuentro ]]> para pegar antes de eso los codigos, si me puedes ayudar te lo agradeceria.

    ResponderEliminar
    Respuestas
    1. Hola roque, da click en la pestaña que está junto a <b:skin>...</b:skin> para que se expandan y encuentres esos códigos.

      Eliminar
  60. muy buen aporte ! te hago una consulta las pestañas o subpestañas, te pueden redirigir a etiquetas ??? o a donde te redirige ?

    ResponderEliminar
    Respuestas
    1. Sí, sí pueden:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
    2. Genial !! Muchas Gracias Capoo

      Eliminar
  61. Potro una pregunta, el menu podría ponerse en un degradado de dos colores?? como se podria hacer eso?

    ResponderEliminar
    Respuestas
    1. Sí, sólo cambia esto:
      background:#333; /* Color de fondo */

      Por algo como esto:
      background-image: -moz-linear-gradient(top, #FFFFFF, #696969);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.0, #696969));

      En la red encontrarás varios tutoriales acerca de los gradiantes CSS.

      Eliminar
  62. ¡Hola! Primero, que me encantan tus tutoriales y, segundo: ¿hay alguna forma de utilizar un menú de estos para agrupar entradas con la misma etiqueta? Si es así, ¿cómo se hace?

    Quiero decir que, por ejemplo, en mi caso quiero poner un menú con varias opciones (ej: Novelas - Relatos - Cuentos, etc.) y que, los submenús de éstos, fuesen los títulos de los escritos (ej: Novelas -> La chica del lago) y que al darle al título, se apareciesen todos los capítulos de esa novela (en mi caso escribo, y voy colgando capítulo a capítulo). Esto, más que nada, sería para tener un poco de organización en las entradas. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Carla, usa etiquetas para organizar tus entradas y enlazar dichas etiquetas con este o cualquier otro menú:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
  63. Hola, es posible cambiar el estilo de fuente??

    ResponderEliminar
    Respuestas
    1. Claro, arriba de font-family: puedes añadir los estilos que quieras.

      Eliminar
  64. Respuestas
    1. Da click en la flechita que está junto a <b:skin>...</b:skin> para que se expandan los estilos y lo encuentres.

      Eliminar
  65. Buenas Noches Potro

    Disculpa la molestia,pero me es muy importante tu ayuda

    Tengo pagina en Facebook y necesito para ella varios menús desplegables para mis diferentes productos ( Almuerzos,desayunos ,postres,etc,etc ) .
    Desearía saber si el código que nos regalas, sirve para tal fin .
    Soy neófita en estas artes .Si me llega a servir, desearía me ilustres ,como y en donde debo pegar el codigo .

    Mil gracias por tu amable atención

    ResponderEliminar
    Respuestas
    1. Hola Abu Mynam, cualquier menú como el de esta misma entrada te servirá, en cada pestaña podrás agrupar subpestañas donde puedes enlazar las etiquetas de tu blog, páginas, etc.

      Eliminar
  66. Hola Potro: Yo quisiera saber como puedo poner esta barra de menus a todo lo ancho de la pantalla asi como se ven los blog de yahoo en español....

    ResponderEliminar
    Respuestas
    1. Hola David, tendrías que ponerlo arriba de todo el blog, por ejemplo después de <body>
      Tiene que ser así para que el menú ocupe el ancho de toda la pantalla.

      Eliminar
  67. Muy buenas Potro tengo una duda, acabo de añadir tu menu a mi blog y el probleman que tengo es que paso el cursol por el menu y no se despliegan los submenus. ¿como lo podria solucionar?

    ResponderEliminar
  68. Hola, he puesto lo mismo que has dicho y no me salen las subpestañas..
    Pásate por mi blog y lo verás:
    www.solofifaplay3.blogspot.com

    ResponderEliminar
  69. Muy buenas tengo un problema con el menu y es que no se me despliega el submenu cuando paso el cursor.

    ¿Cual es el problema?

    ResponderEliminar
  70. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  71. hola cuando busco ]]> me dise como que no esta que hago ayuda gracias

    ResponderEliminar
  72. Hola MOISES, no sé si sea por la plantilla o alguna modificación que hiciste a la misma, el buscador como tal no requiere pasos adicionales, es un buscador HTML sencillo como cualquier otro.

    ResponderEliminar
  73. Hola Potro no me salen las subpestañas.
    Este es mi blog: solofifaplay3 recuerda.blogspot.com
    No me deja enviar el HTML del gadget...

    ¿Hay algún error?
    ¿Cómo lo arreglo?
    Gracias Potro

    ResponderEliminar
  74. Hola Potro me gustaria saber como podria cambiar el ancho de los submenus, esque ahroa mismo lo que le tengo puesto se sobresale del color del sub menu y se ve algo feo.

    Un saludo

    ResponderEliminar
  75. Hola!he instalado el banner,pero tengo un problema y es que si pongo el html justo debajo de la imagen del banner los submenus del menu no salen,ahora si o pongo encima de la columna del blog si,pero claro el menu se ve reducido :( como lo arreglo?

    ResponderEliminar
  76. Hola Potros
    antes de nada darte las gracias por todos tus tutoriales. No se si lo habrás contestado antes pero el fondo del buscador no lo consigo cambiar. He probado todos los códigos y solo se cambia el fondo de detrás del buscador pero el de las pestañas no. Te dejo mi blog por si le quieres echar un vistazo. mynameislaragarcia.blogspot.com

    ¡un saludo!

    ResponderEliminar
  77. Hola Potro. Gracias por el código. Me gustaría saber si existe forma de centrar de manera vertical y horizontalmente el menú. Quiero ponerlo bajo mi cabecera y se queda alineado a la izquierda y soy incapaz de modificarlo. Gracias.

    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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger