Cómo hacer que el gadget de Páginas se haga flotante al bajar el scroll

24 de marzo de 2014 197 comentarios ,


Hace algún tiempo vimos cómo poner unos botones para compartir que se detienen y flotan al bajar la página. Esta vez usando el mismo script conseguiremos el mismo efecto pero con el gadget de Páginas. Lo que hace este código es que al bajar el scroll de la página el gadget de Páginas flota y se mantiene visible, y una vez que se sube el scroll de la página el gadget toma de nuevo su posición original.
En este blog de pruebas puedes verlo funcionando, sube y baja por la página para ver cómo se comporta el menú.

Para colocarlo en tu blog entra en Plantilla | Edición de HTML y antes de </head> pega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(function() {
var $flotarMenu = $("#PageList1"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '880px', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<style>
#PageList1 {
width:880px; /* Ancho del gadget de Páginas */
background:#fff; /* Color de fondo del gadget */
z-index: 99;
}
</style>
¿Qué hay que tener en cuenta si decides usarlo?
Si ya tuvieras jQuery omite la primera línea en color gris. Y si usaras Scriptaculous/Prototype deberás hacer unos cambios.

Lo que está en color rojo es el ID del gadget de Páginas, así que asegúrate que el ID de tu gadget sea el mismo que el que se muestra en el código, ya que algunas veces puede variar a #PageList2, #PageList3, etc. si así fuera sólo cambia lo que está en rojo por tu verdadero ID.
Incluso puedes usarlo con cualquier otro menú, sólo tendrás que cambiar lo que está en rojo por el ID de tu menú, aunque seguramente tendrás que añadir algunos estilos extras debajo de <style>

En color azul se establece el ancho del gadget. Si ves que queda muy angosto o muy ancho ahí es donde deberás moverle.

Si usas la plantilla Fantástico, S.A. (Awesome Inc.) sabrás que el menú cubre todo el ancho de la pantalla, así que quienes usen esa plantilla deberán usar este código en lugar del anterior:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(function() {
var $flotarMenu = $(".tabs-outer"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<style>
.tabs-outer {
width:100%;
background: url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_groovy.png) repeat scroll 0px 0px #000; /* Color de fondo */
z-index: 99;
}
</style>
En este caso no hace falta verificar el ID del gadget ni cambiar el ancho del gadget, pero en caso de que lo requieras puedes cambiar el color de fondo modificando lo que está en negrita.

Como has podido ver la instalación es de un solo paso y no hace falta hacer nada más excepto retocar algunos estilos en caso de ser necesario; y el resultado además de ser muy llamativo puede ser muy práctico para tus visitantes y para ti, sobre todo si quieres que tus lectores tengan siempre visibles y a la mano los enlaces de tu menú.


197 comentarios en:

" Cómo hacer que el gadget de Páginas se haga flotante al bajar el scroll "

  1. buen truco potro lo estaba buscando y tu como siempre bien explicado

    ResponderEliminar
  2. Excelente Potro, buenísimo.
    Gracias.

    ResponderEliminar
  3. Lo estuve buscando bastante hace un tiempo para hacer mi propia plantilla y no lo encontraba -.- No importa, si algún día me decido de nuevo a tratar de hacer mi propia plantilla seguro que lo utilizaré jajajaja

    Saludos

    ResponderEliminar
  4. un buen efecto, lo tendré en cuenta =) POTRO aprovecho para ver si puedes y te queda time y me ayudas a arreglar un problema con mi menu .... el menu se sobre pone a las entradas que tienen imágenes y se ven en vistas dinámica .... te dejo el ejemplo de una entrada en el que se ve el error y una captura de pantalla -

    Entrada: http://www.enteratecali.net/2014/03/fue-salvado-de-la-eutanasia-y-luego.html

    Captura: https://dl.dropboxusercontent.com/u/31270671/01.PNG

    quedo pendiente si puedes ayudarme !!!

    ResponderEliminar
    Respuestas
    1. Amigo, no soy el Potro pero puedo ayudar, lo que debes hacer es buscar en los estilos del menú, una linea que dice "z-index:" esta linea tiene un numero, quitala y listo! Saludos y suerte!

      Eliminar
    2. excelente el menu quedo bien, me podrias indicar como hacer con un link que me queda por encima al igual que la imagen de portada ¿?

      dejo una captura https://dl.dropboxusercontent.com/u/31270671/02.PNG

      totalmente agradecido por la ayuda =)

      Eliminar
    3. Con estos estilos resuelves lo del Lightbox:
      .CSS_LIGHTBOX {
      z-index: 99999999 !important;
      }

      Eliminar
    4. PERFECTO .... Gracias Novaweb y Gracias Potro !!! ..... las dos respuestas funcionaron perfecta por si a otra persona le pasa esto, lo pueden hacer 100% confiados de que resolverá el problema !!!

      Eliminar
  5. Hola, Potro. Ésta no es una duda de éste tutorial sino más que todo de mi blog. Yo quiero que la cabecera sea PNG pero blogger SIGUE añadiéndole el fondo blanco. Y sí, la puse en un fondo .png y ésta guardada en dicho formato. ¿Tienes idea de como solucionarlo?
    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Sunwear, no soy el Potro pero puedo ayudar, es muy sencillo, vi tu sitio y en efecto tienes la imagen con transparencia en formato .png, lo que tienes que hacer es ir al "Diseñador de plantillas de Blogger" y en Avanzados ve a fondos, busca hay para cambiar el fondo de la cabecera y ponle "Transparante" y listo con esto se ha solucionado tu problemilla, Saludos y suerte!

      Eliminar
    2. http://oi57.tinypic.com/swzkw2.jpg

      Eliminar
    3. Nope :( Ya probé eso varias veces y está en transparente pero sigue sin dejarme.

      Eliminar
    4. El problema (que no es problema en realidad sino una cuestión de estructura) es que la cabecera está dentro del contenedor general del blog (.content-inner), este contenedor tiene el fondo blanco y es todo ese fondo blanco que ves en el blog, así que como la cabecera está dentro de ese contenedor la imagen al tener transparencias deja ver lo que haya debajo de ella, en este caso el fondo blanco.

      Eliminar
    5. ¿Y cómo hago para quitarla de eso? Se puede?

      Eliminar
    6. No, porque como te dije antes, es el fondo del contenedor principal del blog, y la cabecera está dentro de ese contenedor.

      Eliminar
  6. Saludos Potro. Puedes hacer un tutorial para tener una versión móvil como la de Ciudad Blogger? :)

    ResponderEliminar
    Respuestas
    1. Claro que sí, ya lo tengo anotado para publicarlo más adelante ;)

      Eliminar
  7. Muy útil. Lo tendré en cuenta.

    ResponderEliminar
  8. Hola Potro, qué buen articulo, ya te extrañábamos, qué bueno que regresaste... Eres una gran persona. Te admiro en gran manera. Saludos.

    ResponderEliminar
    Respuestas
    1. No lo merezco, pero te lo agradezco de igual manera. Un abrazo.

      Eliminar
  9. Me ha quedado de maravilla, sobre todo por la temática que estoy mostrando ahora.
    Mira http://emprendenegociossiglo21.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Así dan más ganas de dar click a las pestañas, ¿no crees? ;)

      Eliminar
    2. Si Potro, está muy bueno este truco, muchas gracias.

      Eliminar
  10. Está genial, pero no me deja modificar el ancho, lo que pasa es que no uso plantilla de blogger si no una personalizada

    ResponderEliminar
    Respuestas
    1. espera, ya lo arreglé creo que me faltó buscar mas recursos XD. De todas maneras muchas gracias "El Potro", de verdad que me han servido mucho los trucos de esta pagina para mejorar el blog que administro ;)

      Eliminar
    2. Gracias a ti Sebas Bro, ¡saludos!

      Eliminar
  11. Muchas gracias por el tutorial resulta bastante útil implementar este código. ¿Como se podría hacer lo mismo pero en un widget de la sidebar? (Por ejemplo para mostrar siempre la publicidad de Adsense). Estaría bien si hicieras un tutorial sobre esto. Gracias!

    ResponderEliminar
    Respuestas
    1. No creo que sea buena idea usarlo para AdSense sabiendo que son medio paranoicos con sus políticas, pero para usarlo con cualquier otro gadget sólo cambia el ID en color rojo por el ID del gadget con el que lo quieres usar.

      Eliminar
  12. Muy bueno Potro! Muchos lo vana a implementar en sus blogs.
    Yo tengo una duda urgente, nada que ver con esto. CDmon‏ nos quita varias opciones (redirecciones web y de correo) a los que no pagamos por ningún servicio de ellos. Por lo que dejará de funcionar mi correo y mis redirecciones. Qué debemos hacer? Conoces otro buena empresa que ofrezca DNS gratuitos y que incluyan redirecciones web y de correo? Mi dominio está registrado en nic.ar
    Muchas gracias compañero!

    ResponderEliminar
    Respuestas
    1. Hay varios sitios que ofrecen la gestión gratuita de DNS, como OpenProvider y EntryDNS. No sé si alguno de ellos permita la redirección y demás herramientas, será cosa de revisar cada uno de ellos, puedes crearte una cuenta y ver qué opciones de las que necesitas te ofrecen.

      Otra opción más drástica sería que transfieras tu dominio con CDmon así gozarías de todos sus servicios, pero, la transferencia tiene un costo equivalente a un año del dominio, prácticamente es como si renovaras el dominio, pero con CDmon.

      Eliminar
    2. Gracias! Veré que pasa con CDmon, ya que me comuniqué y me comentaron lo siguiente:

      Le informamos que la configuración que tiene seguirá funcionando de la misma forma, solo deberá acceder cada tres meses para renovar el DNS gratuito (a través del enlace que recibirá en el correo electrónico) y en caso que considere que ésta opción no le convence debería realizar la migración de los dominios hacía cdmon. Realizar la migración de los dominios no afecta en cuento a configuración de DNS.

      Lo malo de CDmon es que un .com.ar sale 29,45€, unos 317 pesos argentinos y en Nic.ar ahora salen 160 (antes eran gratis), casi la mitad.

      Tengo otra duda, con AdSense, ahora permiten poner más anuncios? Porque veo sitios que no son Premium y tienen más de 3. Yo tengo 3, y probé por un segundo poner un cuarto, y se ven si problemas todos. Que raro.

      Eliminar
    3. No pues sí sale caro el dominio con ellos, en todo caso conviene más que lo compres en name.com o GoDaddy, están en 10 dólares aprox.
      Lo otro no, hasta donde sé el número máximo de anuncios de AdSense por página sigue siendo el mismo, quién sabe cuál sea la situación de las páginas que has visto.

      Eliminar
  13. El potro volvió y con su blog al estilo Flat,es un gusto tenerte de nuevo :'D

    ResponderEliminar
  14. Fantástico Potro, lo echaremos un vistazo a ver como queda.
    Me alegra tenerte de vuelta. Un saludo.

    ResponderEliminar
  15. Hola Potro

    Fabuloso post, fíjate que en uno de mis blog, en reemplazo al gadget de páginas, tengo un gadget de avisos o notificaciones en el mismo lugar con las mismas dimensiones, mi pregunta es, como sé cual es el ID de ese gadget? como puedo saberlo? donde lo busco?.

    Gracias Potro y que bueno que volviste! ;)

    ResponderEliminar
    Respuestas
    1. Hola Joan, busca en el HTML de la plantilla el nombre del gadget, junto a él verás cuál es su ID, si no tiene nombre ponle uno momentáneamente para que lo reconozcas.

      Saludos!

      Eliminar
    2. Genial!.... No sabia como hacerlo, gracias Potro! ;)

      Eliminar
  16. Menos mal que regresas, gracias
    Un saludo

    ResponderEliminar
  17. Hola, Potro, el "truco" es genial, my importante para los que nos gusta que la información esté siempre a mano. Solo sucede que desde que tuviste parar esto la verdad es que casi nada funciona en condiciones, ni un puñetero gadget (en mi blog y otros muchos), y sin ti hemos estado tan perdidos... Un abrazo enorme. Y gracias infinitas, como siempre.

    ResponderEliminar
    Respuestas
    1. No sabía que tenías problemas con los gadgets de tu blog. Si hay algo en lo que pueda ayudarte ya sabes que sólo tienes que pedirlo y estaré encantado de hacerlo.
      Besos enormes para ti.

      Eliminar
  18. Buen truco que ya he empleado :) Gracias, Potro!

    ResponderEliminar
  19. Por cierto, se me está ocurriendo... me podrías indicar cómo cambiar/editar el diseño de la barra de páginas? Es que, ahora mismo, lo tengo muy poco estilizado y no sé muy bien cómo se hace... Espero tu respuesta, crack!

    Un abrazo.
    Abel Jara Romero

    ResponderEliminar
    Respuestas
    1. Aquí hay una entrada sobre ello, el diseño del ejemplo es muy feo para mi gusto, pero seguro te puede servir como base para que lo personalices a tu manera ;)
      http://ciudadblogger.com/2010/02/personalizar-el-gadget-de-paginas.html

      Eliminar
  20. Hola Potro, creo que esto le puede venir bien a alguien.

    Me explico, en el caso de mi Blog, el gadget de Páginas lo tengo arriba del todo, entonces pude observar que a medida que ibas bajando la página el gadget, también se desplazaba, tapando todo el contenido de la cabecera, pestañas, titulo del blog y demás artilugios, entonces a través de esta pequeña modificación, el gadget solo aparece por debajo del contenido de la cabecera.

    Parte del script modificado: if ($window.scrollTop() > offset.top) {, por (en mi caso), ($window.scrollTop() > 214) {

    Por si no me explicado claramente, lo podéis ver funcionando aqui: www.teinteresasaber.com

    Posta data: también añadí, para poder variar el alto del fondo (background).

    Espero que os sirva un saludo.

    Modificado por Pedro PC:

    <script>//<![CDATA[
    jQuery.noConflict();jQuery(function() {var $flotarMenu = jQuery("#PageList16"),$window = jQuery(window),offset = $flotarMenu.offset();$window.scroll(function() {if ($window.scrollTop() > 214) {$flotarMenu.css({'position' : 'fixed', 'width' : '1000px', 'height' : '45px', 'top' : '0px'});} else {$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});}});});
    //]]></script>

    Original de Potro:

    <script>
    //<![CDATA[
    $(function() {
    var $flotarMenu = $("#PageList1"),
    $window = $(window),
    offset = $flotarMenu.offset();
    $window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
    $flotarMenu.css({'position' : 'fixed', 'width' : '880px', 'top' : '0px'});
    } else {
    $flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
    }
    });
    });
    //]]>
    </script>

    ResponderEliminar
    Respuestas
    1. Son pocos los casos, pero es bueno que lo menciones porque seguro a alguien más le pasará teniendo el menú de esa manera, y tu forma de solucionarlo ha sido bastante acertada.
      Saludos.

      Eliminar
    2. Gracias Potro, viniendo de ti es un alago.
      Un saludo

      Eliminar
  21. Hola potro disculpa la incomodidad este por que cuando publico una entrada en ves q sea de mi blog sale de plus google - y no sale de mi blog ?

    ResponderEliminar
    Respuestas
    1. No he comprendido, ¿a qué te refieres con que sale de Google+ y no de tu blog?

      Eliminar
    2. cuando publico en ves que mi entrada aparcesca en google aparece en mi perfil de google y sale en primera fila ?

      Eliminar
    3. Es porque Google+ tiene buen posicionamiento y está mejor posicionado que tu blog, por eso aparecen primero los resultados de Google+, pero ya es un avance ya que quien de click en el resultado de Google+ podrá ir al enlace de la entrada de tu blog.

      Eliminar
  22. Hola Potro, me alegro muchísimo de vuelta. Por aquí he pasado casi cada semana buscando trucos o informándome. Es estupendo tenerte de vuelta.

    Perdona el off-topic pero no sabía donde ponerlo. Con el uso de condicionales hay cosas que aparecen en portada, otras en los post... Como nos has enseñado otras veces. Lo que quería preguntarte cómo hago para quitar determinados elementos cuando utilizo la Vista Previa de la edición de los Posts. Algún widget que está por encima que sólo aparece en portada pero que en la Vista Previa sale y a veces es demasiado molesto. Muchas gracias por anticipado.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Emilio.
      No hay una condicional para la Vista Previa, pero se me ocurre que podemos usar un script que oculte el elemento que quieras cuando el blog se cargue desde un iframe, que es el mismo caso de la Vista Previa, ya que es un iframe.
      El script es muy sencillo:
      <script>
      //<![CDATA[
      function ocultarIframe(){
      if (top.location != location) {
      var elementos = document.getElementsByClassName('header-outer');
      for(var i in elementos)
      elementos[i].style.display = 'none';}}
      window.onload = ocultarIframe;
      //]]>
      </script>

      En ese caso he puesto header-outer que es la clase de la cabecera, por lo tanto la cabecera no se mostrará en la Vista Previa (ni ningún otro iframe).
      Puedes cambiar esa clase por la del elemento que quieras ocultar.

      Eliminar
  23. Potro se que no va conforme a lo que publicaste, pero necesito una mano!!! es necesario poner en la pagina que las personas acepten los cookies??? yo uso blogger pero si es necesario tienes algún tutorial de como poner el botón de aceptar cookies de mi sitio...

    ResponderEliminar
    Respuestas
    1. No sé si sea necesario Rudy, sé que es una ley española así que no estoy al tanto de ello (soy de México).

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

      Eliminar
    3. Rudy, quizás este tutorial te pueda servir, es el que yo tengo implantado en mi blog: http://www.pizcos.net/2013/09/ley-cookies-analytics.html

      Eliminar
  24. Hola!!!! me puedes echar una mano por favor?? te cuento,me estoy creando un blog nuevo,y algo tan simple como poner el fondo y la cabecera del blog,me está volviendo loca,pues no me queda bien,no te se éxplicar...por ello te pongo el enlace para que eches una ojeada...http://nellyblanco.blogspot.com.es/
    pues la cabecera creo que está bien pero el fondo no cubre todo...hayy!! que mal me éxplico,a ver si viendo mi blog me dices algo,muchas gracias,eres muy amable.Un saludo!!!

    ResponderEliminar
    Respuestas
    1. Hola cristall, entra en la edición HTML de tu plantilla y elimina el background que está dentro de .body-fauxcolumn-outer .cap-top {
      Con eso se dejará de mostrar ese fondo blanco que cubre la parte superior del blog.
      Saludos.

      Eliminar
  25. Que tal potro, me alegra que el blog este de vuelta. Una peticion: podrias enseñarlos a instalar Nivo Slide en blogger?

    Saludos Master !!!

    ResponderEliminar
    Respuestas
    1. Gracias PES KITS, te dejo un enlace de Chica Blogger donde explica cómo instalar Nivo Slider en Blogger:
      http://chicablogger.com/anadir-nivo-slider-en-blogger/

      Eliminar
  26. Hola potro, necesito tu ayuda, esta viendo en herramientas para webmaster, y me salen estos errores y no se porque, tambien ha bajado los visitantes en mi blog, saludos y que bueno que ya regresastes.
    Todos los datos
    Sin filtro
    567
    Elementos con errores
    Tipo de error
    Falta: updated
    567
    Elementos con el error
    Tipo de error
    Falta: author
    567
    Elementos con el error

    ResponderEliminar
    Respuestas
    1. Hola eduardo, no mencionas cuál blog estás analizando, pero según parece te faltan algunos microdatos Schema, específicamente el del autor tal vez te sirva añadir el código del autor:
      http://ciudadblogger.com/2012/10/como-mostrar-la-foto-del-autor-en-los-resultados-de-busqueda-de-google.html

      Lo del "sin filtro" no sé porqué sea.

      Eliminar
  27. Buenas tardes:

    Es una solución magnífica, pero tengo un problema, el submenú queda visible, queda expandido todo el sbmenú de todas las páginas como cuando haces clic en una.

    Ni idea como solucionarlo y me gustaría ya que como dije es una solución magnifica y sobre todo muy práctica.

    (Nota: el efecto deslizante si funciona, pero como dije con todo el sbmenú expandido (visible) )

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola, he entrado al blog de tu perfil y lo veo funcionando bien, no he encontrado el problema que mencionas.
      Saludos.

      Eliminar
    2. Buenas noches.

      Ante todo agradecido por la contestación sobre todo teniendo en cuenta el contenido temático de mi blog.

      Después de este comentario hice otro donde decía que ya estaba solucionada gracias a un comentario, concretamente de Pedro PC - Admin., lo hice así y solucionado.

      Prácticamente todo lo que tengo en mi blog ha salido de aquí, es siempre mi primera opción a la hora de implantar algo y punto de referencia para buscar más temas.

      Un saludo y buena noche.

      Eliminar
    3. Genial, me alegra que lo hayas resuelto. ¡Saludos y gracias por tu comentario!

      Eliminar
  28. Buenas tardes Potro, me gustaria saber si me puedes explicar la forma en que tienen incrustado el video de youtube en esta pagina, por lo que veo es una imagen que al hacer clic carga el video, me gustaria implementar este metodo en mi blog ya que tengo mucho videos y tarda mucho en cargar todos de la forma normal, creo que este metodo ahorraria mucho tiempo de carga, espero que me puedas ayudar porque por mas que busco no encuentro la forma, saludos desde México. URL: http://goo.gl/xeOL4u

    ResponderEliminar
  29. Buenas tardes Potro, me gustaria saber si me puedes explicar la forma en que tienen incrustado el video de youtube en esta pagina, por lo que veo es una imagen que al hacer clic carga el video, me gustaria implementar este metodo en mi blog ya que tengo mucho videos y tarda mucho en cargar todos de la forma normal, creo que este metodo ahorraria mucho tiempo de carga, espero que me puedas ayudar porque por mas que busco no encuentro la forma, saludos desde México. URL: http://goo.gl/xeOL4u

    ResponderEliminar
    Respuestas
    1. Hola Alfredo, procuraré publicarlo esta semana ;)
      Saludos.

      Eliminar
    2. Buenas noches.

      Ante todo agradecido por la contestación sobre todo por el contenido temático de mi blog.

      No se si llegó pero más tarde de enviar este comentario hice otro donde decía que estaba solucionado gracia a un comentario, concretamente de Pedro PC - Admin., lo hice así y quedó bien.

      Casi todo lo que tengo en la plantilla del blog ha salido de aquí, es siempre mi primera opción a la hora de implantar algo.

      Un saludo y buena noche.

      Eliminar
  30. Potro hermano se que este es otro tema, pero queria pedirte el favor para que nos explique como lograr esto bien detallado.

    Por favor como se logra esto bien explicado “Responsive de YouTube o Cualquier elemento”. https://www.youtube.com/watch?v=V2VToIDHWIw

    ResponderEliminar
    Respuestas
    1. Hola Antonio, mira esta entrada de Oloman, ahí ha explicado cómo hacer adaptables tanto las imágenes como los videos:
      http://www.oloblogger.com/2012/12/responsive-imagen-tabla-videos.html

      Eliminar
    2. hola potro ese blog es dificil osea no entiendo bien sus explicaciones, si pudiera usted sacar algun post con eso seria genial.

      Eliminar
    3. Por ahora no creo publicar sobre el tema de los videos, pero no es complicado . La idea es que los estilos que empiezan con .video-wrapper { los pongas antes de ]]></b:skin> y cuando quieras que un video sea "responsive" usa el código que muestra ahí abajo en su entrada.
      No puedo extenderme demasiado con la explicación por respeto al trabajo de Oloman, pero puedes preguntarle más detalles a él, estoy seguro que podrá resolver las dudas que tengas.
      Saludos.

      Eliminar
  31. muy interesante, gracias potro. por estar de vuelta

    ResponderEliminar
  32. Hola Potro, yo quiero hacer flotar la barra lateral derecha de mi blog, es la única barra lateral que tengo, sucede que las entradas son muy largas y para utilizar las opciones de mi barra lateral tienen que subir y subir y subir para poder utilizarlas.

    ¿Como puedo hacer que mi barra lateral derecha sea flotante?

    No encontré un post tuyo que explicara eso, así que perdóname por publicar mi pregunta aquí :S

    Gracias Potro!

    ResponderEliminar
    Respuestas
    1. Hola Joan, en teoría debe ser el mismo procedimiento, sólo cambia donde va el ID del menú por el ID de tu sidebar.
      Saludos.

      Eliminar
    2. Tienes razón Potro pero, es que en mi barra lateral derecha tengo gadgets, no sé como hacer que todos floten igual al mismo tiempo y respetando sus espacios, por que cada gadget tiene su ID y no se si podría hacerlos flotar cada uno sin problemas o sería mas sencillo hacer que toda la barra lateral derecha flote pareja, el problema es que no se si la barra lateral tenga ID por que no puedo ponerle un titulo para verla en edición HTML, solo los gadget tienen titulo D:

      Espero me entiendas y de nuevo mil gracias Potro!

      Eliminar
    3. Por so te decía que pongas el ID de la sidebar para que sea ella la que flote junto con todo lo que tenga dentro. Localiza el contenedor de la sidebar, puedes identificarla con el primer gadget que tengas en ella, si no tuviera un ID asígnale uno.
      Si se te complica identificar su ID dime en cuál plantilla quieres hacerlo.
      Saludos.

      Eliminar
  33. Hola, Potro. Buenas noches. Qué gusto que hayas regresado. Ten por seguro que muchos ciudadanos ya extrañábamos tus enseñanzas.

    Bueno. Te comento que en el blog que administro he implementado dos diferentes menús, y quisiera saber si es posible adaptar ambos con este script para que se hagan flotantes y, de ser posible, que me orientaras para saber cómo hacerlo.

    Por otro lado, al ver tu blog de pruebas, me surgió la curiosidad por saber cómo hiciste para que se mantengan seleccionadas las páginas en el menú, ya que es algo que he intentado en Blogger y, honestamente, no he sabido cómo hacerlo.

    De antemano, agradezco tu atención, tu tiempo y paciencia. Un abrazo fuerte.

    PD. La dirección del blog es esta.

    ResponderEliminar
    Respuestas
    1. Hola Daniel, muchas gracias.
      En el blog de pruebas el menú que he usado es el que Blogger trae por defecto, el menú de Páginas; ese menú ya tiene esa característica.

      Para lo otro, sólo repite esta parte del código:
      $(function() {
      var $flotarMenu = $("#Menu1"),
      $window = $(window),
      offset = $flotarMenu.offset();
      $window.scroll(function() {
      if ($window.scrollTop() > offset.top) {
      $flotarMenu.css({'position' : 'fixed', 'width' : '880px', 'top' : '0px'});
      } else {
      $flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
      }
      });
      });
      Es decir, que justo debajo de ese fragmento, agregues esto:

      $(function() {
      var $flotarMenu = $("#Menu2"),
      $window = $(window),
      offset = $flotarMenu.offset();
      $window.scroll(function() {
      if ($window.scrollTop() > offset.top) {
      $flotarMenu.css({'position' : 'fixed', 'width' : '880px', 'top' : '0px'});
      } else {
      $flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
      }
      });
      });

      Saludos.

      Eliminar
    2. Muchas gracias, Potro. Ya funciona de maravilla.

      Un saludo. Que pases buen fin de semana.

      Eliminar
  34. Muy útil el tutorial, a mí me sirvió. Dicho esto, tengo una consulta xD.. ¿cómo hago para numerar los comentarios de mi blog como se ven aquí?, si está por aquí el tuto no lo encuentro :P ¿me podrían pasar el link o algo?

    Saludos

    ResponderEliminar
    Respuestas
    1. Claro, aquí hay un tuto que te servirá:
      http://www.oloblogger.com/2012/01/numerar-los-nuevos-comentarios-blogger.html

      Eliminar
    2. Ok muchas gracias, me funcionó :D

      Eliminar
  35. Hola Potro como esta, me alegro por tu regreso...Quiero colocar el truco en mi blog pero no se como localizar el ID del gadget de pagina,por favor dime como puedo buscarlo, espero tu repuesta.

    ResponderEliminar
    Respuestas
    1. Por defecto es #PageList1
      Algunas veces puede ser #PageList2, #PageList3, etc.

      Eliminar
  36. Sabes como se puede hacer esto en wordpress. ya lo intente y no funciono, en mi blog de blogger si funciono, pero en el de wordpress no :c

    ResponderEliminar
    Respuestas
    1. Sólo lo he probado en Blogger, pero tal vez debas quitar esta parte:
      //<![CDATA[

      Y esta parte:
      //]]>

      Del primer código.

      Eliminar
  37. Hola Potro!
    Tengo un blog sencillito sencillito y de vez en cuando me paso por aquí a solucionar problemas que me han ido surgiendo. Esta vez me ha surgido un "problemón del 15.8" (que te parecerá una tontería, pero que a mi me requema mucho!), y es que cuando pongo una imagen en un gadget, aunque la ponga en formato .png, me la deja con fondo blanco y yo lo que quiero es que aparezca recortada, sin fondo.
    Se puede hacer algo o es capricho de Blogger que salga así??
    Mi blog es: Reblogzándolo todo.
    Por si necesitas echar un vistazo rápido….

    Gracias!

    Ah! por si acaso… Mi navegador es Safari, pero lo he probado en Explorer y en Chrome y se ve igual.

    ResponderEliminar
    Respuestas
    1. Hola Rosella. Lo que sucede es que tu plantilla tiene especificado que las imágenes deben tener un fondo blanco, por eso las imágenes con transparencias muestran ese fondo blanco.

      La forma de resolverlo es quitar tanto el padding y background que están dentro de:
      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img

      En lugar de ese padding y background pon esto (para que no pierdas el efecto de los bordes blancos)
      border: 5px solid #FFF;

      Eliminar
    2. Vale… Ya lo he probado y funciona! Muchas Gracias!!
      Una sola cosita más… si pongo:

      border: 0px solid #FFF;

      Me saldrán las fotos sin el borde blanco? Porque en realidad el borde me da igual y ahora con el fondo transparente incluso ni me gusta.

      Gracias de nuevo Potro, y siento haberme salido del tema de la entrada….

      Eliminar
    3. Pues, basta con no poner esa línea, o sea, que si no quieres que tengan el borde blanco sólo quita la línea que te dije:
      border: 5px solid #FFF;

      Saludos!

      Eliminar
  38. Hola Potro , disculpa tengo mi blog http://enamorados-2.blogspot.com/ y necesito ayuda como poner el gadet que vez con las redes sociales y buscador flotante , no encuentro el ID y me urge me ayudes por favor , gracias espero tu respuesta.

    ResponderEliminar
    Respuestas
    1. Hola Mariela, el ID de ese gadget es #autonav

      Eliminar
  39. Hola PROTO, nuevamente estoy por aquí. Y la razón es que viendo el contenido del post, me acorde de una plantilla (http://dynamicmag-sbtemplates.blogspot.mx/) que el menú scroll flota al momento de bajar la página, me preguntaba ¿Puedo obtener todo el código del menú? (Incluyendo los estilos), si se puede, ¿Cómo los obtengo?, todo esto lo quiero aplicar a esta plantilla (http://demo.mybloggerthemes.com/2014/01/smart-news-responsive-blogger-templates.html) sustituyendo el menu que tiene ahí, si te das cuenta es casi la misma temática y diseño, no sé si el código sea igual o tenga un parecido. ¿Me puedes ayudar? Sin más que decir, espero que me puedas ayudar PROTO, saludos y gracias!

    ResponderEliminar
    Respuestas
    1. No sé decirte si sea el mismo código ya que las plantillas de Sora tienen todo escondido en su versión gratuita, de hecho no se pueden personalizar por la misma razón :(

      Eliminar
  40. Buenas Potro, hice esto en un blog de pruebas (for1dtemplates.blogspot.com) y al hacer scroll funciona y demás pero al pasar el ratón por una imagen, la misma se coloca encima del menú, ya he probado con el z-index y nada. Por favor, hechale un vistazo.

    ResponderEliminar
    Respuestas
    1. Hola Isaac, es que la clase .rmlink tiene un z-index muy alto, ya sea que lo quites o lo reduzcas y con eso se resolverá.

      Eliminar
    2. Muchas gracias me funcionó. Ahora, ¿como le hago para que se le vaya la sombra al menú cuando esta en su zona original y que solo se le ponga cuando se haga scroll?

      Eliminar
    3. Pon none en los estilos del box-shadow que pusiste dentro del script. Después pon debajo de #menunav { el box-shadow que quieres.
      Toma en cuenta que si después de haber bajado el scroll el usuario sube de nuevo, el menú no recuperará la sombra del box-shadow.

      Eliminar
  41. hola portro crees que funciones con el menu menu-horizontal-con-subpestanas-y-buscador-integrado ? saludos y muchas gracias .

    ResponderEliminar
    Respuestas
    1. Debe funcionar luis, sólo sustituye el ID por el del menú, en caso de que el menú no tenga un ID (ahora mismo no recuerdo) puedes agregarle cualquier ID.

      Eliminar
  42. Hola potro, muy buen tutorial, yo puse que flotara el popular posts de mi blog, pero este al llegar a la parte del footer, pasa por arriba, como le podría hacer para que se detenga en un cierto punto, en este caso, antes de llegar al footer

    ResponderEliminar
    Respuestas
    1. Hola Sawyer James, aquí hay un fiddle que te puede servir, sólo cambia los IDs por los tuyos:
      http://jsfiddle.net/bryanjamesross/VtPcm/

      Eliminar
  43. ¡Hola! Sigo el blog desde tiempos inmemorables (no tantos tal vez, pero sí desde que empecé mi andadura en blogger)

    Tengo una duda, resulta que yo puse el menú que nos indicas en otras entradas, vamos, HTML. Quiero colocarlo en la parte de arriba fijo, pero sólo consigo que esté encima de la cabecera... yo lo quiero donde se supone que fuera el navbar. He jugado con los márgenes, y conseguí "subirlo" arriba... el problema está en que cuando se ve con diferente resolución.... no queda bien.

    ResponderEliminar
    Respuestas
    1. Hola Nagammah L., localiza el ID de tu menú, y pon estos estilos:

      #ID {
      position: fixed;
      top: 0;
      left: auto;
      }

      Ahí el problema es que quizá el menú no quede centrado, en esos casos lo mejor sería añadir a esos estilos un width: 100%; y quizá cambiar el left: auto; por left: 0;

      Eliminar
  44. Ola Potro Una Pregunta Donde Consigo El gadget de donaciones de paypal que se encuentra en las entradas de tu blog estaria agradecido x la respuesta.

    ResponderEliminar
    Respuestas
    1. Hola Luis. PayPal no tiene las mismas opciones para todos los países, lo mismo con los tipos de cuentas. No sé si en tu país esté habilitada la opción de donación, o si sólo esté disponible para las cuentas Premier o Empresas.
      En mi caso esa opción está en "Herramientas: comercios" > "Botones de PayPal" > "Botón Donativo".

      Saludos.

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

    ResponderEliminar
    Respuestas
    1. No sé si se pueda, porque el menú seguiría ocupando todo el ancho y tapará el buscador o cualquier otro elemento.

      Pd. Elimino el comentario por el aviso en el formulario.

      Eliminar
    2. Ok, Bueno, y no sabes como volverlo un Poco Transparente?

      Eliminar
    3. Puedes aplicarle opacidad, pero el elemento sigue encima del otro y no se podrá utilizar el que esté debajo.

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

    ResponderEliminar
    Respuestas
    1. Hola liquido, las URLs de las páginas incluyen esa /p/ en su dirección, así es para todos, y es para distinguir que se trata de una página y no de una entrada.
      En cuanto a lo de esta entrada, puede ser que no funcione porque tienes otro script que podría estar interfiriendo con este, me refiero a la barra fija que tienes abajo del blog.

      Saludos.

      Pd. Elimino el comentario para evitar posibles sanciones con AdSense, ya sabes, por lo de las apuestas :/

      Eliminar
    2. Gracias Potro, ahora ya entiendo el porque de esa "p" tan rara. He eliminado la barra fija que había como dijiste pero sigue sin desplazarse puede haber algo mas que no la deje desplazarse? Gracias

      Eliminar
    3. Gracias Potro, ahora ya entiendo el porque de esa "p" tan rara. He eliminado la barra fija que había como dijiste pero sigue sin desplazarse puede haber algo mas que no la deje desplazarse? Gracias

      Eliminar
    4. Debe ser lo que te decía en el otro comentario, o los spoilers, o el botón de subir, me inclino más a esto último.

      Eliminar
    5. Acabo de notar que usas Prototype y Scriptaculous, en la entrada hay un enlace que habla sobre ello, hay que hacer cambios en el script de jQuery, o si no quieres complicarte la vida elimina esas librerías.

      Eliminar
  47. ME PARESE FANTATICO PERO NO ME DA..... MI WEB ES PASCOPERU.NET SI PUDIERAS VER K TIPO DE PLANTILLA WEB ES

    ResponderEliminar
    Respuestas
    1. No lo veo puesto en tu blog, pero no sé qué tan posible sea que funcione ya que tu menú (que por cierto, su ID es #menu) usa al menos dos scripts para su funcionamiento, así que tal vez ponerle uno más haga que no funcione, o que otra cosa deje de funcionar.

      Eliminar
  48. Hola Potro, para el caso de las Vistas Diamicas, como lo puedo aplicar?

    ResponderEliminar
    Respuestas
    1. Me temo que no es posible, en esas plantillas nada de esto se puede hacer :(

      Eliminar
  49. Tengo dramas en poner hasta el minimo gadgets... soy novato en esto, kiero poner en la barra lateral este ranking (http://www.2700chess.com/files/topten.png) y no me lo toma...

    ResponderEliminar
    Respuestas
    1. Hola, si simplemente quieres poner la imagen en un gadget, entra en Diseño y da click en Añadir un gadget, ahí selecciona "Imagen", en las opciones que se mostrarán verás la opción de poner la URL de tu imagen, o de subir una desde tu ordenador. Con ese gadget podrás mostrar esa imagen en tu blog.

      Saludos.

      Eliminar
    2. Gracias capo, como vera, soy re novato, je. Me vino me 10 tu ayuda. Es un blog de ajedrez, de paso les invito a visitarlo... www.defensadelapaz.blogspot.com.ar

      Eliminar
    3. Ya que estamos, he visto uno similar a este ranking pero con jugadores argentinos, pero no se como lo hicieron, y solo en un blog lo vi y al ir al link luego da error, es muy dificil o lo pued ehacer cualkiera?

      Eliminar
    4. No sé decirte, quizá sólo es una imagen que ellos hicieron y le pusieron los datos que quisieron. Sé que suena tonta mi respuesta pero al menos yo así lo haría :P

      Eliminar
    5. Jaja, nha, no es tonta, solo ke yo no le explique bien: es una imagen, si, pero automaticamente todos los dias se actualizada segun los resultados se van dando.

      Eliminar
  50. Hola, Potro.

    Estoy intentando colocar una lista de enlaces de forma flotante con tu código, pero tengo el problema de que se me desplaza por debajo de los otros elementos con cualquier z-index que le asigne (en mi desesperación he llegado a poner seis líneas completas de nueves). He leído tu entrada y todos los comentarios y no he conseguido solucionarlo. No entiendo demasiado de html, por lo que te agradecería mucho cualquier clase de ayuda que pudieras prestarme.

    Y ya que estoy, soy incapaz de encontrar la forma de centrarlo, de manera que no me quede un espacio a la derecha (es un LinkList de Blogger). ¿Hay alguna forma sencilla de hacerlo o tengo que hacer una barra desde cero y añadirla yo?

    Mi blog es mi nombre y mi primer apellido mas un punto es.

    Muchas gracias por todo,
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Luis Ignacio. Entré a tu blog y veo el gadget, pero no encuentro el problema que mencionas, ¿ya lo has resuelto? en caso contrario, ¿has probado verlo desde otro navegador? yo he entrado desde Safari y desde ahí se ve todo bien, incluso centrado. Eso sí, el último enlace está debajo del primero debido a que no cabe por el ancho que tiene el gadget, aparte de eso lo veo todo bien.

      Si hay algo más en lo que pueda ayudarte házmelo saber.
      Saludos.

      Eliminar
    2. Hola, Potro.

      Resulta humillante, pero se me olvidó cambiar la segunda ID del código, y dejé PageList1 en lugar de LinkList1, que es lo que tengo yo. Lo solucioné horas después de mandarte el mensaje (el código funciona perfectamente, muchas gracias). Con el z-index de 99 fue suficiente =)

      Lo de los botones sí que me vuelve loco. En algunos ordenadores se ve en dos lineas, pero en el mío se ve con un hueco a la derecha. Lo ideal sería hacer una barra que se ajuste automáticamente a cada resolución, pero yo me conformo con ser capaz de centrarla, para así poder reducir el tamaño y que al menos quede centrado y en una linea siempre, pero ni siquiera soy capaz de encontrar el código del widget para intentar ajustarlo. ¿Sabes de alguna solución que me pueda servir?

      Muchas gracias.

      Eliminar
    3. No te preocupes Luis Ignacio, son descuidos que todos cometemos ;)
      El widget es PageList1, o sea, el gadget de Páginas. Ahora mismo entré de nuevo y ahora lo veo todo en una línea y centrado, parece que ahora sí ya lo tienes todo resuelto.
      Saludos.

      Eliminar
    4. La verdad es que sí. De todas formas sin tu página no habría sido capaz. Para los que le pase lo que a mi: instalaros los navegadores más comunes y visualizad el blog en todos. Por alguna razón lo que estaba en una línea en Firefox se veía en dos en Chrome.

      Un saludo.

      Eliminar
  51. Cómo hago para saber el ID del gadget?

    ResponderEliminar
    Respuestas
    1. Busca en tu plantilla el nombre del gadget, junto a él verás su ID, por ejemplo:
      id='PageList1'

      Eliminar
    2. Pero cómo hago para ubicar el gadget en la plantilla? Si no es 'PageList1', cuál puede ser? cómo saberlo? Perdoname si es una pregunta tonta, pero soy del siglo pasado!!

      Eliminar
    3. Como te decía, buscando el nombre del gadget podrás localizar su ID, por ejemplo, si al gadget le pusiste por título "Mi Menú" entonces busca en tu plantilla el texto "Mi Menú", al lado de él verás el ID del gadget. El titulo del gadget puedes verlo desde la sección Diseño.

      Eliminar
    4. Muy clara tu explicación, mil gracias, pero por momentos estas cosas me superan. Identifiqué el gadget y reemplacé el ID por "HTML6" pero el menú sigue fijo. Qué pude haber hecho mal?

      Eliminar
    5. Hola de nuevo Ana, ¿en cuál blog lo has puesto?

      Eliminar
  52. Me pareció un tutorial excelente! Genial! Muchas gracias Potro!
    Aun así tengo una duda, como podría modificar la opacidad del menú mientras navega sobre la pagina al ir bajando? Intente cambiarla pero cambia también su opacidad cuando el menu esta fijo. Muchas gracias! Saludos desde Barcelona!

    ResponderEliminar
    Respuestas
    1. Hola Andrea, en esta parte del código puedes establecer una opacidad:

      $flotarMenu.css({'position' : 'fixed', 'width' : '880px', 'top' : '0px', 'opacity' : '0.5'});
      } else {
      $flotarMenu.css({'position' : 'relative', 'top' : 'auto', 'opacity' : '1'});

      La primera parte es para cuando esté flotando, la segunda para cuando regrese a su posición original.

      ¡Saludos hasta Barcelona!

      Eliminar
  53. Un post genial! Pero tengo una duda... Me gustaría que el ancho del menú ocupara todo el ancho del blog y no sé como hacerlo. He probado a modificar el ancho del widget y lo único que hace es alargarse por la derecha pero por la izquierda se mantiene el mismo largo y me gustaría que se variara por ambos lados por igual, no se si me estoy explicando bien. Te dejo mi blog para que le eches un vistazo a ver si ves lo que te digo. Un saludo!
    http://confessionsofanindiegirl.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Te explicas bien pero me temo que no es posible. Cualquier elemento dentro del blog no puede ocupar más que el ancho mismo del blog, algunos menús, cabeceras, footers, etc. parecen ocupar todo el ancho del blog pero lo que en realidad sucede es que la imagen de fondo (del blog) simula que esos elementos ocupan todo ese ancho pero en realidad no es así. Parece que sólo la plantilla Awesome Inc. tiene esa característica que deseas, no sé si quieras probar con esa plantilla para conseguir ese tipo de menús. Saludos.

      Eliminar
  54. Hola Potro, no consigo que las letras del menu queden centradas, como lo podria conseguir.

    Gracias por tus conocimientos

    Un saludo,

    Pedro

    ResponderEliminar
    Respuestas
    1. Quizá uno de los tres margin-left que pusiste debas ponerle otro valor, por ejemplo -550px

      Eliminar
  55. Hola Potro.

    Tienes un blog sensacional. Una pregunta:
    - Es posible usar este tutorial (hacer flotante el gadget de paginas) en tu template de bloggerest?

    La instalé y he realizado el copy-paste que explicas aqui pero no me funciona. Te aviso que domino mas bien poco

    ResponderEliminar
    Respuestas
    1. Hola Rubén, no lo he intentado, en teoría debería funcionar, a menos que los scripts de esa plantilla no sean compatibles con este truco. Toma en cuenta que esa plantilla ya tiene jQuery, así que si aplicas lo de esta entrada ya no necesitas poner la primera línea.

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

    ResponderEliminar
  57. Hola Potro,

    te escribo sólo porque he intentado de todo, buscado en google... total que no sé cómo hacer para centrar el texto de los títulos y justificar el texto de resumen en un gadget generador de entradas aleatorias.

    La cuestión es que es un gadget que agregé desde una página web hace mucho tiempo y lo único que puedo hacer toquetear es desde la plantilla lo siguiente:

    No puedo escribir el código html en el formulario de comentarios por lo tanto espero que no te importe abrir un txt que he subido de visualización online aquí http://tny.cz/0a53c03c

    Me gustaría saber si es posible hacer lo que te he comentado en el principio con esto. Si es así, luego podría hacer lo mismo con otro de comentarios recientes, ya que me tocaría hacer un proceso similar.

    Un abrazo y gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Esa es una estructura muy básica de un gadget de Blogger, ahí mismo no hay información que nos diga a qué elemento se le puede aplicar algún estilo, así que habría que ver el gadget funcionando para que desde ahí podamos ver si tiene alguna clase o ID que podamos usar.

      Eliminar
    2. Hola de nuevo Potro,

      primero que nada gracias por tu atención. El gadget al que me refiero es uno generador de entradas aleatorias [quiero centrar los títulos de las entradas y justificar el resumen que aparece justo debajo], y luego el gadget de los últimos comentarios [me gustaría justificar los últimos comentarios y dejar en cursiva].

      Los dos gadgets están operando en mi blog haycomprension.blogspot.com en el menú sidebar a la izquierda [justo debajo de los gadgets de google+ y seguir en blogger].

      ¡Muchas gracias!

      Eliminar
    3. No sé si funcione en esos gadgets, pero prueba usando estos estilos:

      .bp_item_title {
      text-align: center;
      }
      .bp_item_summary {
      text-align: justify;
      }
      .w2b_recent_comments li span {
      text-align: justify;
      }

      Eliminar
    4. Muchas gracias de nuevo por tu respuesta.

      He introducido los 3 códigos en CSS desde el apartado personalizar de blogger, sólo ha funcionado el de justificar el texto en el gadget de los últimos comentarios, los otros dos para dar formato a las entradas aleatorias no ha dado resultado en el gadget :(

      Si se te ocurre algo más, o si me das indicaciones de ponerlo en otro sitio te estaría muy agradecido.

      Un abrazo.

      Eliminar
    5. Temía que ese no funcionaría, y es que se trata de un iframe. Por desgracia los iframes no podemos cambiarlos en su diseño de ningún modo ya que son páginas independientes a nuestro blog.

      Eliminar
  58. Encontré otro gadget que hace la función de generar entradas de forma aleatoria pero lo que no me gusta es que agrega un punto a la izquierda de la imagen ni tampoco encontré la forma de agregarle un sumario resumen del contenido, es decir, solo aparece la imagen y el título de la entrada con el número de comentarios que tiene cada una [esto si se puede quitar, y de hecho lo haría].

    Éste es el código: http://tny.cz/a4c0d9aa

    ¿Sabrías decirme si se puede quitar el punto que va a la izquierda de la imagen y agregar el lengh summary [texto en resumen del contenido de la entrada]?

    Gracias Potro.

    ResponderEliminar
    Respuestas
    1. No sé, tendrías que preguntar en el sitio donde lo tomaste, yo intenté probarlo en un blog pero el navegador se detiene a causa de ese código.

      Eliminar
    2. gracias por todo Potro.

      Un saludo

      Eliminar
  59. yo tengo mi menu tengo una plantilla descargada online y tengo un menu desplegable y quisiera poner flotante C:

    ResponderEliminar
    Respuestas
    1. En la entrada se menciona qué hacer para aplicarlo a otros gadgets.

      Eliminar
  60. ¡Hola Potro! Consulta: ¿Cuál es el ID de la página que mencionas en las instrucciones? No sé cómo resolver este punto. ¡¡¡Gracias!!! El sitio es: www.pensamientosliterarios.com

    ResponderEliminar
    Respuestas
    1. Potro, ya lo solucioné. No puedo creer todo lo que estoy aprendiendo con vos y CiudadBlogger. Ahora, me queda espacio arriba de la barra de menú y entre esta y la barra de "últimas noticias" mucho espacio. ¿Cómo puedo corregir esto? Gracias :)

      Eliminar
    2. Hola F. D.P., intenta añadir estos estilos para reducir el espacio entre ambos gadgets:

      #crosscol-overflow .widget {
      margin: 0px 0 !important;
      }

      Eliminar
    3. ¡Gracias Potro! ¿Dónde coloco esos estilos?

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

      Eliminar
  61. Estimado Potro, como no se adonde preguntar voy usar esta entrada. No se si lo que quiero ya esta resuelto, anduve mirando y no encuentro la solución, mi inquietud es saber si puedo hacer una lista de entras favoritas, la que a mi entender deberían verse aunque haya pasado el tiempo. Desde ya muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Unknown, no sé cómo quieras hacerlo, por ejemplo, el gadget "Entradas Populares" muestra las entradas que se supone tienen más visitas. Si quieres que sean TUS favoritas podrías crear un gadget de Lista de Enlaces y ahí poner los links a las entradas que te gustan o que quieres promocionar.

      Eliminar
    2. Muchas gracias Potro voy a intentarlo

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

    ResponderEliminar
    Respuestas
    1. En la entrada se menciona ese detalle.
      Elimino el comentario por el aviso que está aquí en el formulario.
      Saludos.

      Eliminar
  63. Hola, muy interesantes tus aportes amigo, yo recien incio un blog de tutoriales, me gustaria compartir este articulo en mi blog, sera' que puedo?

    ResponderEliminar
    Respuestas
    1. Por supuesto, siempre que agregues la fuente no hay ningún problema ;)

      Eliminar
  64. -Hola Potro, oye yo lo único que quiero es saber si se puede extender (horizontalmente como esta) mi menú a lo largo del blog, http://cantosparadios.blogspot.mx/, por si pongo textos que abarquen mucho espacio, y que a la par de eso no obstruyan algún otro componente del blog. Aparte de eso hay blogs que tienen una imagen de fondo en el menú, en cada palabra quiero decir como este: http://btemplates.com/2009/blogger-template-paper-wall/demo/ pero lo que yo necesito es que esa imagen se desplace hacia donde se ponga el puntero, no que aparezca como ahí, solo que se desplace la imagen de fondo... Te agradecería Potro...-

    ResponderEliminar
    Respuestas
    1. Supongo que tendrías que usar otro tipo de menú, o de plantilla, desconozco si pueda realizarse todo lo que deseas con tu menú actual.

      Eliminar
    2. -OK entonces intentare cambiar el menú a ver como queda, claro guardando una copia de mi plantilla, a ver que pasa je je...-

      Eliminar
    3. -Ya lo modifique, tuve que cambiar el menu por completo por el tercero de este tutorial: http://www.oloblogger.com/2013/10/menu-con-hover-deslizante.html a este tipo de menu me referia con hover deslizante y me gusto el segundo que es el color negro con deslizador hover color gris, pero me salia mal, (no se si esta mal el del que lo publico o a mi me salia mal), pero tuve que usar el tercero que es el color gris con deslizador en borde rojo, y ayer me di a la tarea de modificarlo para que pareciera lo mas apropiado al anterior y quedo como lo necesitaba, bueno es para ser con solo pestañas y no subpestañas, pero crees si se le podrían hacer subpestañas o son diseñados para ser así?...-

      Eliminar
    4. Eso solo el autor del menú podría respondértelo ;)

      Eliminar
    5. -OK, veré si puedo modificarlo después, gracias....-

      Eliminar
  65. Hola :D en caso de tener una plantilla descargada, ahí cómo le hago? Es que no es tipo awesome o esa que dices D:

    ResponderEliminar
    Respuestas
    1. No sé decirte, yo sólo lo he probado en plantillas originales de Blogger. En plantillas personalizadas seguramente tendrás que hacer otros ajustes.

      Eliminar
  66. ¡Hola!
    Muchas gracias por tus tutoriales, me han servido de mucho ;)
    Tengo una duda, a este menú se le podría poner sub-pestañas? He visto algunos, pero por lo general están arriba de la cabecera, el que tu pones aquí, me va perfecto. Solo quiero que sea desplegable, se podría ? Y si es así, te pido que me pases el código (Si no es mucho abusar)
    Saludos, y de nuevo mil gracias.

    ResponderEliminar
    Respuestas
    1. Hola Abigail, este menú es que el que Blogger trae por defecto como gadget el cual no tiene la opción de ser multi nivel. Lo que puedes hacer es añadir uno que tenga esa característica y después hacerlo flotante, de hecho en la entrada hay una mención al respecto por si quieres aplicarlo a otro menú. Saludos.

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

    ResponderEliminar
  68. hola potro
    estoy trabajando en un blog de pruebas para cambiar la plantilla y pasarla al blog que uso normalmente... En el de pruebas escogí una plantilla de awesome inc y me surgió un pequeño problema que por más que le muevo no le sé; en el blog de pruebas apliqué el menú con buscador expandible y quedó perfecto, cuando le aplico lo que explicas en esta entrada, le pongo la segunda opción que es para esa plantilla y así de primera vista se ve bien y sí baja el menú cuando bajo el scroll, pero como que se ensancha hacia abajo, o sea le sale una linea gruesa hacia abajo y no se como hacerle para que no pase eso y quede del mismo grosor...
    me ayudas?
    y otra pregunta: ¿Cómo puedo poner el menú hasta mero arriba del blog, así justo en el borde?
    pliiisss help me!!! (jajajaja perdón por tanto comentario, pero soy un poco muy ansiosa, y siempre me has ayudado y me desespero cuando no me salen las cosas)

    ResponderEliminar
  69. Buenos días, como están? Espero que me ayuden con esta problemática, quiero que mi Menú de páginas flotente quede como esta en la imagen del siguiente link:

    http://3.bp.blogspot.com/-rCG9WZPx2Cg/Vb4ff0amKwI/AAAAAAAAERA/-CHqDQpnin4/s1600/pagina.png

    Pero hasta ahora solo he logrado que salga como en el enlace siguiente:

    http://hdenlatino.blogspot.com/

    Este es el Código que he utilizado:

    https://mega.co.nz/#!gcxz0Q5K!5r664zO987wJyAAkLX13wqA9UGtQS_O5PT2Bmgg-Qgg

    Gracias de antemano...

    ResponderEliminar
  70. Hola Potro, te escribo aquí porque me gustaría colocar la imagen del logo de mi blog que aparezca cuando el menu deslizante se queda fijo. ¿Se podría hacer?

    Gracias amigo.

    saludos,

    Pedro

    ResponderEliminar
  71. Amigo no me ha funcionado, pongo el id que en reemplazo de las letras rojas pero no cambia nada. No se que hacer :/

    ResponderEliminar
  72. Hola! tu blog me ha servido demasiado! sin embargo aquí tengo una pregunta: qué debo agregarle al código para que el gadget flotante se detenga antes de pasar sobre el footer?

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger