Menú deslizante abajo del blog

14 de marzo de 2012 256 comentarios ,
Esta es una variante del Menú deslizante arriba del blog que habíamos visto antes y que a la mayoría le gusto por lo elegante que es y por lo útil que resulta para ahorrarnos espacio. Muchos habían pedido ese mismo menú pero a la inversa, es decir, que el menú se mostrara abajo del blog y que se abriera hacia arriba. Así que he cambiado las imágenes y modificado los estilos para tener el menú como algunos deseaban: abajo y flotante.
El menú sigue teniendo tres secciones, un área para que el lector se suscriba por correo, dos menús verticales, y un área de íconos sociales a los cuales se les ha agregado el de Google+.
Puedes verlo en este blog de pruebas.

Para poner este menú deslizante debajo de la página entra en la Edición HTML y después de <head> pega el siguiente script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#open").click(function(){
$("div#panel").slideDown("slow");

});
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});

//]]>
</script>

Ahora antes de ]]></b:skin> pega los estilos:
/* Bottom Sliding Menu
----------------------------------------------- */
.clearfix:after {content: &quot;.&quot;;display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBsi0V6kKMRwYH2Kix69oXzp8v0x6SaJhKbAjQ24KCALS5bI0GPfbNH-3lif12ZT1I64M-D2CrnSdcv8nJI5UdHWW5RWjsOblK26KNCU0g-Q2ArdQSadCLc8DB28l8x10ImHM1Jp516buP/s42/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
display:block;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxHqvpMoFGa8tAwf00IgkV5VNV9ukvNu9vjn9rO6CRvhJsW2JxvGO98FDzoQ0BlVP9w_wboFreMxw014YkNh9ZoBTw4CwQSikSTdFMGNPwB44u7zVW6Ydp1gUN4hZoOG-fdGSMz2rMN_U/s42/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzAdJ6n33lDwKWQHzKMpHwR7LU8HAVnjT9tWH3wGs0JKkERukeg7hqjfwnVyLPxvwTBQ60FIGQyU4lXdBpA1psNJXagz0WP51f_TEuJaJlx3dEUCfGLQde-iqyy4FAW0o6iGT8EDmYhlZl/s42/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho-9_oN0nhQxYScbNRsNI1KMqQuaEJIi1PxFVF5aMfq2gbsygWWZU4ikL-pU0U5c5G6sxLTvJY7siaKntqT2ZTIdRZUkDYiP0GffF5cyJBdOYoqtIHzIZPtaSUkc-wuK3utA9bOKj_yyul/s42/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZLfnlF3RFPKLOGyBZDp8UpsFDerQEbz7MC0wOYfG4LhvG69QX87bWPsf8D05h3MQBlNkAPm2OxYAMaO-LnbPSc53a3ldDse806IqdEepsXJ-mchKhidliSj3gjBygWqjuAq1KpfTFJw_/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolDut0W1PUSFkEYJ40GMeJ9MH7BsRgAHyx4OXQdV4kEQYbW-b3jh_3yKKhHJ_vA8KuYEioqLTVlAxmcZ7RModPk2pO5c_Axn-hOsduVCb3SlNI2vsoPJZjVrOLpUhBDJofZ5j-Z6hYqET/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZLfnlF3RFPKLOGyBZDp8UpsFDerQEbz7MC0wOYfG4LhvG69QX87bWPsf8D05h3MQBlNkAPm2OxYAMaO-LnbPSc53a3ldDse806IqdEepsXJ-mchKhidliSj3gjBygWqjuAq1KpfTFJw_/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolDut0W1PUSFkEYJ40GMeJ9MH7BsRgAHyx4OXQdV4kEQYbW-b3jh_3yKKhHJ_vA8KuYEioqLTVlAxmcZ7RModPk2pO5c_Axn-hOsduVCb3SlNI2vsoPJZjVrOLpUhBDJofZ5j-Z6hYqET/s1600/bt_close.png) no-repeat left -19px;}

#toppanel {
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px; /* Alto del slide */
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #FFFFFF;
text-align: center;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzO_zP2I1A29XisHRgFOXz-woTfmImogQ7tCJXkHtZa0opfY27esrzDLvnX06rcePFi90GWV3z8b312IsiN1pkcHimuPo_8N0Ybq0SooA9av3YWs6RLQ9DZwBxLvkaJKtlcBhWgDmQJSYu/s1600/bt_register.png) no-repeat 0 0;
}

#slide-menu {
width: 160px;
float: left;
}
#slide-menu2 {
width: 160px;
float: right;
}
#slide-menu ul, #slide-menu2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#slide-menu ul li a, #slide-menu2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN2P72mkX9MjP5JKYMEKiTvrC3CUcU7SgJm8VjHOzFGRUvg1-XIHgHZCPLjCOY040YF_Zzfzj64UT_I5Q2Bjjce4bCsSQHtRtzHOg3E_LrNor56TK_z6_foS1bmW1yPXuhclC-IMIeC8-C/s1600/bullet_blue.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#slide-menu li, #slide-menu2 li {display: inline;}
#slide-menu a, #slide-menu2 a{
color: #FFFFFF;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 160px;
}
#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {
color: #999;
text-decoration: none;
}
#slide-menu a:hover, #slide-menu2 a:hover {
color: #FFFFFF;
}
body#layout #toppanel {display:none !important;}

Por último pega antes de </body> la estructura del menú:
<!-- Inicio bottom sliding menu -->
<div id='toppanel'>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hola invitado!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='javascript:void(0);' id='open'>Abrir menú</a>
<a class='close' href='javascript:void(0);' id='close' style='display: none;'>Cerrar menú</a>
</li>
<li class='right'/>
</ul>
</div>


<div id='panel'>
<div class='content clearfix'>

<!-- Primera sección -->
<div class='left' style='width:240px !important'>

<h4>Hola, Bienvenido a mi blog!</h4>
<p>Puedes seguirnos en las redes sociales o suscribirte al feed.</p>

<div align='center'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3G5driDmFJI92-CajSofANQpA2PfiQd4cpgMxBHZUqIPKMidAE0qr9hccV2rbhSgbyY396B9HzKmSEUMAcYip6Uj-zyMQiWGqcBuKB8UzgmeZNUbSPX1-m_IXazgdj3u8kM9r0BJMwKYG/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLlunPgpg7jpcIRrkp01rA01TINIxBblGcm90CroTh9to0SV7c_PavdI3FEQS2sFgkbvSH9UfE1q-vxS-yg5GzwbXX2OQF71441N-aTVKzwVZLi392QfPLczNish_Z-0PZOS5OA44gLPoj/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUfXAveli2si1rrSZ9U9bHxgWKwMMyIfy_NHlLJFwI3KgqigHKkCv4JhGypSVA24KgvYby71IDCbT7mdKFw0Af-nudm6SZbGUMJRP7rSYMb9TMZfOiDoBidAs-bIK-nhOBjj2qO9emONC6/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a> <a href='https://plus.google.com/b/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI4zIiMqEtSF_gYCbxa04nN47KkOlamBBc2wFbUAzWZkqCFWQinGjWqOMWuUA46IDtd5CRn_CXMCMWzmvxxiVamYGRL0wpJ2kUM1HJ537TiGUqSDueE19lVKrElfYlEGlB5suyFU60w8Vu/s40/GooglePlus.png' style='padding:25px 5px;' width='40'/></a>
</div>

