Menú deslizante arriba del blog

31 de enero de 2011 505 comentarios ,
Muchas veces cuando pensamos en hacer un blog se nos viene a la mente ponerle muchos gadgets aunque muchos de ellos no sean necesarios, o tal vez sí. Pero lo cierto es que en ocasiones lo que menos disponemos es de espacio suficiente para agregar algunos de ellos. Así que en esos momentos una buena y elegante opción es usar un menú plegable que quede oculto y que aparezca sólo cuando el usuario desee.

Originalmente este artilugio llamado Sliding login panel es un slide para que los usuarios se registren a determinado sitio, pero como ya sabemos, en Blogger no se puede crear un registro de usuarios al blog, pero eso no significa que no podamos sacarle partido a este artilugio y usarlo para agregar en él otros elementos como un menú y un acceso de registro al feed.

¿Que cómo se ve? He aquí la muestra en este blog de pruebas, sólo abre el menú de arriba para verlo.

Este menú deslizante está hecho con jQuery, así que lo primero que haremos será agregar el script; eso lo hacemos pegando después de <head> lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

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

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

});</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>

Ahora agregaremos los estilos CSS antes de ]]></b:skin>
/* Top Sliding Menu
----------------------------------------------- */

.clearfix:after {content: ".";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/AVvXsEgvMs46qMUXEtAcQMhg_7flzbevNMiRVjtuIrA67jNagtuhIrU-psEKE7pO4IYDfJ6NSa2p9-tpdUbq4xgeNwQiAyG_BY1Qd9_Z9WAhiuZ3b1n1RYAXLsSpnalSnQnXhN-Lov_IPHCXBp0x/s1600/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.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/AVvXsEhfMaeFF4SIeO7DQ35MH_zHuqAl3dAFfVlmjhBPjxseU0oS6YngY3K-M9qb0f6b36C5f_r2UmqH3rRhHen3TlnnzEhVo16xZnwckZD-03W_6RwIvXNH2yiyJbusIVDF9JJM8dhJW3t8JhVz/s1600/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/AVvXsEjjmG7yH3qkE6vY_RnbPyTRxAVl1Ln8cWcNWaSU7yXapXtZNHIeiKVTCjq8Pk1YsMreUbXJm6Fx7EuWLFy3ApEJFdg4fqucekhy0W9JTkwKjMjmTLXz2jVlsf3W7WcqNiCgwYUQy8UEIq1N/s1600/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/AVvXsEjItkQ0pHEMvyXt2fpA8VB-C4J3PqVecPz-Jdtq50i_39Rf_ms6cKGbOEx0CHUGTLMEHluNnzjJBxLOrsFN_4GX6PetoV__tXN4AU1BfYAIqlbd0qtx3b_Wxyh0_A9aID2_2qA4Nlh-gv9P/s1600/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: absolute;
top: 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;
}

Y por último vamos a colocar la estructura, así que justo después de <body> agrega lo siguiente:
<!-- Inicio top sliding menu -->
<div id='toppanel'>
<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>
</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 class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hola invitado!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Abrir menú</a>
<a class='close' href='#' id='close' style='display: none;'>Cerrar menú</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
<!-- Fin top sliding menu -->

Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger entonces el código anterior deberás pegarlo después de:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Ahora bien, esta última parte que hemos agregado es lo que contiene todo lo que se oculta y despliega. He puesto en color verde los nombres de cada sección para que les sea más fácil reconocerlas.
En la primera sección puedes cambiar el mensaje de bienvenida; seguido de él están los iconos de las redes sociales, sólo cambia lo que está en color naranja por tu nombre de usuario ya sea de Facebook, Twitter y el nombre de tu blog.

En la segunda sección está el menú de categorías que hemos agregado, basta con poner las URLs de los enlaces y los nombres de los enlaces que hemos añadido al menú.

Y en la tercera sección está la suscripción por correo electrónico, recuerda que debes tener habilitada esa opción en Feedburner. Y ya habilitada sólo hay que poner donde se indica en color azul el nombre del feed que tenemos.

Y listo. Básicamente esas son las áreas importantes que podemos personalizar, aunque por supuesto podemos quitar algo de eso para pegar alguna otra cosa.
El alto de todo el contenedor se cambia donde dice /* Alto del slide */, esto es sólo por si queremos ajustar otra medida.
Y como seguramente muchos querrán cambiar el color de una vez aclaro que son muchas imágenes así que para hacerlo tendrán que editar cada imagen que vean en los estilos y después cambiar el color en background: #272727;

Por último y no menos importante, recuerda que este menú usa jQuery así que si en tu plantilla estás usando Scriptaculous, Prototype o Mootools entonces no te funcionará.

Ahora sí, a disfrutar de este elegante menú con efecto deslizante, que por cierto, lucirá mejor si tenemos oculta la navbar.

Sitio del autor | Web-Kreation


505 comentarios en:

