Botón "Ir Arriba" con jQuery que aparece y desaparece

1 de marzo de 2012 367 comentarios ,

Hace ya bastante tiempo vimos cómo poner las flechas de "Ir Arriba" e "Ir Abajo", ahí vimos tanto el método simple, como con un efecto deslizante usando Scriptaculous.

En esta ocasión veremos cómo poner el botón de "Ir Arriba" en el blog pero con la particularidad de que se encuentra oculto, sólo aparece cuando se baja la página y desaparece otra vez cuando se regresa a la parte superior del blog. Además, al funcionar con jQuery el desplazamiento de la página se vuelve con un efecto deslizante. Puedes verlo funcionar en este blog de pruebas, al bajar el scrollbar aparecerá el ícono para subir, una vez que subas al hacer click desaparecerá de nuevo.

Para ponerlo en tu blog entra en la Edición HTML y antes de </head> agrega jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Si ya lo tuvieras omite ese paso.
Ahora antes de ]]></b:skin> agrega los estilos:
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}

#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(http://lh5.googleusercontent.com/-luDGEoQ_WZE/T1Ak-gta5MI/AAAAAAAACPI/ojfEGiaNmGw/s60/flecha-arriba.png) no-repeat center center;
}
Por último, antes de </body> agrega el script:
<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>
Guarda los cambios y listo.
En color verde puedes ver dónde se modifica la distancia y el tamaño del botón. En caso de que quieras poner otra imagen distinta, cambia la URL en color azul por la de tu imagen; si haces eso deberás cambiar el ancho y alto del botón donde se indica de acuerdo a las medidas de tu imagen.

El ícono de la flecha estará del lado inferior derecho, si lo quisieras a la izquierda cambia
right: 30px; por left: 30px;
Y si lo quisieras arriba cambia bottom: 30px; por top: 30px;

Recuerda, que si ya tienes jQuery no debes poner el primer código, de lo contrario tendrás problemas de incompatibilidad.

Si te interesa otro método para tener el botón de Ir arriba, Ir abajo, e Ir al centro también con jQuery, puedes usar el método de Vku.


367 comentarios en:

" Botón "Ir Arriba" con jQuery que aparece y desaparece "

  1. Muy bueno!, lo usaré, saludos Potro!

    ResponderEliminar
    Respuestas
    1. Me alegro que te haya gustado Gray Wolf, saludos.

      Eliminar
    2. me aparecen los codigos en la cima como lo arreglo

      Eliminar
    3. El código debe ir antes de ]]></b:skin> no antes de <b:skin><![CDATA[/*

      Eliminar
  2. Excelente era justo lo que buscaba y combina con mi blog gracias por compartir!!

    Salu2 :)

    ResponderEliminar
  3. Gracias! Le cambié el color de fondo a la flecha para que "pegara" mejor con el estilo de mi blog y ha quedado perfecto! :D
    Muchas gracias!

    ResponderEliminar
  4. Gacias una vez más, me hacia falta lo de la flecha porque el blog es muy largo.

    Un saludo

    Manuel

    ResponderEliminar
    Respuestas
    1. Gracias a ti por tu visita Manuel, qué bien que hayas encontrado algo que tu blog estaba necesitando. Un saludo.

      Eliminar
  5. Muchas Gracias potro justo lo que necesitaba.

    ResponderEliminar
    Respuestas
    1. Por nada Jason Santoro, un abrazo!

      Eliminar
    2. Gracias. Oye Potro ay alguna forma de hacer una galleria de fotos en blogger como en wordpress. Se que se pueden cambiar fotos pero aun cada foto es grande y solo para arriba y abajo. En wordpress pueden poner muchas fotos en blockes como una galleria. Se puede hacer esto en blogger?? Muchas gracias.

      Eliminar
    3. No me queda muy claro como qué tienes en mente. Galerías hay muchas, y casi todas se pueden poner, pero no sé realmente a qué te refieras.

      Eliminar
    4. Mira esta foto alomejor me explico mejor en como una galleria de wordpress es muy diferente a la gallerias de blogger. Y como se puede hacer igual como al wordpress. http://i42.photobucket.com/albums/e307/AndThenWeKiss2006/GALLERIAS.png

      Eliminar
    5. Pues ahí no es cuestión de plataforma, sino del método que se use para acomodar las fotos. Si usas una tabla podrás tenerlas alineadas de esa manera:
      http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html

      Y ya estando todas así puedes aplicar Shadowbox para que se abran de mejor manera:
      http://ciudadblogger.com/2010/04/shadowbox-ventanas-modales-multimedia.html

      Eliminar
    6. Ah okay muchas gracias potro. Eres un life saver.

      Eliminar
  6. Demasiado Bueno Potro,

    Muchas gracias y a comenzar a ver que diseño se ve mejor !!

    Saludos !!

    ResponderEliminar
    Respuestas
    1. Gracias a ti por tu visita Emilio, buen fin de semana!

      Eliminar
  7. potro lo poce pero no me fucnciono sale el boton pero no acciona no hace nada

    ResponderEliminar
  8. Muchas gracias!! ya mismo lo voy a poner.Bss apretaos!!!

    ResponderEliminar
    Respuestas
    1. Luego nos presumes a ver qué tal te ha quedado ;)

      Eliminar
  9. ya esta resuelto el inconveniente gracias

    ResponderEliminar
    Respuestas
    1. Supongo que habrá sido un problema con jQuery, pero me alegra que ya lo has resuelto, saludos!

      Eliminar
  10. está genial, lo probaré en mi blog. Gracias, Saludos!

    ResponderEliminar
    Respuestas
    1. Que todo salga bien Marcos, buen fin de semana :)

      Eliminar
  11. LO puse, pero resulta que tiene mi blog fondo negro y no se ve, aunque al colocar el puntero sale para dar clic y si funciona, solo que no se ve, en donde cambio el color a fondo blanco para que se vea.

    Gracias potro, como siempre, nos traes trucos muy buenos, felicidades y muchas bendiciones a tu vida.

    Iglesia Cristiana Evangelica

    ResponderEliminar
    Respuestas
    1. El ícono de la flecha es una imagen, tendrías que cambiar la imagen por otra de otro color. Saludos.

      Eliminar
    2. Mirando bien, me encuentro con la sorpresa que el boton esta al lado izquierdo, no entiendo porque el codigo esta en right:30px y el otro problema es que el boton se muestra solo hasta que he bajado toda la pagina, no como el tuyo que se muestra mas rapido.

      Bendiciones Potro.

      Eliminar
    3. Es porque arriba de estos estilos has puesto un comentario que no debe ir en esa área, no de esa forma como está puesto:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    4. Muchisisisisisisisisisisisisimas Gracias Maestro, ya se soluciono el problema, que tremendo, gracias a ti, y a tus consejos, sigo aprendiendo muchisimo.

      Bendiciones maestro, y que el Señor bendiga tu generosidad al compartir tus conocimientos, se que muchos te lo agradecen.

      Eliminar
    5. Muchas gracias Gilberto, bendiciones para ti también, y los tuyos. Buen fin de semana.

      Eliminar
  12. Gracias, Potro, me interesa mucho para el blog de fotos además, así aumento el número de entradas por páginas y paso de usar las nuevas plantillas esas..ahora, sólo me falta el tiempo para tantas cosas estupendas que pones y que las quiero todas y ¡no me da lugar!...:)))j.
    Mil gracias, como siempre tú, facilitándonos las cosas.
    Un beso enorme

    ResponderEliminar
    Respuestas
    1. ojú, Potro..no me he atrevido, porque me he encontrado al revisar la plantilla una cosa que empieza a "así"

      script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='

      (es que no me deja esto ponerlo todo, claro)

      ( y sigue con mucho lío)

      y no sé lo qué es...:D..es que esa plantilla la copié del otro, aunque no uso todo lo que el otro tiene..
      Lo que pasa es que me da miedo de que entren en conflicto, ...??...ya sabes que soy una cateta en esto ( y en taaaantas cosas)..:)) si me puedes decir algo, te lo agradecería.
      aparece detrás del final de skin

      Eliminar
    2. Hola Sofía. No te preocupes por ese script, el de este botón ya está arreglado para evitar problemas con esos otros scripts como el que mencionas.
      Prueba ponerlo, si te diera problema vemos para qué usas ese de Mootools.js, a la mejor está ahí pero ya no lo estás ocupando.

      Un beso :)

      Eliminar
    3. :), ¡gracias!, entonces tranquila ya sí lo pruebo, si no ahora es porque es tarde para acá y mejor ya mañana por la mañana (despejada) no vaya ser que se me escape algo y ya te comento. ¡¡BESO!!

      Eliminar
    4. ¡pues ya está puesta!!, jaja, ya funciona!! cansada y todo ha quedado preciosa, haces que todo resulte fácil, eres un genio.
      (bueno, a lo mejor rediseño los colores que le he cambiado, no sé yo ahora mismo si quedan muy bien, jeje, pero ya eso es lo de menos, :DD)
      ¡muchísimas gracias, potro!
      Un beso enorme

      Eliminar
    5. ¡Ea! Ya lo vi funcionar :) Me alegra que no haya habido complicaciones.
      Te mando un beso grande, grande.

      Eliminar
  13. hecho pero mire y ya tenia el jquery pero era 1.5.1 y este es jquery/1.7.1, tiene alguna diferencia? con el que tengo me funciona bien...

    ResponderEliminar
    Respuestas
    1. La diferencia es la versión, la 1.7.1 es más actual que la otra, pero si así te funciona bien no hay problema ;)

      Eliminar
  14. potro podes hacer un tutorial del botón subir de taringa que los vi en muchos blogs

    ResponderEliminar
    Respuestas
    1. Puedes conseguirlo desde la página de Taringa:
      http://www.taringa.net/widgets/compartir

      O puedes usar uno de estos que ya lo tiene integrado:
      http://ciudadblogger.com/2011/09/botones-para-compartir-deslizantes.html
      http://ciudadblogger.com/2012/01/botones-para-compartir-estilo-taringa.html

      Eliminar
    2. no ese no,el botón subir que tiene taringa, que bajas un poco y te aparece, un botón subir, que si los apretas llegas hasta arriba. Imagen del boton:http://3.bp.blogspot.com/-TlXsXdv3z6I/T1JaqslZBEI/AAAAAAAACIc/r13chANCgA4/s1600/BOTONTARINGHA.png

      Eliminar
    3. Pues sólo cambia la ubicación de este mismo botón, y cambia la imagen por otra que se le parezca.

      Eliminar
  15. Hola El Potro, lo instale en mi blog y no aparece, aparte de que ha hecho que dejara de funcionar el menú deslizante de la parte superior que funciona con jQuery. Sólo tengo un código jQuery en la edicion HTML. He buscado en los gadgets y ninguno utiliza jQuery. Que conflicto hay?
    Saludos

    ResponderEliminar
    Respuestas
    1. El blog: http://grupoblogin2.blogspot.com/

      Eliminar
    2. Hola Josep-Pepe, primero arregla un error en el código CSS, al ponerlo has eliminado una llave de cierre:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    3. Ya aparece el botón, pero no desaparece al subir y al hacer click no hace nada.

      Eliminar
    4. Aplícale el jQuery.noConflict(); al script del menú, con eso funcionará;
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Eliminar
    5. Ya funciona, gracias como siempre. ;)

      Eliminar
  16. Potro, como siempre genial !!

    Un abrazo.

    ResponderEliminar
  17. Para Wordpress hay un pluging que hace las cosas más sencillas.
    http://wordpress.org/extend/plugins/scroll-to-top/

    Un saludo,

    ResponderEliminar
    Respuestas
    1. Para WordPress hay muchos plugins, pero nosotros usamos Blogger, así que tenemos que esforzarnos más :)

      Eliminar
  18. de donde sacas tantas ideas cada dia para postear?

    ResponderEliminar
    Respuestas
    1. Pues los lectores preguntan por cosas, piden otras, y de ahí sale ;)

      Eliminar
    2. Ok,una pregunta no tendras algun post tutorial para poner los codigos HTML? esque nose ni como se llaman ni como se ponen.
      Me refiero a por ejemplo en esta entrada has puesto el codigo "<script src='http://ajax.goo....." como se llama el recuadro donde lo pones?
      Gracias

      Eliminar
    3. http://ciudadblogger.com/2009/01/insertar-cdigo-html-en-un-post.html

      Eliminar
    4. Mira el enlace que te ha puesto Josep-Pepe, además de eso yo lo pongo dentro de un blockquote, pero eso ya es opcional.

      Eliminar
  19. Potro, lo primero felicidades por el primer premio de tu categoría en los 20blogs de 20minutos, yo quedé 3º en la mía. Lo segundo es que el correo lo debes tener a tope y no doy con el problema de que al compartir un post de blogger en fb, no sale la imagen en miniatura desde hace unos cuantos días. Sabes algo?, te importa contestarme en cualquier entrada de cualquiera de mis blogs. Muchas gracias, majo.

    ResponderEliminar
    Respuestas
    1. Muchas gracias Blanca, y felicidades para ti también :)
      Te contesto por acá para que la misma pregunta pueda servir a alguien más.
      El sistema de Facebook lo que hace es leer la información del enlace y en él buscar los datos de la imagen, el título y el resumen de la entrada, pero para que pueda leer esa información necesita tener las guías necesarias. El problema con los que usamos Blogger es que no podemos meter mano donde se debe para poder darle esas guías a Facebook, así que nos limita bastante.
      Sin embargo, puede ser que te interese usar este sistema que propone JMiur, con él habrá más probabilidades de que aparezca la información como debe ser:
      http://vagabundia.blogspot.com/2012/01/mejoras-para-compartir-entradas-en.html

      Saludos.

      Eliminar
  20. felicidades Potro, ayudas mucho a la gente a diseñar sus blogs y eso tiene su premio... gracias por todo.
    aprovecho para pedirte un favor.. como podria escuchar esta radio en mi blog ?.. http://www.canelaradio.com/imcanela.php?c=854
    gracias por anticipado...

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario. Necesitas saber cuál es la URL con la que envían la señal, usualmente termina en ASX, ya que la conozcas entonces puedes aplicar el método de esta entrada, pero, por lo que he visto la página está hecha en flash, así que tendrás que ponerte en contacto con la radio para que te faciliten los datos.

      Eliminar
  21. oki se ve muy bien buen aporte saluditos ^^

    ResponderEliminar
  22. Excelente POST.
    Tengo una consulta... Existe alguna condicional no se para que un gadget, texto ò imagen solo se vea cuando utilizas internet explorer o cualquier otro navegador? si la hay compártela por favor! :D

    ResponderEliminar
    Respuestas
    1. Puedes usar las condicionales de Internet Explorer:
      http://vagabundia.blogspot.com/2011/06/condicionando-las-cosas-para-internet.html

      Eliminar
  23. Potro disculpa que use esta entrada para consultar, pero estoy vuelto loco buscando solucion a mi problema en la red y no encuentro nada.

    Veras, mi blog: http://18minutos.blogspot.com/

    El problema es que cuando pesco la url de alguna entrada y la pego en facebook no aparece nada, no carga contenido ni imagen, ni texto, nada de nada.

    Podrias ayudarme? gracias.

    ResponderEliminar
    Respuestas
    1. Ya lo ha dicho EL Potro en un comentario anterior: http://vagabundia.blogspot.com/2012/01/mejoras-para-compartir-entradas-en.html

      Eliminar
    2. Exactamente (comentario #22.1)
      :)

      Eliminar
  24. Hola, tengo una pagina similar a desmotivaciones.es y como mi pagina esta inspirada en esa, quiero agregar una barra como la que tiene facebook (la barra que tiene facebook que pone "Facebook, Buscar, etc" y que te sigue y siempre esta en la parte de arriba) y que la barra digua algo como: Pagina inspirada en desmotivaciones con el enlace.
    Me sabrias decir, hacer un tutorial o algo de como crear esa pequeña barra?
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola LeoProduccions, no veo en ese sitio ninguna barra "que me siga" :S

      Eliminar
    2. Perdon, me equivoque de web, la pagina donde se puede ver mas o menos lo que quiero es cuantocabron.com

      Eliminar
    3. Pues tampoco. Dice que el sitio se encuentra "offline".

      Eliminar
    4. haber, le he hecho una foto, donde esta el puntero, es la barra que te pregunto con las direcciones de la webs
      http://img59.imageshack.us/img59/292/cuantocabron.png
      ignora lo de loguearte con nombre y usuario, solo creo la barra

      Eliminar
    5. Sólo pon debajo de <body> esto:

      <div style="height:35px; width:100%; background:#000;">
      ...aquí los códigos de los botones...
      </div>


      Ahí coloca los códigos de los botones que no es otra cosa mas que simples imágenes con enlaces. Para que no te vaya a quedar en vertical pon los códigos de las imágenes uno seguido del otro, sin dar saltos de línea.

      Eliminar
  25. Hola potro, y si sólo quiero poner un enlace que diga "top" en el footer y que se deslize hacia arriba?

    pongo la librería de jquery y qué mas?

    ResponderEliminar
    Respuestas
    1. Pones en el footer un link así:
      <a href="#" onclick="$(body).animate({scrolltop : 0}, 800)">textodelenlace</a>

      Si quieres una imagen cambia "textodelenlace" por "<img src="URLIMAGEN" title="volver arriba"/>"

      Espero haberte ayudado ;)

      Eliminar
    2. Gracias, hmm pero no funcionó :s

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

      Eliminar
    4. Perdón, "body" debería ir entre comillas, y "scrolltop" debe de ser "scrollTop" :S.

      En mi defensa diré que lo escribí a la 1 y media de la madrugada...

      Si aún así no funciona, prueba a cambiar "body" por "body,html".

      Si aún así no va, cambia el dolar "$" por "jQuery" y pon antes de la última comilla del "onclick" un punto y coma.

      P.D.: Asegúrate de que las comillas son distintas a las del onclick. Al final quedaría algo así:

      <a onclick="jQuery('body,html').animate({scrollTop:0},800)">textoenlace</a>

      Eliminar
    5. Eso, o usar alguno de los otros métodos:
      http://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html

      Eliminar
  26. hola , disculpa que te consulte por aca
    pero necesito de tu ayuda ...

    quiero saber si tenes idea de como hacer esto

    http://i.imgur.com/3k1QL.png

    lo puedes encontrar en este blog
    http://todosobrecamisetas.blogspot.com/


    por lo que veo son entradas aleatoreas
    nose si esta bien lo que digo soy novato en esto de blogger =/
    espero que me puedas ayudar

    ResponderEliminar
    Respuestas
    1. No sé cuál sea exactamente ese carrusel, pero aquí hay unas opciones:
      http://ciudadblogger.com/2010/02/carrusel-de-imagenes-con-jquery-y.html
      http://ciudadblogger.com/2011/10/carrusel-de-imagenes-con-scriptaculous.html
      http://ciudadblogger.com/2009/05/links-y-banners-en-movimiento.html

      Eliminar
    2. voy a ver que sale :)
      te agradesco por los links .
      y tambien por la intencion de ayudarme ..


      gracias

      Eliminar
  27. Tengo un problemilla con el blog que te quería comentar:

    www.elrincondedomive.blogspot.com

    Como verás, debajo de la cabecera, mi blog tiene páginas, pero cuando pasas de un linia, se hace como un barra de color dorado oscuro horrenda. Hay alguna forma de que no se vea?

    Por cierto, el otro día tuve el impulso de subir lo del slider arriba, justo debajo de la cabecera de manera que fuese tan largo como el blog y se adaptase a esa medida (en vez de tener la anchura de la barra de las entradas), pero al subirla me pasa lo mismo que con las páginas; en vez de ponerse como un gadget normal y corriente, el fondo se vuelven tiras linias doradas oscuras y más claras.

    Tienes idea de porqué será?

    Muchas gracias! Nos vemos! :D

    ResponderEliminar
    Respuestas
    1. No puedes hacer que no se vea, es parte de los estilos de la plantilla que has elegido, pero sí puedes hacer más pequeña la fuente para que quepa la otra pestaña y no se tenga que bajar a la otra línea. Eso lo puedes hacer desde el Diseñador de plantillas dentro de Avanzado > Texto de la pestaña.

      Saludos.

      Eliminar
  28. Gracias Potro excelente... muchos saludos, visita desde http://librosderechoperu.blogspot.com/

    ResponderEliminar
  29. Olle el potro me podrías ayudar ya que se que lo que voy a escribir aquí no va con este tema ya que no se donde escribirlo te lo escribo aquí espero que lo leas y me puedas ayudar.

    Es que mira he puesto un menu y me gustaría poner dos pero no consigo hacerlo.

    Mi intención era tener dos menús uno arriba luego la imagen de la cabezera y luego otro he conseguido hacer el primero y to y poner la imagen y to pero cuando intento hacer la segunda parte ponga la imagen pero no se que hacer ya que he intentao poner opciones allí el de abajo pero na

    aquí te dejos mis códigos del menú de blogspot.com y mi pagina web para que le heches un vistazo y si puede podificar estos codigos que te he dado Ok.


    #menu-title {
    padding:5px;
    background:#333; /* Color de fondo de la marquesina */
    border-bottom:1px solid #fff;
    }
    #menu-title h3 {
    padding:0; margin:0;
    color:#ccc; /* Color de texto de la marquesina */
    font-family:Verdana, serif;
    font-weight:bold;
    font-size:130%; /* Tamaño de la letra de la marquesina */
    }
    #nav {
    float:left;
    width:100%;
    margin:0; padding:0;
    list-style:none;
    background:url(http://i48.servimg.com/u/f48/17/28/49/84/yyyyyy11.png); /* Color de fondo del menú */
    border-bottom:0px solid #999;
    }
    #nav li{float:left; margin:0; padding:0;}
    #nav a {
    float:left;
    display:block;
    padding:6px 30px 6px 5px;
    text-decoration:none;
    font-family:Verdana, serif;
    font-weight:bold;
    font-size:90%; /* Tamaño del texto del menú */
    color:#fff; /* Color del texto del menú */
    /* Color de fondo del menú */
    background:#auto url(http://4.bp.blogspot.com/_qgZA1ny_dAs/S_Qq7NYdkxI/AAAAAAAAELs/hSMXOms6o6I/s400/nav_slant.gif)no-repeat top right;
    }
    #nav #nav-1 a {padding-left:20px;}
    #nav a:hover {color:#000;}
    #botmenu{
    height:40px;
    margin:0px 0px 0px 0px;
    font-family:Tahoma,Arial, verdana,Century gothic, sans-serif;
    background:url(http://i48.servimg.com/u/f48/17/28/49/84/odioss10.jpg);
    font-size: 13px;

    }

    aqui esta mi web por si me puedes ayudar

    http://deljuefo.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Expert Gamer, efectivamente esa pregunta no va en este tema. Deja la consulta en la entrada que corresponde para no desviarnos del objetivo de esta entrada, y para darle su seguimiento a los temas donde corresponden. Saludos.

      Eliminar
  30. Hola potro una pregunta que no tiene nada que ver con este post, en mi blog uso el tabview en las entradas, quiero saber como podria hacer para levantar un poco el video y que su parte de arriba se oculte debajo del tabviw

    Ejemplo: mira esta entrada...
    http://mardelmovie.blogspot.com/2012/03/j-edgar-online-putlocker.html

    En el tabview aparece un video de putlocker, el cual en su parte superior dice

    "1329103467_JEdgar.DVDRip.subesp.avi"

    ESA PARTE ES LA QUE QUIERO OCULTAR DEBAJO DEL TABVIEW, COLOCANDO EL VIDEO UN POCO MAS ARRIBA!

    En el mismo post te eje el HTML

    ResponderEliminar
    Respuestas
    1. Hola Gonzademarpla, por favor deja la pregunta en la entrada del tabview, ahí es donde debe hacerse, no aquí ;)

      Eliminar
  31. excelente potro una vez mas muchas gracias por tus aportes!
    solo y como ya es costumbre es mi tengo una duda, se que podrás ayudarme y es que no se donde condicionarlo para que no aparezca en la plantilla para mobiles. espero me ayudes gracias por tu atención y un cordial saludo.

    ResponderEliminar
    Respuestas
    1. Hola CHISTES Y CHISTES, el último código tendría que estar en un elemento HTML/Javascript para que a ese gadget le pongas el mobile='no' y así hacer que no se vea en la versión móvil.

      Eliminar
    2. lo puse en un elemento HTML/javascript y no funciona :S

      Eliminar
    3. Prueba entonces agregando estos estilos:
      .mobile #IrArriba {
      display:none;
      }

      Eliminar
  32. Hola, Potro

    Me gustaría saber como podemos quitar gadgets que no se dejan eliminar; si es posible? Al menos desde Código HTML?


    Saludos Potro!

    ResponderEliminar
    Respuestas
    1. Hola ricardogot2010, desde la edición HTML y sin expandir los artilugios busca la línea del gadget, la puedes buscar por el nombre que le hayas puesto, por ejemplo:
      <b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'/>

      Ese es el código correspondiente a un gadget, sólo lo borras y listo.
      Saludos.

      Eliminar
  33. Ay Potrito que linda idea apenas la vi, muchas gracias!! yo sigo con los corazones de san Valentín jajajaja!!! Bendiciones!!!

    ResponderEliminar
    Respuestas
    1. Jajaja, me parece bien que sigas con tanto amor todo el año ;)

      Eliminar
  34. como siempre muchas gracias !!! potro

    ResponderEliminar
  35. perfecto!!!!queda estupendo.

    Como siempre ofreciendo cosas fantasticas mil gracias potro

    ResponderEliminar
  36. Hola Potro, oye Creo que este comentario no iria en este post, pero como es el más reciente te queria preguntar si aun blogger no tiene la tecnología como para que el Leer Más en el Thumb se pueda colocar en forma de detector de rostro o solo abarque una parte de la imagen, ya que eh visto muchos blogs de Wordpress que tienen ese estilo en el thumb. Mira este es el thumb en Wordpress: http://prntscr.com/6t7je y la imagenen original es esta: http://prntscr.com/6t7kp Gracias de antemano. Si llegaras a encontrar algo asi, creo que muchos de tus seguidores estariamos muy felices, Gracias Por todos los tips =P

    ResponderEliminar
    Respuestas
    1. Hola •๖ۣۜWιяєχ•, detector de rostros no, pero puedes usar un sumario que recorte la imagen de forma cuadrada:
      http://www.oloblogger.com/2011/03/sumarios-automaticos-sin-javascript.html

      Eliminar
    2. Potro eres como un dios del Blogger, que haria sin ti XD Gracias!

      Eliminar
  37. hola puedes hacer un tutorial pero con este estilo boton arriba estilo css que yo hise, pero que aparece y desaparece y desplazado aqui te dejo el codigo css para que melo puedas agregar que lo quiero de esa forma xD


    a.admin_eliminar {-moz-border-radius: 4px;-webkit-border-radius:4px;border-radius: 4px;background:#000;color:#222222;padding:3px 10px;margin-top:20px;}
    a#to_top {border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;background:url("https://lh4.googleusercontent.com/-QefVMNacC8I/TwTlQ5cwMnI/AAAAAAAAAWg/GW6Q7T2SY-o/s36/boton2.png") repeat-x scroll 0 0;border:1px solid #CCC;color:#000;font:bold 13px Arial,Sans-serif;padding:6px 10px;text-align:center;text-decoration:none;text-shadow:0 1px 0 #FFF;bottom:8px;position:fixed;right:8px;}
    a#to_top:hover {background:url("https://lh6.googleusercontent.com/-jCkhk28P8wE/TwTipc8QjPI/AAAAAAAAAWM/Z64B863y4dQ/s36/boton.png") repeat-x scroll 0 0 #FFAA22;border:1px solid #63B52F;color:#000;display:block;text-align:center;text-decoration:none;text-shadow:0 1px 0 #B4DC48;-moz-text-shadow:0 1px 0 #B4DC48;-webkit-text-shadow:0 1px 0 #B4DC48;}

    ResponderEliminar
    Respuestas
    1. No he entendido ni tantito. Un código CSS sin HTML no dice nada, pero si ya lo has hecho no habrá falta que yo haga nada ;)

      Eliminar
  38. Hola Potro!
    Otravez estoy por aquí..pero mi pregunta de hoy la verdad es que no tiene nada que ver con este post, pero al no encontrar un sitio adecuado pense ponerlo aqui. ¿Sería muy difícil introducir un mapa en una entrada y por cada seccion de mapa redireccionarlo a un link al hacer click?
    Nose si me entiendes, a lo que me refiero es que si cojo un mapaa de Europa y paso por España, y le de click, que salga el link al que esté destinado(historia, compras, o lo que sea).

    Gracias por tu tiempo!
    PD: ¿Por qué no abres un foro o una sección de "sugerencias"? porque la verdad esque aveces no tengo ni idea de donde poner mis absurdas preguntas. Hahaha
    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola Isaak, quizá lo que necesitas es mapear una imagen, es decir, que a una misma imagen le puedas poner distintos enlaces según el área. Aquí hay una herramienta online que te permite hacerlo más fácil:
      http://www.maschek.hu/imagemap/imgmap

      Eliminar
    2. Gracias!!!!! No sé cómo puedes tener tantos recursos... hahahaha. Lo que necesitaba si es un mappeador, pero al copiar el código HTML y pegarlo en la nueva entrada, no me aparece la imagen, se queda en blanco..asique me pondre a la busca de otro programa:)

      GRACIAS!:)

      Eliminar
    3. Vale, hay otros en línea, quizá alguno de ellos te funcione mejor. Saludos!

      Eliminar
  39. Muchas gracias, yo también lo he usado ya!!! Saludos...

    ResponderEliminar
  40. Hola Potro.

    Llevaba tiempo sin comentar pero ahora me surgió un problema poniendo el botón.

    El botón ha funcionado muy bien en todas las pestañas del menú de mi blog pero Cuando entro en la pestaña "Contáctenos", no desaparece y tampoco pasa nada al darle click. En ésta pestaña lo único que tengo es un formulario de Emailmeform.com

    Mi blog es www.arteentorno.com

    Ojala puedas ayudarme con esto ya que me gustó mucho como quedó en el resto de las páginas de mi blog.

    De antemano Muchas Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Victor, lo que sucede es que el formulario de Emailmeform usa jQuery, y como también tienes la versión de jQuery para este botón entonces entra en conflicto con el script del formulario. Lo recomendable en estos casos es que uses la versión de sólo HTML del formulario, ahí en la página de EmailMeForm puedes copiar el código que es sólo HTML y no tiene nada de scripts.

      Saludos.

      Eliminar
    2. Gracias Potro!

      Ahora esta funcionando a la perfección.

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

    ResponderEliminar
  42. Gracias Potro, era lo que necesitaba, saludos desde Paraguay.

    ResponderEliminar
  43. Muchísimas gracias hermano, esto era justo lo que estaba buscando.

    Tenía mi botón con efecto y todo, y me funcionaba bien hasta que agregué una barra de herramientas a mi blog y después de ahí no me funcionaba el efecto.

    Probé varios códigos de botones y ninguno me hacia lo que me hacia el primero, pero con la barra puesta, hasta que encontré este que pusiste.

    De verdad te lo agradezco en el alma, que Dios te bendiga hermano.

    Mira, le puse esto en cero ( if (jQuery(this).scrollTop() > 0) {), para que me aparezca el botón al bajar un mínimo pixel je je je me gusta mas así, también hice algunos ajustes en la posición del botón y usé mi propia imagen de botón, pero todo esta perfecto. De verdad no encuentro palabras para agradecerte hermano.

    Saludos desde República Dominicana :D!

    ResponderEliminar
    Respuestas
    1. Seguramente era la barra de Wibiya, esa barra usualmente afecta a otros scripts. Qué gusto que este botón te haya funcionado y satisfecho el resultado :)

      Eliminar
    2. Si, fue esa misma barra je je je... de verdad que me siento muy agradecido y satisfecho :D. Dios te bendiga grandemente.

      Saludos!

      Eliminar
  44. Excelente Potro, ya lo agregue en mi blog

    Solo tengo una duda como hago para que quede en el centro?

    ResponderEliminar
    Respuestas
    1. Hola Obed, sólo cambia la /* Distancia desde abajo */ para que quede a la altura que deseas.

      Eliminar
  45. hola que tal estoy haciendo una plantilla nueva y cuando pongo todo el codigo (esta bien escrito, ya lo use en otra plantilla y me funciono) no me aparece la imagen, no se si sera por el jquery, hay forma de saber si esta funcionando el jquery o tenes idea de porque no me funciona la flecha ??

    ResponderEliminar
    Respuestas
    1. Habría que ver en cuál blog lo has puesto para saber qué pudo haber pasado que no aparece la imagen.

      Eliminar
    2. hola que tal aparentemente no tenia instalado bien jqueri o algo asi y por eso no aparecia, ahora tengo otro problema, necesito poner otra sidebar mas del lado izquierdo, eh visto como 100 formas diferentes de ponerla pero no me funciona niguna,te dejo la plantilla mia para que veas:

      http://www.mediafire.com/download.php?03u1ow36b3mrar2

      PD: casi me vuelvo loco probando, si pudieras ayudarme te lo agradeceria muchisimo, no sabia en que lado del blog dejar mi duda por que la opcion de contacto me marca que no esta disponible.

      Eliminar
    3. No hace falta el respaldo de tu plantilla, sólo dime cuál blog es y cómo se llama la plantilla original. Saludos.

      Eliminar
    4. la plantilla original se llama ProGames, y el blog es:

      http://paradiseanimesf.blogspot.com.ar/

      Eliminar
    5. Cambia el ancho (width) del #outer-wrapper por 1300px
      Luego arriba de #sidebar-wrapper { añade esto:
      #sidebar-wrapper {
      border-radius: 7px 7px 7px 7px;
      float: left;
      margin-right: 7px;
      margin-top: -6px;
      overflow: hidden;
      width: 308px;
      word-wrap: break-word;
      }


      Por último, arriba de <div id='main-wrapper'> agrega esto:

      <div id='sidebarleft-wrapper'>
      <b:section class='sidebar' id='sidebarleft' preferred='yes' />
      </div>


      El problema será que los fondos de tu blog son imágenes, así que lo más seguro es que tengas que editar el ancho de todas esas imágenes a fin de que cuadre con el nuevo ancho.

      Eliminar
    6. ya esta, lo unico que en ves de #sidebar-wrapper {, tenia que poner sidebarleft.
      Muchuisimas gracias te debo una enorme

      Eliminar
    7. Es verdad, se me pasó cambiar esa parte :P

      Eliminar
    8. el unico problema ahora es que la imagen que aparece debajo de los titulos de la sidebar ahora esta del lado iquierdo , pero del derechio no, ademas el fondo de los gadgets no aparece, tenes idea de que pueda ser ??

      Eliminar
    9. Has de haber modificado los estilos correspondientes a la sidebar. Revisa los estilos de la plantilla original para que veas qué cambiaste.

      Eliminar
  46. hola que tal tengo un ultimo problema, ya casi termino, y necesitaría cambiar el color de la letra dentro de los gadgets de mi blog (el de arriba) por el color blanco, tenes idea de como puedo hacerlo ??

    ResponderEliminar
    Respuestas
    1. Cambia esto:
      .sidebar {
      color: #000000;

      Por esto:
      .sidebar {
      color: #FFF;

      Eliminar
    2. muchas gracias sos un capo

      Eliminar
  47. Gracias, me funcionó perfectamente. Agrego una url a el tipo de flecha que utilicé: http://img710.imageshack.us/img710/5193/flecha60px.png

    Y el link al blog:
    http://betaraytv.blogspot.mx

    Saludos.

    ResponderEliminar
    Respuestas
    1. Me alegro que te haya servido :)
      Saludos.

      Eliminar
  48. hola perdona que te joda otra vez, pero tenes idea de como sacar la barra de arriba marrón o aunque sea ocultarla y sacar la opcion de pagina principal

    ResponderEliminar
    Respuestas
    1. Es el gadget de páginas, elimínalo, luego quita esto de tu plantilla:
      #wrapper-bg {
      background: url("http://3.bp.blogspot.com/-82y4ZtdgLMY/TyrYaNnOFKI/AAAAAAAADBs/EckDZSwoXLk/s1600/wrapper1.png") repeat-x scroll 0 0 transparent;
      }

      Eliminar
    2. pasa que en la ventana de diseño no me aparece, y en html no de donde borrarlo

      Eliminar
    3. Ah qué plantillas esas... borra todo lo que empiece con body#layout así aparecerán todos los elementos en esa sección.

      Eliminar
  49. Hola solo para agradeser esta modificacion, me encanto, lo puse en mi blog y se ve genial, gracias!! te invito http://utilidadez-gratis.blogspot.mx/

    ResponderEliminar
  50. Hola Potro tanto tiempo jajaja tengo otro problema,quiero hacer un menu para mi blog, pero todos los que encontre usan todas las etiquetas para hacerlo, y yo necesitaria que use nada mas las etiquetas que eija, habra alguna forma de hacerlo??

    PD: perdona que siempre pregunte aca, lo que pasa es que no se donde se ponen las dudas

    ResponderEliminar
    Respuestas
    1. Cuánto tiempo Maxi_96 ;)
      Cualquier menú, el que sea, puedes poner los enlaces que quieras, ya sean todas las etiquetas, o las que elijas, o incluso cualquier enlace que no sea una etiqueta, en realidad esa no es una regla ;)

      Eliminar
  51. quiero siga apareciendo y desapareciendo pero sin efecto deslizante por favor

    ResponderEliminar
    Respuestas
    1. Cambia el 800 que está en el script por 0
      Con eso no tendrá el deslizamiento.

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

    ResponderEliminar
  53. Hola El Potro, lo he intentando en mi blog y blog de pruebas pero ha sido imposible. Sale la flecha ya de inicio --o sea que no hay que bajar por el blog para que esta aparezca-- y después no funciona el subir para arriba. Supongo que es un problema de JQuery que ya está en el blog. No he añadido el script como indicas pero no funciona.

    ResponderEliminar
    Respuestas
    1. Necesitaría verlo puesto en tu blog Juan José, entré pero no lo veo ahí.

      Eliminar
    2. Hola Potro, soy Emilio, Juanjo es mi compañero del blog. Te hago yo la misma pregunta. Mi blog, el de siempre ....mohicano.

      Eliminar
    3. Hola Potro, te escribió mi compañero. La pregunta es la misma. Lo he intentando pero no funciona ni el botón, no sube hacia arriba ni tampoco tiene el efecto "aparición". Probé cambiando la última versión de Jquery pero...nada.

      Un abrazo.

      Eliminar
    4. Hola Emilio, no veo colocado el botón, pero quizá es porque ya tienes una versión de jQuery, y al poner este botón estás agregando otra; sólo debe haber una versión.

      Eliminar
    5. Hola El Potro, no añado ninguna, dejo la que está que es la versión 3 creo. De todas formas probé con la última, la que aparece en esta entrada y tampoco. Debe haber algo. Salía la flecha desde el principio y el enlace no funcionaba. Lo intenté en el blog de pruebas e igual.

      También quería preguntarte una cosa que pudiera estar relacionada. He puesto los comentarios incustrados, cuando publico un comentario no vuelve a este se queda en el top del post. Se puede solucionar?

      Eliminar
    6. De hecho, lo sigo teniendo en el blog de pruebas Potro. Allí está.

      Eliminar
    7. Pues sin verlo puesto será muy complicado saber si es jQuery u otra cosa.
      Respecto a lo otro, ¿ya has probado en otro navegador?

      Eliminar
    8. Te lo puse en un mensaje posterior, el botón está en el blog de pruebas.

      Sobre el tema comentarios: lo he probado en Chrome, Explorer 8 y Firefox. Todos igual.

      Eliminar
    9. Tienes dos versiones de jQuery, no una, además que, si uno de los scripts tiene el hack de compatibilidad entonces los demás que tengas también debes aplicarle el mismo hack.

      Eliminar
    10. Pues ahora mismo no lo se lo voy a revisar, supongo que el hack que comentas debe estar si no no funcionaría a lo que corresponda. En mi blog principal también hay dos versiones de Jquery?

      Eliminar
    11. En el blog principal solo veo la 1.3 para el slider y ya probé con la 1.7 y tampoco funcionaba. Puede tener algo que ver con el tema de los comentarios?

      Eliminar
    12. No creo, el problema debe estar con esas versiones de jQuery y lo del hack que te comentaba.

      Eliminar
    13. Intentaré lo que me comentas. Olvidando este tema ¿alguna solución para el tema de los comentarios?

      Eliminar
    14. Eso podría ser por el navegador, ¿ya has probado en otros navegadores? Aunque, te diré que a mí en este blog algunas veces también se queda el scroll arriba aun después de hacer un comentario.

      Eliminar
    15. Como te dije los probé todo y quité el fb comments también por si acaso. Y nada. Comentas sea donde sea...y se queda arriba al comienzo del post.

      Eliminar
    16. ¿En cuál blog te sucede, en el de pruebas o el normal? ¿recuerdas a partir de cuándo sucede eso?

      Eliminar
    17. Pues me sucede en el normal Potro. No lo recuerdo porque nunca he tenido comentarios incrustados en la entrada. Ha sido ponerlos e ir siempre así. En el pruebas están los anidados y allí no pasa. El fb comments no es, los scripts del jquery tampoco. El caso es que arriba marca la dirección de los comentarios pero no baja.

      Eliminar
    18. Es en el blog normal Potro. Me sucede desde que tengo los comentarios incrustrados en la entrada. Antes los tenía en ventana (hace una semana). Lo raro es que en la url aparece la dirección que va a los comentarios pero no baja.

      En el de pruebas tengo los anidados y allí no sucede. Va todo bien. He probado quitando el fb comments e incluso jquery pero nada...

      Eliminar
    19. Pues ni idea. Ese problema se daba al inicio en los comentarios anidados y creo sólo pasaba con Firefox y otro navegador. Pero luego, con la actualización del script ese problema se solventó.
      Por esos tiempos, lo que ayudaba a resolverlo era esto:
      http://vagabundia.blogspot.com/2012/01/los-comentarios-y-el-salto-al-final-de.html

      Eliminar
    20. El caso es que aquí no hay comentario ni anidados ni siquiera el código que los genera porque es una plantilla antigua modificada. El tema es que a la inversa de la explicación de vagabundia. Solo que es tras un comentario y siempre se queda en lo alto del post, al inicio. Pero bueno tampoco es algo muy grave, el mensaje está enviado. Gracias por tu tiempo Potro.

      Eliminar
  54. hola que tal otra vez yo, estaba viendo una plantilla (Versatile) y queria saber si tenes idea de como hacer el carrusel de arriva pero con las entradas destacadas (o si se puede que pase todas las entradas del blog)

    ResponderEliminar
    Respuestas
    1. No conozco el carrusel, pero supongo que trabaja igual que todos (o la mayoría), que tú agregas manualmente las imágenes y enlaces que quieras.

      Eliminar
  55. Muchas gracias, fuiste de mucha ayuda. Sólo cambié la imagen de la flecha, si tenés ganas y tiempo fijate! Buen fin de semana!!!

    ResponderEliminar
  56. Hola Potro de nuevo, lo del jQuery ya lo deje por imposible. Respecto a esta flecha de subir... que habria que cambiar para que en vez de subir, que baje hasta el pie de pagina?.

    ResponderEliminar
    Respuestas
    1. Mira este tutorial, ahí verás un método más completo que incluye la función de bajar:
      http://tympanus.net/codrops/2010/01/03/scrolling-to-the-top-and-bottom-with-jquery/

      Eliminar
    2. Gracias Potro, indagaremos haber si puedo con ello. Un abrazo.

      Eliminar
    3. Vale, de cualquier manera veré si mañana tengo algo de tiempo y publico una entrada sobre ello.

      Eliminar
    4. No he conseguido nada, así que que damos a la espera de la publicación.

      Eliminar
    5. No te he hecho esperar mucho, ya está publicada la entrada ;)

      Eliminar
  57. LO gracioso es que justamente la linea que dice jQuery.noConflict(); es la que me causaba conflicto. La quité y funciona de maravillas.
    Saludos Potro.
    Gabriela.

    ResponderEliminar
    Respuestas
    1. Vaya, sí que es extraño. Qué gusto que hayas dado con el problema para resolverlo :)
      Saludos!

      Eliminar
  58. Respuestas
    1. Usa las teclas CTRL + F para localizar ese o cualquier otro código.

      Eliminar
  59. Excelente script! Recién me meto de llego al mundo de los Blog (rontacuchi.blogspot.com) y cada vez aprendo sobre la versatilidad de la misma. Se agradece el aporte Potro.

    ResponderEliminar
    Respuestas
    1. Gracias a ti por tu comentario y visita Ronald. Saludos.

      Eliminar

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