</div>

<!-- Segunda sección -->
<div class='left' style='width:320px !important'>
<h4>Categorías</h4>

<div id='slide-menu'>
<ul>
<li><a href='URL del enlace'>Menu item uno</a></li>
<li><a href='URL del enlace'>Menu item dos</a></li>
<li><a href='URL del enlace'>Menu item tres</a></li>
<li><a href='URL del enlace'>Menu item cuatro</a></li>
<li><a href='URL del enlace'>Menu item cinco</a></li>
<li><a href='URL del enlace'>Menu item seis</a></li>
<li><a href='URL del enlace'>Menu item siete</a></li>
<li><a href='URL del enlace'>Menu item ocho</a></li>
<li><a href='URL del enlace'>Menu item nueve</a></li>
<li><a href='URL del enlace'>Menu item diez</a></li>
</ul>
</div>

<div id='slide-menu2'>
<ul>
<li><a href='URL del enlace'>Menu item uno</a></li>
<li><a href='URL del enlace'>Menu item dos</a></li>
<li><a href='URL del enlace'>Menu item tres</a></li>
<li><a href='URL del enlace'>Menu item cuatro</a></li>
<li><a href='URL del enlace'>Menu item cinco</a></li>
<li><a href='URL del enlace'>Menu item seis</a></li>
<li><a href='URL del enlace'>Menu item siete</a></li>
<li><a href='URL del enlace'>Menu item ocho</a></li>
<li><a href='URL del enlace'>Menu item nueve</a></li>
<li><a href='URL del enlace'>Menu item diez</a></li>
</ul>
</div>
</div>


<!-- Tercera sección -->
<div class='left right'>

<h4>&#161;Suscríbete a nuestro blog!</h4>
<p>Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Nombre-del-Feed' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Nombre-del-Feed'/>
<input name='loc' type='hidden' value='es_ES'/>
<input class='bt_register' type='submit' value='Suscribir'/></form>

</div>
</div>
</div>

</div>
<!-- Fin bottom sliding menu -->
En color verde he mercado donde inicia cada sección para que sea más fácil de identificar:
En la primera sección está el mensaje de bienvenida y los íconos de las redes sociales, en color naranja deberás agregar los IDs de usuario de tus cuentas. El primero es el nombre de tu blog (para el feed), el segundo el de Facebook, luego el de Twitter, y por último el de Google+.

En la segunda sección se encuentra el menú de categorías, qué bien puede ser utilizado para enlazar las etiquetas del blog, o cualquier otro enlace que queramos.

En la tercera sección se ubica la caja de suscripción por correo, recuerda que deberás tener habilitada la suscripción por correo en Feedburner para que puedas utilizarla; si ya lo tienes entonces agrega en la parte de color azul el nombre de tu feed.

Si quisieras cambiar el alto del menú cuando se expande podrás hacerlo donde dice en negrita
/* Alto del slide */

Lo que se asoma del menú son imágenes, por lo tanto, si quisieras cambiar el color tendrás que editar todas las imágenes y después cambiar el color de fondo en background: #272727;

El menú usa jQuery, así que recuerda tener sólo una versión de esta librería. Si estuvieras usando Scriptaculous o Mootools tendrás que aplicar un parche para que éste sea compatible.

Y eso es todo, a disfrutar de este elegante menú debajo del blog.


256 comentarios en:

" Menú deslizante abajo del blog "

  1. Muy bueno de veras Potro! otra muy buena alternativa, ya habia intentado yo usar ese menu y es genial!

    Gracias!

    ResponderEliminar
    Respuestas
    1. Como alternativa está bien, sobre todo para los que no se animaron a usar el otro porque no querían ocultar la navbar, así que ahora pueden usarlo sin que les interfiera con algún otro elemento que tengan arriba del blog :)

      Eliminar
    2. Potro yo tengo el otro Pero cuando bajo la página, Se queda arriba

      Eliminar
    3. El otro así está diseñado, para que se quede siempre arriba. Al final de los comentarios un lector explica cómo dejarlo flotante, revisa en esa entrada.

      Eliminar
  2. Qué cortitos son los códigos, jaja.
    Oye potro una curiosidad... Ultimamente estoy con muchas ganas de superarme, y hasta he intentado crear un blog con solo html pero tengo que crear muchas paginas html para cada entrada, pero... aunque sea una pregunta estupida, ¿piensas que Blogger podria cerrar en un futuro, o es casi imposible? es que estoy muy pesimista tambien :D

    ResponderEliminar
    Respuestas
    1. Sería muy tonto de parte de google cerrar blogger, ya que es la plataforma por excelencia para bloggers (gratuita).

      Otra cosa, adsense funciona bien con bloggers y eso es bueno para google.

      No creo que cierren o tengan intenciones de cerrar ya que ultimamente han estado mejorando el servicio. Saludos.

      Eliminar
    2. Como asegurarte que cierren o no, no puedo hacerlo, pero es improbable que eso suceda. Usualmente cierran los servicios que no tienen éxito, pero no es el caso de Blogger, tiene miles de usuarios activos que aportan información nueva a la red y que muchos usan otros servicios vitales para su supervivencia como es AdSense.

      Eliminar
  3. Es tan llamativo que tendré que usarlo... haya voy otra vez a meterle mano al código de mi blog... Gracias!

    ResponderEliminar
    Respuestas
    1. Jajajaja, me has hecho reír :)
      Qué bueno que te ha gustado, ¡un abrazo!

      Eliminar
  4. Respuestas
    1. Por nada. Acá en México de la patada tiene otro significado :P

      Eliminar
    2. aca en Peru es como decir esta muy bonito o espectacular algo asi sorry si es una palabra no deseada en mexico xd.

      Eliminar
    3. Descuida, imaginé que lo decías en ese sentido :)

      Eliminar
    4. Es un buen diseño de menu que quise agregarle a mi blog, pero la verdad que le intente de todas formas y no logro que se expanda al hacer clik en Abrir Menú, en mi blog no tengo otras version de jquerry y no encuentro el problema xd,...

      Eliminar
    5. ¿En cuál blog lo has puesto?

      Eliminar
    6. Este es mi blog Potro http://danieledu2009.blogspot.com/, lo puse ahi el menu se visualiza todo pero al momento de hacer clik en Abrir Menú, este no se expande sss...

      Eliminar
    7. Debe ser porque ya tienes dos versiones de jQuery. Prueba eliminar las demás y dejar sólo esta.

      Eliminar
  5. Saludos, yo lo usaría pero me da problema con /jquery, al ponerlo no me funciona el resto de cosas que usan /jquery y si borro los demas me pasa lo mismo :(

    ResponderEliminar
    Respuestas
    1. Pues eso Roger, lo que te ha dicho Francmi08.
      Si puedes dejar la dirección de tu blog donde lo has puesto será mejor, así podremos ver cuál es la causa del problema.

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

    ResponderEliminar
  7. he de decir que no me funciona.... lo que viene a ser que no aparecen los bordes bonitos y no hace el efecto slider...mas bien ZASCA! cuadro gris debajo :SSS

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog lo has puesto Jon?

      Eliminar
    2. ya lo he quitado :S cuando vuelva a intentarlo te digo algo potri :P

      Eliminar
  8. Excelente Potro! Voy a evaluar de ponerlo en alguno de mis blogs ya que me gusta mucho. Una duda: los créditos no se verían?

    ResponderEliminar
    Respuestas
    1. Si los créditos están muy hasta abajo no, pero si están a una altura mayor a 45px desde abajo entonces se verán sin problema.

      Eliminar
  9. muchas gracias potro lo voy a usar para las FAQ xd

    ResponderEliminar
  10. hola potro espero tengas un buen dia intente ponerle el '' mobile: no; '' pero aqui si quede perdido no se donde ponerlo :s me podrias ayudar?

    ResponderEliminar
    Respuestas
    1. Recuerda que esa condición sólo aplica a gadgets, por lo tanto el último código tendría que estar en un HTML/Javascript.

      Eliminar
    2. muchas gracias potro, potro tengo algo que me esta volviendo loco, lo que pasa es que quiero alinear los botones de las redes sociales que están el las entradas osea que no tenga apariencia de serpiente pero nada que soy capas, y no encuentro como hacerlo me podrías ayudar? aquí te dejo el blog para que veas http://adictosalbuenhumor.blogspot.com/

      Eliminar
    3. Tendrías que encerrar cada botón que quieras modificar y aplicarle algún margen, por ejemplo, al de Twitter:
      <div style="margin-bottom:-3px">
      ...Aquí el código del botón...
      </div>


      Ahí el margen inferior es de -3px
      De esa forma podrías jugar con los márgenes para que se acomoden como deseas.

      Eliminar
    4. muchas gracias potro, me voy a poner a jugar con esos botones a ver como me quedan, un abrazo.

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

      Eliminar
  11. ¡Hola! Buen post, quizá me anime a añadirlo a algunos de mis blogs ;)
    Tengo una duda y no estoy muy segura de donde postearla así que la dejaré aquí, espero no moleste.
    En las plantillas nuevas de Blogger, ¿cómo puedo cambiar "Entradas antiguas" "Página principal" y quitar "Suscribirse a: Entradas (Atom)"?
    Ví tus entradas para hacerlo pero el código es diferente y por más que busco no encuentro nada.

    Un saludo, y felicitaciones por el gran blog!

    ResponderEliminar
    Respuestas
    1. Hola Laura, en cualquier plantilla original de Blogger (menos Vistas Dinámicas) el método es el mismo:
      http://ciudadblogger.com/2009/06/cambiar-o-eliminar-suscribirse-entradas.html
      http://ciudadblogger.com/2009/07/personalizar-los-links-entradas.html

      Recuerda marcar la casilla "Expandir plantillas de artilugios" y usar las teclas CTRL + F para mayor sencillez.

      ¡Saludos!

      Eliminar
    2. ¡Muchísimas gracias! Es que acabo de descubrir el botón de "Expandir plantillas de artilugios" pensé que lo habían eliminado con el nuevo diseño.
      Muchísimas gracias :)

      Eliminar
  12. holaaaaaaaaaaaaaa esta chulisimo vaya si lo pongo pero no se si tengo que poner el parche y si fuera asi donde hay ponerlo exactamente
    porque he visto la entrada del parche y bueno sinoender a nadia me
    ha sonado a chino
    http://zerezas-curiosidadesvarias.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Ponlo, pero quizá tengas que quitar antes la otra versión de jQuery que tienes en el blog. Aun así primero prueba hacerlo, ya teniéndolo sabrás si funciona o no ;)

      Eliminar
  13. Potro Me Ha Quedado de 10 Muy Bueno, Muchas Garcias!

    ResponderEliminar
    Respuestas
    1. Me alegro que el resultado haya sido de tu agrado Blood Creek, saludos!

      Eliminar
  14. Mi pregunta Potro sería, como poner los enlaces a las etiquetas, perdona pero solo llevo 4 meses y hay cosas que no entiendo.

    gracias

    Manuel

    ResponderEliminar
    Respuestas
    1. Hola Manuel, en esta entrada puedes ver cómo poner un menú de categorías, en este caso los enlaces a tus categorías:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
  15. hola ya lo he puesto no he modificado nada ni puesto na da y efectivamente no se ve bien ni esta bien tu me dices si me va dar muchos pronlemas no lo dejo

    ResponderEliminar
    Respuestas
    1. El problema ahí no ha sido el menú, sino que cuando has agregado los estilos (el segundo código) has eliminado la llave de cierre de los estilos que están arriba:
      .rightarrowclass{
      position: absolute;
      top: 6px;
      right: 5px;


      Si te fijas ahí falta la llave }

      En esta entrada hay más información sobre ese problema bastante común:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  16. hola potro muy bueno el menu
    lo puse en mi blog todo me funciono perfecto salvo los otro menus que siempre tenia en mi blog osea no salen los submenus asi que tuve que sacarlo no se cual sea el problema y tambiem si se pudiera cambiarle el color
    graxias muy bueno tu menu y lo quiero poner graxias

    ResponderEliminar
    Respuestas
    1. Hola masterweb8000, ¿en cuál blog lo has puesto?
      Lo del color se explica al final de la entrada.
      Saludos.

      Eliminar
  17. No pues esta re'lindo este menú pero apenas y voy terminando de instalar un que funcione decentemente ja, ya me veo que me meto con este y quizá me tarde un rato. AL ritmo que sacas mejoras no puedo ir yo ja, pero seguro lo guardo en mis marcadores para cuando haga un cambio de look. Gracias y un saludo.

    ResponderEliminar
    Respuestas
    1. Me iré más despacito entonces para que les dé tiempo de probar todas estas herramientas :)

      Eliminar
  18. Hola potro !
    genial , lo del menú deslizante!
    seguí todos tus pasos pero hay un problema no se mueve :/
    puedes verlo aquí http://www.omoshiroitv.com
    si te das cuenta no pasa cuando le das clic

    muchas gracias
    suerte!

    ResponderEliminar
    Respuestas
    1. me gusta su blog, mucha suerte

      Eliminar
    2. Hay tres problemas ahí Joy Oshiro.
      1. Usas Scriptaculous, por lo tanto debes aplicarle un parche al script de jQuery:
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      2. Ya usas jQuery, y debes tener sólo una versión de jQuery, la más actual:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      3. En el área de los estilos tienes códigos que no deben ir ahí, y esos son los causantes de que otras cosas no te hayan funcionado antes.
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Elimina esta parte que tienes ahí en los estilos:
      <!-- Fin Paginación -->
      6) Ahora buscamos </body>
      7) Antes de </body> añadimos el siguiente código:
      <!-- Paginación -->
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <script type='text/javascript'>
      var pageCount=5;
      var displayPageNum=5;
      var upPageWord =&#39;Anterior&#39;;
      var downPageWord =&#39;Siguiente&#39;;
      </script>
      <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
      </b:if>
      </b:if>
      <!-- Fin Paginación -->


      Saludos.

      Eliminar
    3. ohhhh ya veo! tantos errores!!

      muchas gracias!!

      suerte!

      Eliminar
  19. Espectacular Potro!!! Saludos!!! (Implementando) jajajaja

    ResponderEliminar
  20. Potroooo...sorry pero hay un pequeño detalle que no puedo solucionar. En la pestaña donde dice Hola Invitado, el texto esta mas arriba casi saliendose de la pestaña. Buscando y buscando llegue a al codigo que creo que este pero ya le he movido y el texto sigue donde mismo
    .tab ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 42px;
    width: auto;
    font-weight: bold;
    line-height: 42px;
    margin: 0;
    right: 150px;
    color: white;
    font-size: 80%;
    text-align: center;

    a ver si me ayudas, porfa... Gracias!!!

    ResponderEliminar
    Respuestas
    1. Entré a tu blog pero no veo que tengas ese texto, parece que se lo has quitado. Si después lo pones de nuevo me avisas para ver el problema.
      Saludos.

      Eliminar
    2. jajaja siii...ayer a última hora dije y si se lo quito??? quedará muy feo??? y naaaa se ve bien así que adios no más xD jajaja muchas gracias de todas formas!!!!! Esta genial!

      Eliminar
  21. era justamente lo que andaba buscando, al parecer me lee la mente usted. ya lo tengo inprementado; (www.shinichistyle.jp),aunque al principio tuve unos problemas al no saber sobre feedburner y como cambiarle el nombre al boton de "subscribir" pero despues de mil intentos lo logre y no era tan dificir como pense. muchas gracias.

    Shinichi

    ResponderEliminar
  22. UUY que chido se ve, ahora si te pasaste Potro..si tu me lo permites lo voy a implementar en mi blog.

    ResponderEliminar
  23. hola buenos dias potro, no leeras la mente pero eres un lince,
    efectimente era la llave, y tenia abierta la pagina de los errores comunes al poner los codigos para ver cual me habia comido pero no lo vi, lo siento, ya esta funcionando y queda muy bien, yo creo que no necesita subir el alto tiene el tamaño justo en blog le va muy bien
    el color negro
    http://zerezas-curiosidadesvarias.blogspot.com/
    pero en el blog de cocina es posible que le de un poco de color y pruebe el menu arriba del blog si te entendido bien porque explicas con claridad meridiana seria cambiar todas las imagenes del primer codigo, de que tamaño debe ser la imagen png? para no darte mucho la lata
    http://zerezas-otrasformasdecocinar.blogspot.com/
    muchas gracias por esta ahi
    zerezas

    ResponderEliminar
  24. hay perdona otra cosita me gusta mucho este menu
    http://ciudadblogger.com/2011/08/menu-vertical-desplegable-tipo-acordeon.html, le puedo poner con este menu? o son incompatibles gracias
    zerezas.

    ResponderEliminar
    Respuestas
    1. Las imágenes deben tener las mismas medidas que las actuales, de hecho si usas un editor de imágenes avanzado como Photoshop sólo será cuestión de agregar un color sobre la misma imagen para que conserves tanto la forma como las dimensiones originales.

      El otro menú puedes usarlo, pero también usa jQuery así que sólo será cuestión de que no repitas el script de jQuery para evitar incompatibilidades.

      Saludos.

      Eliminar
  25. Una pregunta, a mi me gustaria añadir gatdget desde diseño como Karla en un menu parecido explica en esta entrada:

    http://www.compartidisimo.com/2011/10/panel-deslizante-para-mostrar-cualquier.html

    Como se puede hacer para añadir los gatget desde diseño y no "manualmente"?
    Saludos

    ResponderEliminar
    Respuestas
    1. El gadget no lo puedes añadir desde el Diseñador de Plantillas, lo único que puedes añadir ahí son los estilos CSS (el segundo código). Ese puedes ponerlo entrando al Diseñador en la pestaña Avanzado > Añadir CSS.
      Saludos.

      Eliminar
    2. Ya, ya lo se, lu unico que en la entrada de Karla, los podemos añadir desde la pestaña Diseño (donde podemos añadir gatget, moverlos...) pues eso que si se pueden añadir desde ahi los gatget que yo quiera

      Eliminar
    3. Algunos gadgets funcionan igual de bien si son añadidos tanto en un HTML/Javascript como en la Edición HTML de la plantilla, algunos, no todos. Pero no hay mejor manera de salir de las dudas mas que pruebes tú mismo poniendo ese último código en un gadget y veas si te funciona o no.

      Eliminar
  26. hola buen dia coloque soy nueva ene esto coloque un menu que no es el que quiero, deseo colocar en mi blog un menu horizontal, con inicio, quienes somos,etc, ahora como borro el que tengo y cual seria el paso a seguir para el otro. gracias ya que tome el vertical por aca. mi blog es constructora Rah 10. , mis respetos. klara

    ResponderEliminar
    Respuestas
    1. Hola Klara, el menú que tienes te puede servir, sólo te ha faltado añadir los estilos para que agarre forma. Pero si ya no lo quieres sólo entra en la sección de Diseño y elmina el gadget HTML/Javascript donde has puesto el menú. Saludos.

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

    ResponderEliminar
    Respuestas
    1. Hola Bridge Is Sky, quita el meta-tag description para que deje de aparecer la descripción del blog en las entradas, o bien, enciérrala en una condicional para que esa meta aparezca sólo en la portada del blog:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Saludos.

      Eliminar
  28. Hola potro, buen día. Excelente opción; yo usé mucho tiempo este menú, pero en la parte superior y después lo cambie por el "Menú vertical desplegable con jQuery" (estoy pensando en cambiarlo nuevamente por este). Aprovecho para solicitar tu asesoría: quiero cambiar de plantilla pero al subirle la caja de comentarios "facebook" me aparece duplicada, una debajo de la otra, he repetido los pasos y el resultado es el mismo, ¿es por la plantilla o necesito algo extra? SALUDOS.

    ResponderEliminar
    Respuestas
    1. ME REFIERO A QUE LA CAJA DE COMENTARIOS APARECE DUPLICADA =)

      Eliminar
    2. Hola VOXenOFF, posiblemente pusiste dos veces el código del plugin, revisa que no lo tengas duplicado en la plantilla. Cualquier otra duda sobre ese tema déjala en la entrada correspondiente para no desviarnos del tema principal de este post ;)
      Saludos.

      Eliminar
    3. Que así sea, todo en su lugar =) gracias potro, deja reviso y te comento. Buena noche.

      Eliminar
  29. Es una magnífica opción, Potro, y está genial de diseñada, muchas gracias por traerla. Sé que en el aspecto de mis blogs actual no encaja ahora mismo, pero muchas veces pienso en construirme uno más austero, y esta solución que ofreces iría genial en él...lo mismo me pongo, y si no, aquí está. El caso es que somos muchos, tantas personas que usamos blogger y venimos a tu blog por la ayuda que tan generosamente nos ofreces, y con necesidades tan variopintas..., a mí no me importa lo que tardes o no en hacer una entrada tras otra, al contrario me encanta que saques una tras otra. Lo que sí quiero es agradecértelo, por tu propio esfuerzo al trabajarla, y egoístamente porque si no ahora, en cualquier momento puede ser necesario ( y hasta muy necesario), y quién sabe, esa misma puedo ser yo (o cualquiera).
    Un beso

    ResponderEliminar
  30. Es una magnífica opción, Potro, y está genial de diseñada, muchas gracias por traerla. Sé que en el aspecto de mis blogs actual no encaja ahora mismo, pero muchas veces pienso en construirme uno más austero, y esta solución que ofreces iría genial en él...lo mismo me pongo, y si no, aquí está. El caso es que somos muchos, tantas personas que usamos blogger y venimos a tu blog por la ayuda que tan generosamente nos ofreces, y con necesidades tan variopintas..., a mí no me importa lo que tardes o no en hacer una entrada tras otra, al contrario me encanta que saques una tras otra. Lo que sí quiero es agradecértelo, por tu propio esfuerzo al trabajarla, y egoístamente porque si no ahora, en cualquier momento puede ser necesario ( y hasta muy necesario), y quién sabe, esa misma puedo ser yo (o cualquiera).
    Un beso

    (disculpas por repetirlo, es por poder suscribirme por la otra cuenta, yahoo me ha dejado de funcionar)

    ResponderEliminar
    Respuestas
    1. Pues mientras te decides, podrías abrir un blog de pruebas y ahí ir probando las cosas que te gusten, quizá no ahora las uses, pero si un día quieres darle una nueva cara al blog ya tendrás una idea más clara de qué y cómo lo quieres.
      Muchas gracias por tener la gentileza de agradecer y valorar este pequeño esfuerzo :)

      Otro beso para ti.

      Eliminar
    2. ¡Pues es verdad!, nunca había caído en eso, y casi siempre ralentizo el decidirme por no dar con un nombre que me guste, cuando puedo previamente ir haciéndolo en un blog de pruebas. A veces no caigo en lo más práctico, :). Mil gracias, Potro, tal vez lo intente hoy mismo y te iré contando.
      Un beso para ti.

      Eliminar
  31. Hola el Potro!! Muy buena entrada!!!

    Te quería preguntar, si tienes algo relacionado con botones sociales deslizantes por el lado derecho de la pagina?

    Aquí te dejo un ejemplo, de la barra esa... que sigue pegada cuando baja! Seria muy interesante :)

    http://www.oloblogger.com/2012/02/texto-realista-3d-con-css.html

    Gracias por todo :)

    ResponderEliminar
    Respuestas
    1. Hola NE, hay una entrada pero éstos son flotantes, no se deslizan sino que se mantienen flotando en el mismo lugar. A ver si después publico algo relacionado con lo que buscas.
      Saludos!

      Eliminar
    2. Mil y una de gracias, llevo buscando tiempo, pero parece que nadie quiera revelarlo :)

      Gracias el potro ^^

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

    ResponderEliminar
    Respuestas
    1. Desde hace algunas semanas Blogger había anunciado que haría ese cambio en las URLs de los blogs, esto es que haría una copia del blog por cada país, de tal manera que si tú estás en México verás los blogs con terminación .blogspot.mx, los que estén en Argentina lo verán como .blogspot.ar y así sucesivamente. Esto es con el fin de que si tu blog infringiera la ley de algún país sólo se elimine la copia de ese país, y en el resto el blog se seguiría mostrando.

      Eliminar
  33. Hola Potro, se ve que por fin cambiaron el formato de la dirrecion en los blogs...
    Bueno asi como "मज़ा", como podemos re-direcionar todo el trafico que teniamos a la nueva direcion?
    Espero me entiendas como siempre je~

    Saludos~!!

    ResponderEliminar
    Respuestas
    1. No se puede a menos que tengas un dominio propio, sólo de esa forma mantendrías una sola URL, pero sino entonces la URL cambiará automáticamente según el país. Saludos.

      Eliminar
  34. hola denuevo ,mis conocimentos imformaticos no llegan a tanto,
    ys lo intente en una ocadion para restaurar uns imsgen antigua y lo tuve que dejat por imposible, en cuanto a este menu me gustaria poner
    las paginas estaticas y notendria que poner otro menu mas y evito conflictos, tambien me gustaria poner los enlaces de la etiquetasm el problema es que las etiquetas llevan su feed , fuen de las primeras entradas tuyas que use, si me llevo el enlace al menu pierden el feed? y algo tengo que hacer con ellas porque ccupan mucho espacio y no voy a poner mas creo, llevo tiempo mirandolo pero no se como hacer.
    y gracias.
    http://zerezas-curiosidadesvarias.blogspot.com.es/

    ResponderEliminar
  35. que pasa se me ha cambido la direccion en los dos blogs a
    http://zerezas-curiosidadesvarias.blogspot.com.es/
    http://zerezas-otrasformasdecocinar.blogspot.com.es/
    y ya no veo la caja de panel de acceso rapido en ninguno de los dos
    esta cosas se aviasn y no he visto nada en el escritorio

    ResponderEliminar
    Respuestas
    1. Tambien me paso zerezas ,pero el mio cambio a de .com .mx o.o tampoco lee los gagets T.T
      http://aunaletra.blogspot.com/ a T.T
      http://aunaletra.blogspot.mx/
      Potro sabras algo... T.T

      Eliminar
    2. Lo comenté más arriba, pero he preferido redactar una entrada para explicarlo mejor:
      http://ciudadblogger.com/2012/03/las-nuevas-direcciones-de-los-blogs.html

      Saludos.

      Eliminar
  36. Potrooo ayudaaaa!!! No sé a quién mas recurrir. Mira hoy añadí una noticia y se descuadró todo. En las entradas todo esta bien, ocurre sólo en la portada, pero no puedo descubrir que elemento es el que esta estropeando todo. Porfis si le puedes echar una miradaaaa u.u
    Gracias Mil!!!

    ResponderEliminar
    Respuestas
    1. ¿Cuál es la dirección de la entrada que publicaste? ¿Añadiste la imagen de otra página?

      Eliminar
  37. No, la imagen la subi desde mi pc y la dire de la entrada es http://www.osornoticias.com/2012/03/sonic-metal-fest-la-mezcla-del-rock-y.html pero se ven bien las entradas, es la portada la que se me modifico u.u :/

    ResponderEliminar
    Respuestas
    1. Sabes, ya descubrí que era. Es el recuadro de abajo con las 4 pestañas. Al insertar una nota ahí se expande demasiado y corre todo para el lado. ¿Cómo puedo solucionarlo? Graciassss.

      Eliminar
    2. ¿En que dice "música, cine, etc."? No parece ser ese el causante o.O
      ¿Hiciste alguna modificación antes de que eso pasara? ¿Al quitar ese gadget se arregla el problema?

      Eliminar
    3. Hice la prueba y mira sacare la noticia de ahi, he probado con varias xD

      Eliminar
    4. Te dejo otro blog que estaba haciendo similar y está mas limpio que ese. Ahí fue donde me di cuenta de que era ese que decía musica, conciertos, etc... http://noticiasdeosorno.blogspot.com es raro... xD

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

      Eliminar
    6. Sabes me acabo de acordar de que ese gadget (el de las 4 pestañas) funcionaba bien hasta que hice dos cambios: primero actualicé la versión del Jquery y agregué el menu desplegable de abajo. No creo que el menú tenga que ver porque lo eliminé de la osornoticias.com y sigue expandiendose ¿Será eso?

      Eliminar
    7. Es posible, hay ciertos gadgets que funcionan con una versión específica de jQuery, al actualizar la versión debiste darte cuenta si eso afectó al slider. Pon la versión que tenías antes y mira si así funciona. En caso de que no, en tu blog de pruebas instala la plantilla original, la que no tiene ningún cambio, ahí comienza a personalizarle lo que le has hecho y mira en qué momento se mira de esa forma.

      Eliminar
    8. jajajaja ya me puso de cabeza ahora sin hacerle nada se expande, honestamente me doy, veré alguna otra plantilla en ese estilo y seré cuidadoso en probarla. Por lo menos con esta y gracias a tu ayuda aprendi bastante. Muchas Gracias Potro!!!

      Eliminar
  38. Hola Potro, el jQuery este es el que era compatible en mi Blog 2.0 ? :)

    Noah

    ResponderEliminar
    Respuestas
    1. Hola Noah, puedes usarlo ya que no tienes nada de jQuery en el blog, pero como la plantilla usa Scriptaculous (para los efectos deslizantes de los gadgets que se contraen) tendrías que aplicarle al script del menú un "parche" para que funcione bien:
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Eliminar
  39. PotrO no me sale la funcion de JavaSript para poner hacer q al CLICK se levante...Me ayudas?

    ResponderEliminar
  40. PotrO no me sale la funcion de JavaSript para poner hacer q al CLICK se levante...Me ayudas?

    ResponderEliminar
  41. Distinguido señor Potro, Ud. cree que exista la posibilidad de que una persona pueda realizar una publicación de igual manera, es decir desplegable pero que dentro de esta este por ejemplo un código HTML como un mapa de google maps, y puede ser tambien un formulario de contacto en HTML como el formulario de contacto que usted ha recomendado, en fin que se pueda introducir en este acordeon lo que uno considere, muchas gracias por la respuesta sea cual sea y feliz resto del día.

    ResponderEliminar
    Respuestas
    1. Hola José, ¿te refieres a que en lugar de esas secciones haya otro contenido como un mapa o un formulario? Sí, sólo es cuestión de eliminar lo que hay dentro de las secciones y en su lugar poner el código del elemento que quieras que aparezca cuando se despliegue el menú.
      Saludos.

      Eliminar
  42. Hola Potro lo he implementado en mi blog http://zona-saludnatural.blogspot.com y en Safari impecable! en mozilla por mas que tengo una sola de jquery y al tener scriptacoulus le puse el parche, no hay caso no sale y queda por debajo del footer, cual puede ser la solucio para que se vea bien tb en mozilla? desde ya muchas muchisimas gracias

    ResponderEliminar
    Respuestas
    1. Hola Hector. Lo que sucede es que has puesto dentro del área de los CSS un código en PHP y un comentario que sólo se debe aplicar dentro del BODY. Corrigiendo esos errores (si es que no hay otro más) debe verse bien en todos los navegadores:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  43. Listo!! Solo me llevo un minuto con tu explicacion, realmente muchas gracias por tu ayuda y tan pronta respuesta, un abrazo desde Uruguay

    ResponderEliminar
  44. Alguien sabe como mover de posición el menú, no se si me explico ya ven que el menú aparece del lado derecho quisiera saber si alguien sabe colocarlos del lado izquierdo espero que me ayuden saludos!!!

    ResponderEliminar
    Respuestas
    1. ¿Te refieres al menú que aparece dentro del menú? Si es así tendrías que quitar todo lo que está en la Segunda sección y ponerlo antes de la primera sección.

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

    ResponderEliminar
    Respuestas
    1. Suprimi comentario Potro.

      Ya solucione... error mio al copiar los codigos nomas.

      Excelente como siempre.

      Gracias por todo. Saludos

      Eliminar
    2. Vale, qué bueno que todo está bien entonces ;)

      Eliminar
  46. Hola que tal? yo tengo este mismo menu, pero arriba, lo saque de un post anterior que habias hecho, queria consultarte como hacer eso de que baje junto con la pagina, porque el que yo tengo una vez que bajas ya no se ve, y hay que volver a subir para verlo..

    nose si me explique bien, espero que si, por cualquier cosa mi pagina es serviciotecnicolyl.com.ar

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Lucas, mira los últimos comentarios de esa entrada, ahí un lector explica cómo hacerlo flotante.
      Saludos.

      Eliminar
  47. Buena potro! A ver si puedes recomendarme algo que le quede bien a mi blog, todo está hecho gracias a ciudad blogger :D! Saludos!

    ResponderEliminar
    Respuestas
    1. Gracias Mario, aunque para las recomendaciones soy malo, así que lo que a ti te guste estará bien :)

      Eliminar
  48. Hola como andas?
    te hago una consulta queria saber como hago para que el fondo del menu que es de color oscuro gris, sea transparente, osea ke se pueda ver un poco de lo que hay atras.

    gracias!! Nadia

    ResponderEliminar
    Respuestas
    1. Hola Nadie, cambia el #272727 por transparent
      Pero recuerda que el menú también está hecho con imágenes, así que tendrías que editar esas imágenes.

      Eliminar
  49. hola el potro exelente tu blog amigo, tengo una consulta esta es la direccion de mi feed
    feed address http://feeds.feedburner.com/blogspot/altafrecuencia
    original feed http://altafrecuenciaperu.blogspot.com/feeds/posts/default cual de los dos debo poner en nombre-del-feed
    cualdo escribo un correo me sale
    The feed does not have subscriptions by email enabled
    gracias por la respuesta amigo bye

    ResponderEliminar
    Respuestas
    1. Hola, ¿tienes activada la opción de suscripción por correo en Feedburner?
      Sino lo has hecho ingresa en Publicize > Suscripciones por Email, y desde ahí lo puedes activar.
      Saludos.

      Eliminar
  50. Hola, muy buen aporte el de este menú... tengo un problema al hacer todo lo que dice arriba, me da un error de sintaxis y no sé como solucionarlo.

    Error:

    //]]

    muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Fco Javier, puede ser que el segundo código lo estés poniendo después de ]]></b:skin>
      Verifica que todos los códigos estén justo en el lugar que se indica.
      Saludos.

      Eliminar
  51. Potro, tengo una pregunta... He notado en algunos sitios, que ponen este tipo de Menú abajo de la pagina solo con el fin de que para el visitante sea mas fácil cambiar de pagina sin volver al menú de la parte superior, ademas de añadir las redes sociales y otras cosas... Que piensas si ingreso este menú en mi blog abajo, teniendo el menú superior?? Tiene objetivo? o hay alguna opción igual de llamativa y novedosa?? Atte

    ResponderEliminar
    Respuestas
    1. Pues eso depende de cada quien. Yo diría que entre menos cosas tengo el blog mejor, por la cuestión de la velocidad de la carga del blog, pero la última decisión la toma el autor ;)

      Eliminar
  52. Potro Instale todo como me anunciaste... PERO, no se abre el menú!!
    Que puede suceder??

    Ademas, creo! que perdí la compatibilidad con IExplorer, solo puedo verlo con Chrome...

    Que puede pasar?

    ResponderEliminar
    Respuestas
    1. No lo sé, habría que ver en cuál blog lo has puesto.

      Eliminar
  53. Perdón amigo, la instale en este blog.

    kinemet.blogspot.com
    www.horalibre.cl

    ResponderEliminar
  54. Potro, lo he solucionado, solo debía arreglar la compatibilidad... de jQuery, quedo fabuloso. Un gran Abrazo!

    ResponderEliminar
    Respuestas
    1. Eso acabo de ver, qué gusto que ya lo hayas resuelto :)

      Eliminar
  55. Hola Potro, soy nuevo en esto y estoy diseñando mi blog, he intentado poner este menú, al final realiza las funciones correctas de plegar y desplegar pero no me aparece ninguna linea tipo pestaña...haber si me podias exar una mano, tambien tenia la duda de como puedo bajar el volumen del reproductor y poder utilizar el modo bucle, que parametro se utiliza, un saludo y muchas gracias.
    http://frandefisterra.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Fran de Fisterra, cuando has pegado el código de los estilos eliminaste una llave de cierre, por eso no se ve el menú como debería:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Del reproductor no sé si tenga esos parámetros, al menos yo no recuerdo que YouTube los tenga.
      Saludos.

      Eliminar
  56. Muchas gracias por responder Potro, la verdad hay muy poca gente como tú dispuesta a ayudar a los demás, UN 10 POR TI, COMO PROFESIONAL Y COMO PERSONA, GRACIAS Y UN SALUDO

    ResponderEliminar
  57. Que tal de nuevo preguntando algo que se me ocurrio y la verdad no se si se pueda jeje

    Crees que esto se pueda colocar en vistas dinámicas, espero que si saludos y gracias de nuevo

    ResponderEliminar
  58. hola potro no aparece cargar mas y no veo todos lo comentarios a ver si en alguno encuentro solucion.
    este menu me funciona bien en los dos blogs pero en tu blog de pruebas veo que ocupa todo el ancho de pagina,
    pero mis blogs aunque se le ve centrado no llega hasta el final del lado izquierdo quiza smis plantillas son demasiado anchas lo dejo asi o se puede hacer algo porque funcionan muy bien
    gracias
    http://zerezas-curiosidadesvarias.blogspot.com/
    http://zerezas-otrasformasdecocinar.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola zerezas, en la otra entrada te respondí sobre cómo resolver ese espacio que queda y no cubre todo el ancho del blog.

      Eliminar
  59. pues cuanto lo siento molestarte porque no llego el correo con tu respuesta y cada pregunta que hago me sucribo a esa entrada yo creo que la deje aqui pero despues de lo que me dice dudo y no se cual lo lamento porque se que tienes muchocorreo y entre tantos tiene que ser un enorme lio para mi lo seria gracias de todas formas
    si lo hize aqui y no entra el cargar mas para ver todos los comentarios

    ResponderEliminar
  60. pues lo lamento mucho pero no me llego el mensaje con tu respuesta y no me sale cargar mas a cada consulta que hago me suscribo yo creo que lo deje aqui si no es asi pues no donde lo deje de todas formas gracias lo lamento tiene que un lio entre tantos mensaje de correo

    ResponderEliminar
    Respuestas
    1. Descuida, te dejo el enlace a la entrada donde habías comentado anteriormente:
      http://ciudadblogger.com/2011/01/menu-deslizante-arriba-del-blog.html

      Buen fin de semana.

      Eliminar
  61. Hola cmo va??? tengo una pregunta
    como hago para hacer este menu http://www.gregorcollienne.com/?page=home

    Osea en vez de los botones que tiene verticales hacerlos horizontales en todo el largo ponele. Pero ke tenga esa onda, como podes cambiar este codigo de este menu ke es muy parecido pero con el ejemplo de la web?

    Muchas gracias Besosssssssssss

    ResponderEliminar
    Respuestas
    1. Con este menú no, pero deja luego reviso cómo está estructurado el menú y veo si hago una publicación sobre ello ;)

      Eliminar
    2. grosoooo sabelo jajajajaj besossss

      Eliminar
  62. che yo habia dejado un mensaje pero no aparece!!! :S besos

    ResponderEliminar
    Respuestas
    1. Sí aparecen, pero se están moderando los comentarios ;)

      Eliminar
  63. hola puse el menu en mi blog y se muy bien gracias por el aporte
    pwero no hay manera de que funcione las subcriciones si puedes echarle un vistazo te lo agradeceria y creo que lo puse bien tal como dices en otra entrada y si estoy subcrito a feeds http://nombre-de-mi-blog.blogspot.com/feeds/posts/default eso lo puse en los dos textos de azul claro cambiendo "nombre de mi blog". mi blog es este http://ifernandoblog.blogspot.com.es/ gracias de ante mano ;)

    ResponderEliminar
    Respuestas
    1. Hola fer_nando, lo que pasa es que has puesto de nuevo la diagonal de la URL (la que está al final), esa no debe ir.

      Eliminar
    2. hola toro,perdona pero me estoy haciendo un lio que paque jejej
      me podrias poner el codigo aqui de esa parte con feeds

      gracias :)

      Eliminar
    3. No tienes porqué liarte, sólo tenías que poner el nombre de tu blog, nada más. Lo de .blogspot.com (y demás) no era necesario. Mira de nuevo el código de la entrada.

      Eliminar
  64. el potro ¿que tengo que alterar para que funcione en mi blog? no soy muy bueno en el tema de los html

    ResponderEliminar
    Respuestas
    1. No sé en cuál blog lo hayas puesto, no siempre deja de funcionar por algo que no se "alteró", sino por algo que no está bien colocado, así que habría que ver en cuál blog lo pusiste para ver las razones por las que no funciona.

      Eliminar
    2. EL BLOG EN QUE EN EL QUE INTENTE HACERLO ES: VIVAMUNDOGATURROAPPS.BLOGSPOT.COM

      Eliminar
    3. No veo que tengas puesto ningún código de este menú en ese blog.

      Eliminar
    4. Es que cuando lo vi en la vista previa de blogger no me gusto y borre los cambios, luego te pregunte porque o me funcionaba

      Eliminar
    5. aqui esta la url de la imagen que me muestra la vista previa:https://lh6.googleusercontent.com/-zI49p5-b9VY/T7rKF7FsnyI/AAAAAAAAJj4/KZz-erWW_Ec/s800/aaa1.JPG

      Eliminar
    6. Lo siento, pero si te resistes a ponerlo no puedo ayudarte.
      Aun así, por la imagen que muestras aquí debe estar la respuesta a tu problema:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  65. Hola,

    Intenté en el pasado colocar un menú desplegable pero fui totalmente incapaz, por los problemas de compatibilidad de las plantillas, dejándolo por imposible.
    He tenido que retomar la idea, puesto que el blog tiene demasiada información, y he probado el menú deslizante. Increíblemente lo he hecho funcionar a la primera.
    Yo quisiera preguntarte si se pueden abrir mas de una pestaña o menú. Tengo que abrir por lo menos 8 Secciones y quedan muy pequeñitas, con lo que la funcionalidad se pierde.
    De hecho lo he intentado pero no funciona.
    ¿Hay alguna manera sencilla de duplicar o triplicar el menú? O sea que vayan varios menús, pestaña con pestaña.
    No se si me he explicado bien.
    En mi blog de pruebas está lo que me ha salido www.hachahispanica.blogspot.com (obviamente no funciona)
    Un saludo

    ResponderEliminar
  66. Hola,

    En el pasado intenté colocar un menú deslizante y me fue totalmente imposible por un problema de compatibilidad de las plantillas.
    Ahora mi blog está bastante saturado de información y necesito encajarla en un menú.
    Increíblemente he colocado el deslizante y me ha funcionado a la primera.
    Tengo que abrir 8 secciones y me quedan bastante pequeñas, por lo que te quiero preguntar si este menú se puede duplicar para poder disponer de mas espacio, y que cada menú tenga un contenido distinto.
    Yo lo he intentado pero no ha habido manera.
    ¿Habría posibilidad de echarme una mano?
    Mi blog de pruebas es www.hachahispanica.blogspot.com.


    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Luis, quizá este menú no sea el que te convenga si es que requieres de muchas pestañas. Mira la sección de Menús, hay algunos que seguro te pueden servir mejor para la cantidad de enlaces que necesitas. En esa misma categoría verás una entrada sobre cómo usar cualquier menú en la plantilla que usas.

      Saludos.

      Eliminar
  67. Hola de nuevo,
    Gracias por tu amabilidad en atendernos a todos.
    Me gusta mucho el diseño de este desplegable. He hecho varias pruebas y sólo he conseguido "colocar" cinco secciones. La sexta me la manda abajo y sólo se ve el título y de la séptima nada. ¿Hay posibilidad de colocar siete secciones en vez de cinco?

    ResponderEliminar
    Respuestas
    1. Hola Luis, puedes meter varias secciones, pero toma en cuenta que todo depende del ancho total, si la suma del ancho de cada sección se excede entonces el resto podrá mostrarse abajo, o simplemente no se mostrará.
      Lo ideal es no sobrecargarlo tanto, una para que e contenido lo pueda ver cualquier usuario con cualquier resolución de monitor, y otra para que no sea muy lenta la carga del blog.

      Eliminar
  68. Che potro Al Poner un video abres el menu y el video traspasa se puede arreglar eso?

    ResponderEliminar
    Respuestas
    1. Mira esta entrada:
      http://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html

      Eliminar
  69. que tal potro,como puedo mandar la primera sección mas a la izquierda para tener mas espacio

    ResponderEliminar
    Respuestas
    1. Hola HANNIBAL T, cambia esto:
      <!-- Primera sección -->
      <div class='left' style='width:240px !important'>


      Por esto:
      <!-- Primera sección -->
      <div class='left' style='margin-left: -100px; width:240px !important'>

      Lo que está en negrita es el margen izquierdo que lo mueve más a la izquierda o derecha.

      Eliminar
  70. Se puede tener el menu este el de arriba y el de abajo los dos en el mismo blog?potro,hace mas lento el blog?

    ResponderEliminar
    Respuestas
    1. Sí se hará lento porque es el doble de elementos, scripts y estilos que se tienen que agregar. No lo he probado poniéndolo los dos, será cuestión de que lo intentes y ver qué sale.

      Eliminar
  71. Hola potro puse tu menu abajo en un blog pero no se como poder introducir widgets. Me gustaría poner un buscador y añadir algun otro widget pero no se como hacerlo. Hay algun sitio donde explique para poner uno o más widgets donde quieras fuera de la seccion widgets?
    Gracias

    el blog es http://ttipiaondarea.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola lachatina, gadgets de Blogger no se pueden poner ahí, los gadgets que ofrece Blogger sólo se pueden poner en la sidebar o áreas determinadas según la plantilla.
      Un buscador sí puedes poner pegando el código del mismo dentro del área que quieras del menú:
      http://ciudadblogger.com/2009/02/poner-un-buscador-en-blogger.html

      Eliminar
  72. Muy..Muy bueno, ¡gracias potro!
    pero tengo un problema :(
    solo se abre el menu, pero al darle cerrar
    cambia el texto a abrir..y no cierra ni nada
    ¡cielos! te agradeceria si me dijeras
    donde esta la seccion que tiene que ver con el
    cierre del menu. :D

    ResponderEliminar
    Respuestas
    1. La función de cerrar está en la parte del medio del primer código, pero si todo está bien puesto debería funcionar. ¿Sabes si dejó de cerrarse a partir de un cambio que hiciste?

      Eliminar
  73. muchas gracias...si le quite varios de los slides de direcciones
    que estan casi al final del tercer codigo para que me quedaran 5
    pero desde un principio me fallaba, osea antes de que los quitara
    gracias, por darme la información, tratare de arreglarlo :D

    ResponderEliminar
  74. Respuestas
    1. No lo sé, tendrías que quitar ese menú y poner uno con submenús para que veas si es posible o no.

      Eliminar
  75. Que tal de nuevo molestando, crees que exista la posibilidad de ponerle una imagen de fondo al menú o alguna textura de antemano de nuevo gracias y saludos!!

    ResponderEliminar
    Respuestas
    1. Sólo es cuestión de que pongas una imagen como fondo, en vez de esto:
      background: #272727;

      Sería esto:
      background: #272727 url(URL de la imagen);

      Eliminar
    2. Genial muchas gracias saludos de nuevo

      Eliminar
  76. como puedo implementar esto en mi website. Trate de hacerlo pero no puedo sale la barra pero no se abre.te agradecere la ayuda

    ResponderEliminar
    Respuestas
    1. Al script tendrías que quitarle esto:
      //<![CDATA[

      y esto:
      //]]>

      Eliminar
  77. Potro en mi web sale entre cortado como si le hubiera borrado algo, obvservalo tu mismo ¿Sabes que puedo hacer alli? o no es posible con esa plantilla :S

    ResponderEliminar
  78. No me funciona bien mir aobserva :S http://miihabbooo.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Es por unos estilos de tu plantilla. Debajo de .tab ul.login li {
      Agrega:
      margin-left: 0;

      Eliminar
  79. oye potro y se puede que en ves de las etiquetas pudiera ser un texto de bienvenida?

    ResponderEliminar
    Respuestas
    1. ¿Te refieres al menú? Sería cuestión de que quites desde <div id='slide-menu'>
      hasta antes de <!-- Tercera sección --> y en su lugar pongas el texto que deseas.

      Eliminar
  80. ¡Potro! Muchísimas gracias, en cuanto vi este menú me he enamorado de él y colocarlo en mi blog ha sido muy sencillo gracias a ti. ¡De verdad, muchas gracias! Adoro como se ve.

    ResponderEliminar
    Respuestas
    1. Qué bueno que te ha gustado tanto como a nosotros :)

      Eliminar
  81. Mira el menú de blog http://mispadressonprimerizos.blogspot.com.es/
    Cómo puedo hacer para que no se monten las lineas del menú. Cuando quiero q se vea las subpestañas estas quedan por debajo de la linea inferior y quedan tapadas.

    Salu2

    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