" Menú deslizante arriba del blog "

  1. Muy bueno, lo probe en mi blog pero no encaja con el diseño que tengo, no me queda tal cual esta en el blog de prueba. Lo voy a probar en otro blog. Saludos

    ResponderEliminar
  2. Genial¡¡¡ voy a probarlo en uno de mis blog. Muchas gracias por tu aportación, es magnifica¡¡¡

    ResponderEliminar
  3. que barbaro legalmente este si es una ciudad completisima.. solo falta templates aka.!

    ResponderEliminar
  4. esto es muy útil, lo voy aprobar un día de estos

    ResponderEliminar
  5. ¡es magnífico!...pero tengo que leerlo mUY DESPACIO..creo que me interesa una barbaridad..dios, ¡es que no me da lugar a todo!..:)
    Mil gracias, potro, es una joya esto que nos dejas. Tú eres un tesoro.
    Un beso enorme

    ResponderEliminar
  6. una cosa no sabes como poner la opcion abrir del menu en el medio.???

    ResponderEliminar
  7. wow se ve muy pero muy profesional este artilugio gracias empezaremos a aplicarlo en el blog que dando piendete las miles dudas que me surgiran

    ResponderEliminar
  8. Gustavo, sin duda se adaptará mejor a plantillas muy oscuras o de colores muy claros.

    Loren, seguro te quedará de lujo ;)

    ResponderEliminar
  9. Sweet Muse, ¿verdad que sí?

    rudii, de hecho ahí en el menú del blog hay una sección de plantillas que he hecho, son pocas, pero mi tiempo no me da para más :(

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

    ResponderEliminar
  11. Solo quiero saber como centrar la opcion de abrir y cerrar el menu

    Este es mi Blogs de pruebas
    http://bajakifull.blogspot.com/

    ResponderEliminar
  12. SDK, seguro te quedará muy bien :)

    Sofía, seguro que hay que hacerlo con calma para no caer en la desesperación y terminar arruinando alguna cosa que no estaba en nuestros planes. Gracias por el beso, otro para ti !

    ResponderEliminar
  13. rudii, con calma que no me alcanzas los dedos para responder tan rápido como quisiera ;)

    Sólo busca esta parte:
    .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;

    Eso que está en negrita es la distancia, con una valor más alto se moverá hacia el centro, puedes probar con 350px y luego ir viendo cuál valor se ajusta a la distancia que deseas.

    ResponderEliminar
  14. Espero que no sean muchas dudas :)
    Ja, no te creas, las que surjan y no puedas resolver ya sabes que aquí vemos cómo solucionarlas y si no pues vemos a quién echarle la culpa :P

    ResponderEliminar
  15. eso es depende la resoluccion de la pantalla del visitante o no importa eso para q este bien centrado.

    ResponderEliminar
  16. Vaya ese menú se ve de lo mas profesional, lastima que no lo puedo implementar tengo mas Prototype y Scriptaculous que contenido jaja, ademas que su ubicación interferiría mucho con lo demás que tengo, tal vez en un futuro blog sea una buena opción, gracias por compartirlo Sr.Potro siempre tiene cosas chulas para pimpear blogs.

    ResponderEliminar
  17. rudii, depende de la resolución del visitante ya que no hay parámetros para centrarlo de forma absoluta.

    ADMINISTRADOR, gracias!

    Mo, ya veremos que encontramos luego para Scriptaculous para no quedarnos atrás los que lo usamos ;)

    ResponderEliminar
  18. W00w sin duda Uno de los mas shilos Menús Que e VIsto !

    Lo probare aver como Keda!

    Sigue Asi potr0!

    ResponderEliminar
  19. Muy "chido, padrísimo, de pelos" y todas esas expresiones aztecas similares. :P

    Pregunta: ¿Podré implementar algo asi de forma manual en un sitio Joomla!? Es un poco latoso buscar tanto módulo o plugins.

    Saludos! =)

    ResponderEliminar
  20. _Elblogr21_, creí que sólo en Mexicali decían shilo :P


    RodriGodoy, no tengo la menor idea, jamás he usado Joomla :/

    ResponderEliminar
  21. Excelente potro... lo voy hacer en mi blog de pruebas a ver que tal queda.
    Saludos

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

    ResponderEliminar
  23. Sos mi ídolo! : ))

    acá está mi blog...

    http://nutribodyuy.blogspot.com/

    Saludos!

    ResponderEliminar
  24. Gracias Potro lo probare en mi blog de pruebas mañana a ver si combina con la plantilla.

    Saludos!

    ResponderEliminar
  25. Sin duda alguna algun paso hice mal todo me salio bien pero no baja al darle clik no me abre el menu...

    ResponderEliminar
  26. Bueno ya pude el problema fue ke tenia puesto otro menu solo lo kite y presto!!! ya kedo esta bien chingon potro...(Y)

    ResponderEliminar
  27. Robinson Char, si queda bien me lo presumes para verlo ;)

    Eu, me encantó la combinación de colores que le agregaste :)

    América, que todo salga bien!

    El-Mochis, qué bueno que ya lo has resuelto y que ya está funcionando :)

    ResponderEliminar
  28. Potro Felicidades es impresionante, aunque no me valga para mi blog es un tutorial y un aporte genial, un abrazo

    ResponderEliminar
  29. Potro, me voy directa a mi psicoanalista, creo que no tengo ya personalidad. Llevo tiempo luchando con el cambio de una plantilla - en la cual me sirvió mucho tu ayuda-, cada cosa que publicas, o se adapta o me lo llevo tal cual y, ahora, nos ofreces esta lindeza....A este paso, no haré público nunca el blog....:\ Tooodo me gusta y no acabo de definir un estilo!!

    Un abrazo, Potro. Gracias por todo lo que nos enseñas y compartes.

    ResponderEliminar
  30. Ais!! Esnapri más bien no es falta de personalidad, yo creo que aquí habemos más de un@ que somo "potroinómanos" :-D ahora a ver qué nos sorprendes para los que usamos el script griego jajaja, mil gracias Potro...

    PD:la verdad que queda tan bonito que me he pensado si me cambio al jquery ese, porque queda de espanto!!

    ResponderEliminar
  31. Excelente. Este es uno de los mejores efectos que he visto en Blogger. Saludos

    ResponderEliminar
  32. ESNAPRI, es como la adicción a las compras, vemos algo "nuevo" y lo queremos de inmediato, pero calma que todos padecemos esa ansiedad en los blogs, aunque... ahora que lo mencionas creo que tendré que crear un apartado donde me deslinde de las responsabilidades, sino tendré que pagar las cuentas de los psicoanalistas :D

    Un abrazo enorme!

    ResponderEliminar
  33. MaG@S RaDioMuSiC, yo igual he pensado más de una vez en pasarme a jQuery pero ya tengo varias entradas con ejemplos que requieren Scriptaculous así que aunque quiera no puedo :(

    Pero tú sí puedes hacerlo así que ¡manos a la obra!

    ResponderEliminar
  34. Jorge Luis, qué bueno que te ha gustado :)

    ResponderEliminar
  35. Potro... mejor espero a ver que nos traes para los que usamos el script griego jejejeje, que luego formo el quilombo y te vuelvo loco ;-)

    ResponderEliminar
  36. otra buena ,con tantas cosas dan ganas de ponerle todo al blog ,potro te puedesbdar una vuelta por mi blog nose se si es mi pc o me carga lento unos gadgets en las entradas ,necesito otra opinion.

    ResponderEliminar
  37. Hola!!! Desde La Cinerata me recomendaron tu blog para realizarte una consulta sobre algo que no sé cómo resolver. Espero puedas ayudarme ;S
    Cambié la plantilla de Dialogos Cinéfilos, y entre otras cosas, el problema mayor es que cuando cliqueo en una entrada para verla completa, el ancho del post es mucho, ni siquiera tiene margen. He probado cambiar varibales de witch, de px, pero todas me cambian la página central y nooo el cuerpo del post. ¿Cómo puedo cambiarlo? Desde ya muchas gracias!!! ;)

    ResponderEliminar
  38. ¿Qué te pasó en la cara, Potro? Jajaja...

    Muy currado el post... seguro.

    ResponderEliminar
  39. MaG@S RaDioMuSiC, me parece bien porque sino el cheque de mi psicoanalista correrá por tu cuenta :P

    PeliculasTube, no me ha tardado en cargar, pero toma en cuenta que entre más entradas muestres en la portada significa que tendrá que cargar más contenido y por ende necesitará más tiempo.

    ResponderEliminar
  40. Ey potro esta genilisimo este nuevo tutorial un menu muy util y por cierto n o tan pensado

    ResponderEliminar
  41. Hola Dialoguista,

    ¡Bienvenida a Ciudad Blogger!

    Esa plantilla no tiene sidebar por lo que el ancho lo ocupa todo el contenido de la entrada.
    Lo que puedes hacer es agregar una condicional para que cuando estés dentro del post el contenedor se haga más angosto.
    Si deseas hacer eso entonces pega antes de </head> lo siguiente:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #main-wrapper{width:650px;margin-left:160px;}
    #comment-form iframe{padding:5px;width:650px}
    </style>
    </b:if>

    Ahí puedes cambiar el ancho (width) del contenedor, yo lo he puesto en 650px pero ya será a tu gusto.
    De igual forma tiene un margen izquierdo (margin-left) que es para que se vea centrado, de lo contrario estaría pegado todo a la izquierda, pero de igual forma es opcional la medida que le quieras dar.

    Saludos.

    ResponderEliminar
  42. que raro ise todo y no queria abrir el menu xD

    ResponderEliminar
  43. Oloman, nada, sólo me he quitado el dibujo de encima :P


    Sergio Molina, por un momento creí que te habían raptado, qué gusto leerte de nuevo por aquí :)

    ResponderEliminar
  44. Hola buenas! he puesto este menú en mi blog y quedó perfecto, lo que pasa que surgió un problema y es que ahora solapa el menú superior que viene por defecto con mi plantilla, inhabilitándome todos los apartados y el buscador. Potro ¿alguna idea de cómo solucionarlo?. Tal vez tenga que bajar la plantilla algo más hacia abajo para que el menú que traía la template vuelva a funcionar ¿no?

    Saludos! y gracias por adelantado!

    ResponderEliminar
  45. Tiene muchísimas pinta y parece resultar muy útil. Lo agendaré y veré como queda todo.

    Gracias.

    ResponderEliminar
  46. DrEkO LockerzLatinos, puede ser por muchas razones pero sin saber dónde lo has puesto me es imposible adivinar :/


    Futmuci, quizá la forma más práctica es que agregues dos saltos de línea para que se baje el contenido, esto lo haces agregando <br /><br /> al final de todo el código del menú.


    Adrián J. Messina, que todo salga bien!

    ResponderEliminar
  47. Hola otra vez Potro, perdona que te vuelva a molestar pero he probado insertando los dos saltos de línea en varios sitios, seguramente estaré colocándolos donde no debería pero es que los ponga donde los ponga se me terminan descolocando los elementos de la cabecera del blog. ¿Exactamente dónde tengo que añadir los saltos de línea? porque lo he colocado tras el menu "catmenu" que creo que es el que quiero bajar pero nada, que no hay manera.

    ResponderEliminar
  48. Potro tengo un problema. El Menu sale todo hacia la izquierda, y salen uno arriba del otro. No salen los recuadros, ni las lineas que tienen de contorno blanco. Puse tal y como esta indicado pero sale asi, de esa manera. Nesecito tu ayuda :(

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

    ResponderEliminar
  50. Que joya, cuando tenga tiempo lo agrego a mi blog justo en estos días estaba pensando en minimizarlo, creo que es una buena alternativa

    ResponderEliminar
  51. Gracias amigo quedo bien chulo http://diegohacking.blogspot.com Gracias men

    ResponderEliminar
  52. MUCHAS GRACIAS!!!!!!!!! No salgo de la emoción que sepas cómo resolverlo ;D y que lo trasmitas con tanta generosidad ;) (horas y horas estuve hoy buscando algo que me redujera el post en el html, sin resultados, claro). Ya mismo pruebo el truco que me pasaste!!!

    ResponderEliminar
  53. Quedó genial, quedo genial!!! Eso si, en vista previa no se veían los cambios, tuve que guardar primero. Muchísimas gracias otras vez!!!

    ResponderEliminar
  54. Futmuci, me refería al final de todo-todo el menú, es decir, debajo de <!-- Fin top sliding menu -->

    - [F]asteN [M]ovieS -, no lo veo puesto en tu blog.

    Angel, que disfrutes del menú :)

    ResponderEliminar
  55. Buenisimo Potro me encanto esta aplicación la coloque enseguida!!! Gracias

    ResponderEliminar
  56. Watesam, pues si la idea es optimizar los espacios creo que sí es buena idea ;)

    yerzeta, ciertamente te quedó muy bien!

    Dialoguista, efectivamente en Vista Previa no se ve el cambio porque el código sólo se ejecutará al entrar a una entrada. Me alegro que ya esté resuelto el problema ;)

    ResponderEliminar
  57. compañero gracias me sirvio nuevamente te felicito men.

    ResponderEliminar
  58. Potro me encanto, esta super genial ya lo estoy usando en http://kronzio.blogspot.com ;D , pero tengo una duda ¿como averiguo el nombre del feed? es el nombre de mi blog o que es?

    Espero puedas ayudarme, pero siendo tu estoy super seguro que si n.n

    ResponderEliminar
  59. otra dudita que no tiene nada que ver con esto,¿como pongo la numeracion en comentarios? ya intente con el tutorial de Oloman pero no le en tendi nada :S

    ResponderEliminar
  60. Potro tengo un problema que raro. Lo instale sin problemas, lo probe abria y cerraba los links abrian todos pero despues que le dije a un amigo para que lo mirara no abre mas el menu?¿? lo desintale 2 veces y lo volvi a colocar y sigue igual sin abrir el menu que puede ser?

    ResponderEliminar
  61. Cirilo, qué bueno que te ha sido útil.


    Sergiio, mira en tu URL de Feedburner, la última palabra es el nombre de tu feed, por ejemplo:
    http://feeds.feedburner.com/Nombre-del-feed
    Si tienes dudas sobre ese tutorial pregúntale a él, seguro te responderá.

    ResponderEliminar
  62. Leonardo, seguramente a tu amigo le dio mucha envidia tu menú y te echó una maldición gitana, jajaja.

    Bueno, no, no es eso, lo que sucede es que agregaste Prototype y Scriptaculous, que como mencioné al final de la entrada, no es compatible con el menú.

    ResponderEliminar
  63. Jajajajaa siiiiiii ese me deseo mal mas envidioso..jajajajaa Gracias Potro cambiare de plantilla que no tenga Prototype y Scriptaculous ;)

    ResponderEliminar
  64. No es necesario cambiar de plantilla, sólo elimina esto de tu plantilla:
    <!-- Prototype y Scriptaculous-->
    <script src='http://www.google.com/jsapi'></script>
    <script>
    google.load("prototype","1.6.0.3");
    google.load("scriptaculous", "1.8.2");
    </script>
    <!-- Prototype y Scriptaculous-->

    Pero antes de hacerlo ten en cuenta que seguro algún efecto dejará de funcionar. Usualmente ese script se usa para un efecto de deslizamiento en algo.

    ResponderEliminar
  65. Ok potro checare, ese feedburner es el que tiene blogger por defecto?

    ResponderEliminar
  66. Potro! , si, me olvide de dejarlo puesto para que veas como quedo. Mira, ahi lo puse en mi blog. Fijate que quedo como te dije, todo de costado. Osea todo alineado y hacia la izquierda. Mira , entra al blog ... http://fastenmovies.blogspot.com

    ResponderEliminar
  67. Sergiio, te dejo un enlace de Vagabundia donde explican cómo funciona Feedburner:
    http://vagabundia.blogspot.com/2007/08/feedburner-y-blogger.html

    Ya que tengas tu cuenta de Feedburner entra en Publicize > Suscripciones por Email > y busca donde diga Activar servicio.
    Con eso ya podrán suscribirte a tu blog a través del correo electrónico.

    ResponderEliminar
  68. - [F]asteN [M]ovieS -,

    Lo que sucede es que en la plantilla tienes demasiadas versiones de jQuery.

    La versión 1.3 la tienes 3 veces
    La versión 1.3.2 la tienes 3 veces
    La versión 1.2.6 la tienes 2 veces
    La versión 1.4.2 la tienes 2 veces

    Usualmente sólo debes tener una versión y ya (tú la tienes 10 veces), de lo contrario el mismo jQuery se vuelve incompatible entre las demás versiones.
    Así que, si bien puedes eliminar todas las versiones antiguas corres el riesgo que los trucos que agregaste que funcionan con jQuery dejen de funcionar, pues muchos sólo aceptan cierta versión y nada más.

    ResponderEliminar
  69. Hola, no tiene nada que ver con esta Entrada, pero quería preguntarte cómo se puede hacer, que cuando alguien entre en mi Blog, salga directamente un vídeo, y luego vuelva al Blog, es que he hecho como una especie di Intoducción del Blog.
    Bueno, muchas gracias.
    David

    ResponderEliminar
  70. Potro la verdad no tenia idea sobre eso jaja. Y como hago para eliminarlos? , osea que si los elimino se borran algunos gagdets que agregue?... Dime como eliminarlos porfavor si?. Gracias, espero muy atentamente tu ayuda. Y de verdad, nose que seria mi blog sin ti, y sin Ciudadblogger.

    ResponderEliminar
  71. No sabría decirte David. Sé que cómo hacer que una ventana aparezca al entrar al blog, pero desconozco cómo pueda hacerse para que al terminar de reproducirse ese contenido se cierre automáticamente.

    ResponderEliminar
  72. Hola Amigo muy bueno tu blog y soy fan de CB quiera que me ayudaras aver si tu tienes un codigo asi para compartir en las redes sociales asi como en esta imagen ( http://4.bp.blogspot.com/__Vk42Kr6gmA/TUnuU4AQ_II/AAAAAAAAAYo/vm8MvZAQm20/s320/redes+sociales+compartir.JPG ) esa la capture de una web era para aver si me ayudabas con el codigo para mi blog...

    Gracias por atenderme y ayudarme

    otra pegunta el codigo de este post sirve para blog con dominio .org - .com...? Gracias

    ResponderEliminar
  73. Potro ya resolvi con tu ayuda lo que me afectaba era las flechas de ir para arriba y abajo. Pero ahora tengo otro problema que tuve que desactivar para ver si me puedes ayudar. Te contaba por fecebook que tenia activado la opcion de abrir en otra pagina al hacer click en un link cierto. El problema es que cuando oprimo el boton de menu para abrir me habre otra pagina como si fuera un link. Espero que me puedas ayudar con esto y disculpa tanta molestia...jajajaaja un abrazo y espero tu respuesta Dios del Blogger jajajaja

    ResponderEliminar
  74. Muchas gracias potro ya esta activado :D coincido con leo eres un Dios del Blogger muchas gracias

    ResponderEliminar
  75. - [F]asteN [M]ovieS -,

    No desaparecerán los gadgets, sólo existe la posibilidad que aquellos que utilizan esa librería (jQuery) pueden dejar de funcionar ya que algunos sólo funcionan con determinadas versiones del script.

    Si quieres eliminar los sobrantes busca línea como esta y elimínalas:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>

    Como ves, esa es la versión 1.2.6, de esa forma podrás reconocerlos.
    Saludos.

    ResponderEliminar
  76. Hombre Mistico, idéntico a ese no, tengo uno sobre marcadores sociales pero no tiene el conteo de las veces que se comparte. Y sí, este menú es compatible con dominios propios. ¡Saludos!

    Leo, pues he revisado tu blog y cuando hago click en el Abrir se abre el menú de forma normal, es decir, no se abre nada en una ventana aparte. No sé si ya lo hayas resuelto.

    Sergiio, nada de eso pero gracias ;)

    ResponderEliminar
  77. seria bueno que mostraras como hacer un menú como el de ciudadblogger de manera desplegable y con los iconos al lado de las sub-categorías.

    Gracias por compartir

    ResponderEliminar
  78. Potro ahora hay otro problema que estoy tratando de solucionar, probe suscribiendome a mi feed, pero al tratar me sale "The feed does not have subscriptions by email enabled" no se si tenga que ver con el correo, es este: kronzio@webadicto.mx necesito tu ayuda Don Potro

    ResponderEliminar
  79. Pues dime cómo hacer que una ventana aparezca al entrar al blog
    Gracias. David.

    ResponderEliminar
  80. Fanatico, sí tengo pensado publicar esa entrada pero aun tengo otras pendientes por que aun va a tardar un poquito.

    Sergiio, como te mencioné antes, ya que tienes tu cuenta en Feedburner debes ir a donde te mencioné para activar la suscripción por mail, de lo contrario te marcará ese error.

    David, mira el comentario #9 de esta entrada, aunque hay algunos navegadores en los que ya no funciona ese método.

    ResponderEliminar
  81. Potro ya borre todas las demas versiones,pero sigue de la misma manera. Porque?

    ResponderEliminar
  82. Aun tienes la 1.4.2 y la 1.3.2 repetida 2 veces.

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

    ResponderEliminar
  84. Ahora no. Pero ahora active base target='_blank' y veras que cuando doy para abrir el menu ma lanza a otra pagina y en la otra queda abierta. Fijate espero que me puedas ayudar Potro. Gracias

    ResponderEliminar
  85. Lo que pasa es que ese atributo que agregas hace que todos los enlaces, sin excepción, se abran en otra ventana, el enlace de Abrir o Cerra también es un enlace.
    Necesitas agregar un atributo que indique que ese enlace se abrirá ahí mismo. Para hacerlo agrega lo que está en negrita:

    <a class='open' href='#' id='open' target='_parent'>Abrir menú</a>
    <a class='close' href='#' id='close' style='display: none;' target='_parent'>Cerrar menú</a>

    ResponderEliminar
  86. Potro muchisimos gracias ya no tengo elogios para decirte. Me saco el sombrero maestro...jajajaaja
    Cuidate y muchisimas gracias una vez mas!

    ResponderEliminar
  87. Exelente sigue asi,
    ya me funciono
    http://riokansugoi.blogspot.com/
    :)

    ResponderEliminar
  88. No comento seguido, pero paso por aqui tantas veces como las que cuando necesito algo, este menu está de pelos!!!

    Y quedó genial!

    Mira como quedó Escritorio Nocturno

    Mil Gracias Nuevamente (y por todo!)

    ResponderEliminar
  89. Leonardo, por nada ;)

    アキラ様ザ神様, me alegra que todo ha salido bien :)

    Las Pokas Neuronas de YobLleh, qué bueno que te has animado a comentar y sin duda lo has personalizado bastante bien!

    ResponderEliminar
  90. Potro, elimine las 2 veces repetidas que tenia. De la 1.3.2 me decia que tenia 3 veces repetidas.Asi que las elimine a las 3, y nada :\ Sigue igual. Que hago?

    ResponderEliminar
  91. Aun tienes varios scripts que aunque no son precisamente jQuery sí son scripts dependientes de jQuery pues funcionan a través de jQuery. Y parece que aunque los tienes ahí no los usas, por ejemplo, tienes el jqueryslidemenu.js que parece que no usas, lo mismo con el script de Orbit, el del carrusel con lightbox y otro llamado lavalamp que ignoro de qué sea.

    Todo eso puede afectarte la carga del blog sobre todo si al parecer no los estás usando. Pero bueno, independientemente de todo eso también borraste la versión 1.3.2 que era la que estaba incluida en el código de este menú que justamente hace que funcione. Necesitas pegarlo de nuevo:

    <script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>

    ResponderEliminar
  92. Entonces, dimelos asi los borro. Dime que codigos serian de cuales (TU CONOSCAS) , y dime los que no funcionan o no se ven, porque recuerdo haberlos puesto, pero al no funcionar, los dejaba asi como asi. Pero bueno, tu dime cuales son los que debo borrar para que pueda surtir efecto este Menù.

    ResponderEliminar
  93. No puedo decirte qué borrar y qué no de tu blog pues no sé qué te sirva de lo que has colocado y qué no.
    Usa las teclas CTRL + F y busca la palabra jQuery, así encontrarás todos los scripts que lo usan.

    ResponderEliminar
  94. Sabes? Hagamos esto. Tu dime que Scripts con jQuery tengo puestos en el BLOG que "NO" funcionen, osea no se los muestre. Por ejemplo el Slide de Imagenes si se muestra, bueno pues dime los que "NO" se muestren, y asi yo te digo cual quiero borrar y cual no. Nesecitaria que me digas el codigo de cada uno, para que los busque y los borre, total no puse muchos de jQuery que yo sepa... :\ .

    ResponderEliminar
  95. Buen día Potro: Que posibilidad existe de colocarlo en un lateral?

    ResponderEliminar
  96. Hola soy novato en esto de los blogs y probando cosas he "instalado" este menú deslizante ante lo cual me surjen dos dudas:
    Primera:
    No entiendo muy bien la diferencia entre "suscribirse al feed" (primer icono de la sección primera) y el "suscríbete a nuestro blog" (sección tercera) y si ambos permiten o no hacer las mismas cosas.
    Segundo:
    Ya se que soy ignorante en la materia pero puedes explicarme que posibilidades tengo para utilizar la Sección 2ª (la de los enlaces)?? Me explico.. Solo puedo poner links a mis páginas estáticas del blog? a cualquier página de la www? solo vale para links o vale para alguna cosa mas??

    Muchas gracias por todo y ánimo con ciudadblogger, que tiene unos contenidos estupendos !!!

    ResponderEliminar
  97. Hola potro, felicidades por el post.
    Al punto, coloke este menu en mi blog, pero al dar click en abrir memu, no lo abre y observando bien el codigo en el href de Abrir menu hay un #, ese # se tiene que reemplazar por algo??

    ResponderEliminar
  98. - [F]asteN [M]ovieS -, no puedo dedicarle tanto tiempo a cada uno ya que son bastantes quienes solicitan asistencia tanto en los comentarios como por correo, es por eso que te digo que sólo busques con CTRL + F la palabra jQuery y encontrarás todo lo relacionado con ese script.


    ________________________________ , no sabría decirte, en la página del autor no se menciona nada al respecto.

    ResponderEliminar
  99. ·Pompeius Magnus·, ambas son suscripciones al feed, la diferencia entre esas dos opciones es que la primera es para suscribirse usando el lector de feeds que el lector prefiera, y la segunda opción es para que el lector reciba las actualizaciones directo al correo.

    En el área del menú puedes poner cualquier tipo de enlace que desees, ya sea una página estática de tu blog, alguna entrada, sección o algún enlace externo, el que sea que quieras puedes agregar.

    Saludos!

    ResponderEliminar
  100. Miwel, lo que sucede es que usas Prototype y Scriptaculous, y tal como he mencionado en la entrada el menú no funcionará si usas esos scripts.

    ResponderEliminar
  101. Es que nose desde donde hasta donde debo borrar para eliminarlo justo a ese jQuery. Puedo borrar una parte, y quedar la otra, y seguiria de igual manera. Pero bueno, ya vere como hacer. GRACIAS POTRO !

    ResponderEliminar
  102. Hola, he puesto el menú despregable en mi blog (http://samsungo-onix.blogspot.com) Pero no consigo que funcione la tercera sección. ¿Qué he hecho mal? Intentad subcribiros al feed y mirar el mensaje que sale, así igual conseguís resolverlo.
    Gracias por adelantado.

    ResponderEliminar
  103. Donde dice Nombre-del-Feed no debes poner la URL de tu feed, sino el nombre de tu feed de Feedburner, por ejemplo:

    http://feeds.feedburner.com/Nombre-del-Feed

    ResponderEliminar
  104. Sigo en las mismas, Potro, en Feedburner me dan dos feeds (http://feeds.feedburner.com/blogspot/tIQBx y http://feeds.feedburner.com/SamsungOnix-JuegosAplicacionesOpinionesCaractersticasYDems) pero cuando intento sucribirme al feed me sale un mensaje que dice "The feed does not have subscriptions by email enabled" ¿Qué hago?

    ResponderEliminar
  105. Como te mencioné antes, sólo debes poner el nombre de tu feed, no la URL completa. Donde dice Nombre-del-Feed debes poner SamsungOnix-JuegosAplicacionesOpinionesCaractersticasYDems
    Nada más.

    Pero recuerda que debes tener activada la suscripción por email, eso se hace entrando a tu cuenta de Feedburner, luego entra en Publicize > Suscripciones por Email > y busca donde diga Activar servicio.

    ResponderEliminar
  106. HolaS; bueno queria decirte que me ha servido musho tus tutoriales al momento de construir mi blogg... bueno al grano
    quiero hacerte una consulta , resulta que he he encontrado un slide super buenisimo por la red lo malo que esta en ingles y aun asi no puedo instalarlo , queria saber si me podrias ayudar

    ESTE ES EL DEMO

    http://css-tricks.com/examples/FeaturedContentSlider/

    Y ESTE ES EL TUTO
    http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

    bueno al parecer utiliza JQUERY pero no he podido añadirlo a mi blogg correctamente

    bueno pidiendote ese favor me restiro....

    ***gracias de antemano***

    ResponderEliminar
  107. Cuando tenga un tiempo libre lo reviso para ver si funciona en Blogger, de ser así lo publico.
    Saludos.

    ResponderEliminar
  108. Amigooo, como hago para aumentar la letra de "ABRIR MENU" ?

    Gracias.

    ResponderEliminar
  109. Debajo de .tab a.open, .tab a.close { agrega esto:
    font-size: 13px;

    Ese 13px lo puedes cambiar por el tamaño que quieras.
    Saludos.

    ResponderEliminar
  110. JOJOJO ESTA BIEN CHIDISIMO POTRO, ERES EL REY DEL BLOGGER =P.

    ¿¿SABES SI HAY FORMA DE QUE LA PESTAÑITA DE ABRIR EL MENU BAJE Y SUBA CONTIGO??
    ALREDEDOR DEL BLOG?
    GRAX
    SALUDOS¡

    ResponderEliminar
  111. No entendí la pregunta Freddy, ¿me podrías dar un ejemplo?
    Saludos.

    ResponderEliminar
  112. Muchas gracias, Potro, mis lectores ya se pueden suscribir por email al feed

    ResponderEliminar
  113. Potro, me gustaria que en el titulo que dice "categorías" alla 2 palabras separadas, para que queden arriba de cada ilera de links, ejemplo:
    "Cosme Fulanito
    link 1 link 1
    link2 link2
    etcetera"
    existe algun truco para eso? intente con alt+0160 y con el &spe (o algo asi) y no funciono =S

    ResponderEliminar
  114. Pues cambia la palabra CATEGORÍAS por las dos palabras que quieres poner, o debajo de CATEGORÍAS da un salto de línea y escribe lo que quieres. Así debe funcionar.

    ResponderEliminar
  115. ya intente y no funco =S
    asi es como queda:
    http://img511.imageshack.us/img511/6366/sasaee.jpg
    y me gustaria que quedara cada palabra arriba de cada ilera

    ResponderEliminar
  116. Entonces usa este código en las palabras:

    Cosme <span style="margin-left:50px;">Fulanito</span>

    El valor de 50px puedes modificarlo según la distancia que desees.

    ResponderEliminar
  117. hola potro creo k freddy kiso decir k baje con la pagina como los botones ir arriba y abajo k este bisible la pestaña del menu aunk estes asta abajo del blog y yo tengo una consulta se puede agregar otra seccion una cuarta si sepuede como le hago

    ResponderEliminar
  118. Puedes intentarlo aunque es posible que no te alcance por el ancho del blog.
    De todas formas puedes probar agregando antes de
    <!-- Tercera sección --> esto:

    <div class='left'>
    ...Aquí el contenido...
    </div>

    ResponderEliminar
  119. no hay problema lo tengo de 1300px el blog y grasias lo intentare

    ResponderEliminar
  120. bueno no pude poner la cuarta pero ya canbie el ancho y kedo alras es lo k keria en mi blog kedaron las secciones centradas asi seve bien grasias de todas formas potro y sigue asi k das buena ayuda

    ResponderEliminar
  121. mmmm potro tengo un problemon, no me sale el body :´( como le hago?

    ResponderEliminar
  122. mmm solo pe pare el un
    body {
    y el otro body como deveria de cere pero cerrado pero el bueno no me sale. espero me puedas ayudar :D. grecias

    ResponderEliminar
  123. Todas las plantillas tienen el body, usa las teclas CTRL + F para localizarlo más fácil.
    Si usas una plantilla hecha con el Diseñador de plantillas entonces mira de nuevo la entrada para saber qué código buscar en lugar de body.

    ResponderEliminar
  124. esk si le puse el ctrl + f siempre ago eso pero se me iso extraño k no me aparesiera, pork pss e susado barias cosas de aki... pero psss le busk linea por linea y no lo aye, uuff bueno pss no es el primer ni el ultimo menu k no me dejara poner, pero gracias poir tu respuesta. un saludo men

    ResponderEliminar
  125. Hola amigo, un saludo,
    He colocado el menú paso por paso y se ve la pestaña pero no se abre, ¿Tengo que instalar alguna librería o algo?
    Oriéntame si eres tan amable compañero.

    ResponderEliminar
  126. Potro perdona, ya lo he resuelto, gracias de todos modos amigo, eres el amo.

    un abrazo

    ResponderEliminar
  127. Me da gusto que ya lo hayas resuelto :)

    ResponderEliminar
  128. mi menú no se desplaza más, nisiqiera hice un cambio. Poruqe puede ser?

    ResponderEliminar
  129. Lo que sucede es que usas Mootools para algún otro efecto o menú, y este menú usa jQuery el cual no es compatible con Mootols.

    ResponderEliminar
  130. Hola, yo también intente colocar el menú pero no pude hacerlo ya que no encontraba body ni la segunda opción y lo resolví colocando el último código debajo de body class='loading', espero que esto resuelva algún inconveniente.

    Potro no sabes otra alternativa para colocar un menú de categorías algo parecido al estilo que usas en tu Menú de tus pestañas.

    ResponderEliminar
  131. Pues para agregarlo dentro de este menú va a estar algo complicado por cuestión de estilos. Yo opté en el ejemplo por algo sencillo justamente para que los estilos no hicieran conflito y tuviera resultados desastrosos.
    Ahora, en cuanto a poner cualquier otro menú en el blog pues hay cientos de ellos. El que yo tengo ahora lo programaré para publicarlo más adelante.

    Saludos.

    ResponderEliminar
  132. potro no se porke pero lo primero del menu en la seccion dos no me funciona.
    www.rm6sport.blogspot.com miralo gracias

    ResponderEliminar
  133. Tienes razón pues no me gusto como quedo por el estilo de mi blog, pero encontré rápidamente una alternativa aquí mismo, osea usaré el Menú desplegable que ocupa menos espació y es una excelente opción.

    Mi más sincero pésame por lo sucedido...

    ResponderEliminar
  134. Hola Potro! como estas?. Sabes, puse el Menu , los configure y todo pero necesitaria saber como cambiar el color de la franja en la que se encuentra el Menu al principio,o sea antes de abrir el Menu. Yo lo cambie de color negro, pero antes de abrir el Menu y al cerrarlo, queda la franja del color con el que venia, un estilo Grisaseo. Solo eso Potro,espero me ayudes!.

    ResponderEliminar
  135. mariocrack6, prueba bajando un poco el menú para que el texto de arriba no se encime. Eso puedes hacerlo agregando debajo de #slide-menu { y de #slide-menu2 { lo siguiente:

    margin-top:5px;

    Si no funcionara prueba con 10px

    ResponderEliminar
  136. Daniel, gracias.


    - [F]asteN [M]ovieS -, como se menciona en la entrada, tienes que editar las imágenes que encuentres en el código para modificar esas partes.

    ResponderEliminar
  137. Cierto potro, pero cuando hago las imagenes de color negro, aparece de lado un fondo blanco largo, que transcurre segun abra o cierre el menu. Es como quedo un espacio en blanco que no pinte, pero no pertenecia a la figura, es como un fondo que queda transparente pero cuando cambio el color, queda esa franja blanca.

    ResponderEliminar
  138. Toda esa línea blanca que aparece debajo del menú también es parte de la imagen, pues en el código no hay un borde en blanco o algún color de fondo que pudiera ser el causante.

    ResponderEliminar
  139. potro, al abrir el blog con google chrome no se me desliza el menu =S
    www.animestealer.com.ar
    no se que podria ser >_<

    ResponderEliminar
  140. Podría ser porque no tienes el script: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

    Que es el que hace que funcione el menú.

    ResponderEliminar
  141. perfecto, gracias!
    esto de los scripts es mas que confuso aveces X_x

    ResponderEliminar
  142. hola Potro podria hacer o enseñar diseños de menus como este http://solowwe.foroactivo.mx/h3-senal-1 es de una pagina foroactivo ya me registre en ella y no se como hacer este diseño me podrias ayudar porfavor de antemano gracias pues e usado tus demas menus pero quisiera tener uno como el que te e indicado

    ResponderEliminar
  143. No sabría decirte, nunca he hecho algo parecido :/

    ResponderEliminar
  144. mmmmm pues ya que GRACIAS seguire buscando ajala tenga suerte en encontrar eso

    ResponderEliminar
  145. no me funciona en mi web http://www.lockerzlatinos.com

    ResponderEliminar
  146. agrege todo bien y no se que pasa porq

    ResponderEliminar
  147. bueno ya emparte esta casi solucionado ahora cuando doy clic al menu abre otra pestaña

    www.lockerzlatinos.com creo que era un scrip para evitar que los visitantes dejeran la web

    como ago para que no abra otra pestaña al precionar en abrir menu

    y otra cosa protro se puede fijar el menu? para que ande con la web

    ResponderEliminar
  148. Mira el comentario #87 eso resolverá la forma como se abre.
    Para que se vuelva flotante busca esta parte:
    #toppanel {
    position: absolute;

    Cambia el absolute por fixed

    ResponderEliminar
  149. por ultimo potro ultima pregunta

    como evito que cuando abra el menu no se valla al principio de la pagina

    prueba no mas www.lockerzlatinos.com

    ResponderEliminar
  150. tambien seria bueno con submenus

    ResponderEliminar
  151. tambien me gustaria agregar una descripción a cada link al pasar sobre el con el cursor

    ResponderEliminar
  152. Hola potro,te comento que ya lo agregué al blog,púde hacerle pequeños cambios y no encuentro la manera de "centrar" el botón de suscribir,queda pegado hacia la izquierda,podrías ayudarme por favor? cuando puédas porsupuesto ;) muchas gracias por el menú,saludos.

    pd:En mi perfil el blog es c.a.l

    ResponderEliminar
  153. Hola Dreko,

    Si lo pones flotante siempre se irá hacia arriba cuando se abre, eso no se puede modificar ya que si se hace dejaría de funcionar el menú, ya que mas bien está hecho para no ser flotante.
    Los submenús no quedarán bien pues el menú como tal no tiene el espacios y las características para que se haga.
    Para las descripciones busca aquí en la sección Menús hay una entrada sobre ello, ahora no la tengo a la mano, pero igual dudo que quede con este menú.

    Saludos.

    ResponderEliminar
  154. Hola c.a.l,

    Claro que sí, con mucho gusto :)
    Sólo busca esta parte en el código:

    #panel .content input.bt_register {
    display: block;
    float: left;

    Elimina ese float: left; y con eso podrás centrarlo.
    Saludos.

    ResponderEliminar
  155. Muchas gracias potro,agradezco tu ayuda para solucionarlo :) saludos!

    ResponderEliminar
  156. Hola Potro... el menú esta muy bueno, incluso lo utilizo en mi blog principal y quedo genial http://free-tux.blogspot.com pero estoy modificando una plantilla para utilizarla luego y el menú me queda corrido hacia la derecha http://freetuxprueba.blogspot.com ... ¿Cómo hago para solucionarlo?

    Desde ya gracias por tu ayuda!

    ResponderEliminar
  157. Hola Castro Javier,

    Busca esta parte del código del menú:
    .tab ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 42px;
    width: auto;
    font-weight: bold;
    line-height: 42px;
    margin: 0;
    right: 500px;

    Regresa ese 500px a su valor original que es 150px
    Luego busca esta parte de tu plantilla:
    body {
    font: normal normal 12px ubuntu;
    color: #000000;
    background: #e3e3e3 none repeat scroll top left;
    padding: 0 40px 40px
    40px;

    }

    Pon los valores del padding a 0px

    Saludos.

    ResponderEliminar
  158. lo intente y mi web perdia toda la forma hacia como si no tuviera template esta es mi web www.distritourbano.net

    ResponderEliminar
  159. Seguramente algún paso te faltó o un código estuvo mal puesto. Necesitaría que lo pongas de nuevo para poder echarle un vistazo.

    ResponderEliminar
  160. pasa lo mismo se deforma el template y se pega todo a la izquierda no puedo guardar la pag asi sera porque tengo otro jquery script¿?

    ResponderEliminar
  161. No lo sé, pero podría ser una probabilidad. Intenta eliminando esto de tu plantilla:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>

    Luego sigue otra vez los pasos del menú verificando que todo esté en donde se indica.

    ResponderEliminar
  162. Gracias potro... me sirvió mucho tu ayuda!!!

    ResponderEliminar
  163. xD no puedo estoy usando ese script para algo xD pero gracias man cuando aiga forma de usar doble script estare pendiente porque hay otro efecto mas que no puedo poner por eso pero enrealidad gracias!!

    ResponderEliminar
  164. No va a pasar nada porque cuando agregues el código de este menú vendrá incluido el script jQuery con una versión más nueva así que lo demás deberá seguir funcionando.

    ResponderEliminar
  165. Me A Funcionado gracias eres el mejor pero tengo otro problema aver si me ayudas es cuando le dan a suscribir me dice.

    The feed does not have subscriptions by email enabled

    ResponderEliminar
  166. Hola amigo me me gusta este menu lo tengo puesto :) gracias pero me gustaria una cosa mas de este post me me gusta eso de abrir i cierra si puedo ponerlo a las cosas a menus mas o menos cierra algo o lo que sea yo tengo uno pero su funcion es areves te lo dijare en la web
    esta aki
    http://dibujosinfantil.blogspot.com/
    tengo el script pero solo mi sali cierra i luego abrir lo que kiero yo que salga cierrado i luego lo abre como tu menu

    ResponderEliminar
  167. hOLA QUE TAL. TE QUERIA PREGUNTAR SI PODES AYUDARME... MI BLOG ES http://calaspa-rosario.blogspot.com/ Y QUIERO HACER UN MENU QUE TENGA: PAGINA PRINCIPAL, RESEÑA, PROMOCIONES, TRATAMIENTOS Y CONTACTO..... HASTA AHI TODO BIEN PORQUE EDITO LAS PAGINAS Y LISTO... EL TEMA ES QUE EN TRATAMIENTOS QUIERO QUE CUANDO LE PASO EL MOUSE POR ARRIBA SE DESPLIEGUE HACIA ABAJO LOS TRATAMIENTOS QUE HAY QUE SON 8 EN TOTAL Y CUANDO SELECCIONO ALGUN QUE ENTRE EN UNA PAGINA EXPLICANDO CADA TRATAMIENTO. ES POSIBLE HACER ESTO? PODES DARME UNA MANO? MUCHAS GRACIAS!

    ResponderEliminar
  168. TheZorro, quizá tengas que ponerle el atributo display:none; que indicaría que no se mostrará cuando carga la página.


    Cala Spa Rosario, con un menú con subpestañas podría hacerse. La mala noticia es que en esas plantillas no se pueden agregar menús de subestañas pues no funcionan. Estos días probaré para ver cómo hacer para que ese tipo de menús funcionen ahí.

    ResponderEliminar
  169. Hola amigo si entra a la web de prubas que tengo encontraras en codigo te lo dije alla porfa mi ayudas te dije el codigo script i el otro codigo podras copiarlos ok

    http://dibujosinfantil.blogspot.com
    esta es la web estan el la parte drecha

    ResponderEliminar
  170. El segundo código úsalo de esta forma:

    <div id="ver_on" style=" text-align: center;"><a href="#" onclick="mostrar('bloque')"><img src="http://lh6.ggpht.com/_KqKRitubo0s/S7ig2FidkiI/AAAAAAAABJk/-DJj_dgc378/btnabrir.png" /></a></div>

    <div id="ver_off" style="display: none; text-align: center;"><a href="#" onclick="ocultar('bloque')" ><img src="http://lh4.ggpht.com/_KqKRitubo0s/TKS8Rfp2d2I/AAAAAAAACOQ/k8ZXhvbsvLk/btncerrar.png" /></div>
    <div id="bloque" style="display:none;">

    <embed src="http://servermundi.com/players/inkanime_6058_secure.swf" width="360" height="100" align="left" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></a></div>

    ResponderEliminar
  171. muchas gracias potro eres el mejor

    ResponderEliminar
  172. ¿¿Como hago para tener el menu azul que esta en este blog??

    ResponderEliminar
  173. Mañana o el domingo publico la entrada que lo explica.

    ResponderEliminar
  174. Hola Potro. Me gustaría saber si puedo cambiar los enlaces de seguimiento en Twitter, Facebook por que ellos compartan en sus propias cuentas. Lo que pasa es que no me he creado estas cuentas.
    Y otra cosa que quiero saber es si hay alguna manera d que que los enlaces de en medio sea el archivo del blog (actualizados automáticamente). Saludos y gracias.

    ResponderEliminar
  175. Hola AUB'S,

    Si no tienes cuentas de Facebook y Twitter puedes quitar los botones, o bien poner la URL de estos sitios para que cuando den click ahí puedan entrar a sus propias cuentas.
    En el caso de Facebook sólo hay que poner:
    http://facebook.com

    Y en el caso de Twitter:
    http://twitter.com

    El menú de en medio no puede ser el de Archivos del blog ya que no se puede meter un gadget dentro de otro gadget :/

    Saludos!

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

    ResponderEliminar
  177. Hola Potro. Mi blog (http://fransaval.blogcindario.com/) en "aspecto" "modificar" "código de la plantilla", si están el "head" y el "Body", pero en "hoja de estilo" (css) no tiene el que propones "]]>" y no se donde poner tu código CSS. Llevo tiempo detrás de un menú así y éste me parece extraordinario. Si puedes me ayudas. Gracias y enhorabuena por tus buenos trabajos.

    ResponderEliminar
  178. Hola Eu que sei,

    No conozco esa plataforma de blogs, todos estos trucos son probados únicamente en Blogger. Pero si tienes acceso a los estilos CSS de tu plantilla entonces ahí puedes ponerlo aunque no tengas el ]]></b:skin>
    Puedes ponerlo en cualquier parte siempre y cuando no elimines nada de lo que ya tengas o interfieras con algún otro estilo.

    Saludos.

    ResponderEliminar
  179. Hola Potro tengo una duda,
    actualmente tengo instalado este menú en mi blog: http://ciudadblogger.com/2010/09/menu-desplegable-con-efecto-deslizante.html

    Estaba intentando instalar el menú de esta entrada y al instalarlo no me funciona ninguno de los dos menús, mejor dicho no se abren...
    Y probandolo en otro blog uno a uno sí funcionan los dos, pero los dos a la vez no, sabes por qué puede ser?


    Gracias y saludos!

    ResponderEliminar
  180. Hola Paulina,

    Lo que sucede es que un menú funciona con jQuery y el otro con Scriptaculous. Estos dos scripts no son compatibles entre sí y es por eso que juntos no funcionan.

    Quizá quieras intentar el hack para que ambos funcionen.

    Saludos.

    ResponderEliminar
  181. Gracias Potro,funciona perfectamente (la verdad que todo lo que he utilizado creado por ti siempre funciona, y sobre todo cuando tenemos alguna duda te falta tiempo para solucionarnoslo, eternamente agradecido) Date una vuelta por aqui: http://www.elrincondepc.com/ a ver que te parece los arreglos que he hecho.
    Un abrazo

    ResponderEliminar
  182. Nada Potro, lo he tenido que eliminar, ya que al hacer la traduccion a otro idioma a traves de las las banderas que tengo encima de las pestañas no se accionaba.

    ResponderEliminar
  183. Hola PC, cuando una página está traducida muchas cosas no funcionan eso es un tanto normal ;)
    ¡Saludos!

    ResponderEliminar
  184. Graciasssss :)

    Me has ayudado muchisimo ahora si que van los dos menús, vaya no sabía yo lo del "hack" pero está muy bien.

    Lo que pasa ahora es que no se cual menú dejar, tengo 3, uno venía con la plantilla que son las páginas estáticas, otro es el de la derecha y el 3º es el de este post... podrías echar un vistazo y darme tu opinión personal de cómo quedan los menús y si quitar alguno o cambiar o .. pues eso qué te parece. Mi blog es http://rinconcito-soleado.blogspot.com

    Gracias de nuevo y saludos!

    ResponderEliminar
  185. Pues no sabría decirte, a modo muy personal me gusta mucho este menú arriba del blog, pero pues la decisión es tuya ;)
    Saludos!

    ResponderEliminar
  186. Hola Potro. En mi blog (http://fransaval.blogcindario.com/) (ya se que dices que no conoces esta plataforma de blogs) no me funciona tu magnífico menú. ¡Curioso! Aparece perfectamente la carátula, pero "pinchas" para desplegarla y ... nada. Me envía a la página principal. Además, deja de funcionar la barra del blog (administrar, nuevo artículo...). Hice bastantes pruebas, ¡pero nada que este guapo menú no quiere funcionar! Si se te ocurre algo por lo qué,... pues adelante. Disculpa al pesado este...jaja... Por cierto, otras muchas aplicaciones de Blogger van muy bien en el mío. Saludos campeón.

    ResponderEliminar
  187. No sabría decirte, como te mencioné sólo pruebo los tutoriales para Blogger. Quizá cambiando todos los &quot; del primer código por comillas, tal vez eso funcione pero no puedo asegurarlo.

    ResponderEliminar
  188. Potro, salud.

    Oiga, amigazo. Resulta que le he estado siguiendo dsde hace un tiempillo y he ocupado varios de sus excelentes datos para hermosear los blogs. Muchas gracias por su dedicación‼

    Pero le tengo una consulta: Resulta que mi blog sirve de notificaciones, convocatorias y ese rubro para mis compañeros de universidad, por lo que regularmente vinculamos las noticias a facebook. El problema es que al colocarlas, en la descripción de la noticia y en la imagen que le acompaña, aparece lo del menú y no lo que dice la noticia.

    La pregunta, entonces, es si hay alguna forma para que al linkearlo en facebook, no tome en cuenta el menú, pero si la noticia.

    Espero su respuesta.
    Abrazos‼

    ResponderEliminar
  189. Hola Painel,

    El botón de compartir de Facebook o sus diferentes plugins para compartir contenido siempre toman lo primero que encuentran en el blog, si lo primero que hubiera fuera un menú, un script, o equis texto entonces tomará eso.
    Lamentablemente no hay mucho que se pueda hacer, ya desde hace mucho se ha reportado eso a los desarrolladores de Facebook y parece que no hay pronta solución .
    De cualquier manera si me llego a enterar de algo se los haré saber tan pronto como sea posible,

    Un abrazo.

    ResponderEliminar
  190. Hola potro, un fenomeno tu blog, a ver necesito hacer algo y no puedo con esto...
    quisiera quitar el tercer modulo de subscribirse y remmplazarlo por mas entradas como el segundo bloque.
    Cuando intento hacerlo los enlaces del tercer bloque me salen en azul y las del primer y segundo bloque estan en gris, y me gustaria que todos los enlances estuvieran en azul...
    Puedes ayudarme?
    Ademas quisera saber como purgarlo ya que seguro que hay cosas que debo borrar y que no he hecho, solo modifique la parte del menu deslizante, es decir el 3 codigo que no has dado, no se si me explico, no modifique ni el script, ni los estilos CSS
    te dejo lo que hice a ver si encuentras la solucion que seguro que si...
    http://periodistasanonimosv2.blogspot.com/
    GRACIAS POTRO, ESPERO TU AYUDA.

    ResponderEliminar
  191. Gracias Potro. Esperemos que pase algo al respecto. Como siempre, se agradece la prontitud de la respuesta y la dedicación.

    Grande Potro!

    ResponderEliminar
  192. Hola Periodistas Anonimos,

    Sólo tienes que agregar debajo de la <!-- Tercera sección --> exactamente lo mismo que hay debajo de la <!-- Segunda sección -->
    Pero debe ser tal cual como está ahí.

    En el CSS sólo borra desde #panel .content .right { hasta antes de #slide-menu {

    ResponderEliminar
  193. Potro Gracias, he realizado lo que tu me has dicho, pero mira lo que pasa, la tercera categoria, no se pone al costado, se va para abajo de la primera...
    Tu podrias enviarme todo el codigo al mail?
    porque seguro que algo hago mal y no quiero estar molestandote todo el tiempo...
    ya sabes lo que quiero hacer...
    te dejo el mail: info@periodistasanonimos.com
    gracias campeon!!!

    ResponderEliminar
  194. Al correo no puedo responderte pero aquí podemos darle el seguimiento que sea necesario.
    Lo que sucede es que al ya ser muy ancho no cabe todo y por eso se baja. Lo que puedes hacer es que si en la primera sección sólo pondrás una columna de menú entonces puedes reducir esa sección.

    Busca esta parte:

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

    Cambia ese 240 por 200 y se resolverá.
    Saludos.

    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