Botones de Ir Arriba e Ir abajo con jQuery

9 de mayo de 2012 190 comentarios ,


Hace poco vimos cómo poner un botón de Ir arriba con jQuery, pues esto es parecido, pero no igual. Esto es porque los botones siempre están visibles a diferencia del otro, y sólo se desvanecen ligeramente cuando movemos el scroll de la página, pero además, también incluye la función de ir hasta abajo del blog.

Puedes ver un ejemplo en este blog de pruebas, los botones se encuentran en la parte inferior izquierda.

Veamos entonces cómo poner los botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento usando jQuery.
Lo primero es entrar en la Edición HTML y pegar antes de ]]></b:skin> los estilos:
/* Botones de Ir arriba e Ir abajo con jQuery
----------------------------------------------- */
.nav_up{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNYH_4Z9majTiLNB8e2Kqpolc8Wmw86XfQ3aRiZiPYnt1idr56RE3b_Cq2tbBEkuD4rRfCZWvAHqXnYTvvsAAUd9iJoNkLcysHx8cjGVdh97RYXaVDGq5NJXrTrnG2oEecd9UMTLb08y4/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px; /* Distancia desde abajo */
left:30px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqvzYKSQb8q7PEyrR9vEg4IlYbOP8I4_ebm1g4KL1MMFQnzXlMhwlHex1OG_ZBckDACfp3lb5b7JnKbGOwFh2l9Vge9Ory_mnky7TLmUIaLfipHwfuzMGyImJqPKAQL4cx0qbZJP7YjI/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px;
left:70px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
Luego antes de </body> pega este código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>
Y listo, así se sencillo. En el primer código puedes ver en color verde algunos estilos que puedes modificar. Las flechas son imágenes, así que puedes cambiarlas por otras cambiando las URLs de las mismas que se encuentran también en el primer código. Si quieres cambiarlas del lado derecho ahí mismo verás qué valores debes modificar.

En el segundo código he puesto en color gris el script de jQuery, sólo para distinguirlo, por si ya lo tuvieras no lo agregues de nuevo.

Si usas Scriptaculous podrías aplicar el "parche", pero si no te quieres complicar la vida usa estos botones con Scriptaculous.


Vía | Codrops


190 comentarios en:

" Botones de Ir Arriba e Ir abajo con jQuery "

  1. me gustan mucho mas estos que el anterior, es mejor tener el de arriba y el de abajo que uno solo no crees? mil gracias!!
    diria que soy el primero en comentar pero como ahora moderan los omcentarios ya no se sabe quien comenta primero jeje

    ResponderEliminar
    Respuestas
    1. Pues lo de mejor es relativo, más bien depende de las necesidades de cada uno. Lo cierto es que sí, fuiste el primero ;)

      Eliminar
    2. ami no me aparece el del lado derecho

      Eliminar
    3. Cambia esta linea de codigo, left:30px; /* Cambiar left por right si se quiere a la derecha */

      Eliminar
  2. Genial Potro Este truco es muy bueno :D

    ResponderEliminar
  3. Gracias, justo lo andaba buscando.

    ResponderEliminar
  4. que bueno está con el efecto.
    Muy bueno Potro
    solo que parece que no es con imagen

    ResponderEliminar
    Respuestas
    1. ¿Las flechas? Sí, sí lo son, pero sólo las flechas, el borde pues es eso, un borde ;)

      Eliminar
  5. Gracias Potro pero dime como pongo unos como los que tu tienes Gracias de ante mano

    ResponderEliminar
    Respuestas
    1. Los que yo tengo son con Scriptaculous, en la entrada está el enlace.

      Eliminar
  6. Lucen bien, aunque me quedó con el anterior :)

    ResponderEliminar
  7. buen post creo q es el mejor, en cuanto a los post de botones de arriba y abajo. Lo e modificado y ahora lo e puesto de forma vertical. buena Potro (y)

    ResponderEliminar
    Respuestas
    1. Yo cambiaría los que tengo por estos pero ahhh, ya no quiero tocar nada en la plantilla :P

      Eliminar
  8. Muchas gracias Potro por la publicación, pero me sigue sin funcionar (es incompatible con el slider que tengo), así que me voy resignar y me quedare sólo con el boton de subir. De todas maneras te agradezco las molestias que te has tomado.
    Un abrazo

    ResponderEliminar
  9. Saludos, implementado y funcionando con la última versión de jquery/1.7.2/
    Un abrazo.

    ResponderEliminar
  10. Ya echaba de menos tus publicaciones, jaja.
    Muy bueno, como siempre ;)

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

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

    ResponderEliminar
  13. Hola Potro!
    Necesito ayuda con la plantilla de mi blog (www.winxlovely.com)
    Todo lo de botones de compartir, autor de la entrada, hora de publicación y todos los demás elementos de la entrada; no me aparecen en el blog y no puedo editarlo desde "Elementos de la página"

    ¿Que puedo hacer?

    Lovix

    ResponderEliminar
    Respuestas
    1. Hola Lovix, sino te aparecen puedes añadirlos directamente en la plantilla:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html
      http://ciudadblogger.com/2010/06/botones-para-compartir-de-blogger.html

      Eliminar
  14. Hola Potro, pasaba por aquí para hacerte una consulta :/. Me gustaría saber si hay un código especifico para insertar videos de manera HTML. No me refiero al Youtube ni a Dailymotion ya que de aquí a un buen tiempo podrían ser eliminados.

    He estado buscando por la red, y he encontrado un código para reproductor, en donde uno inserta la url del vídeo donde esta alojado, un ejemplo es skyDrive. Se supone que este es el código que he encontrado:

    "embed" src="http://www.shiatv.net/player41.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="&file=http://TU_VIDEO.flv&height=300&width=400&image=http://TU_IMAGEN_INICIAL_DE_VIDEO.JPG&overstretch=true" height="300" width="400">"/embed"

    lo he probado en mi blog de pruebas y no me funciona :/. No se si me podrías ayudar o pasarme algún link, si tienes en el blog este tema.

    Muchas Gracias de manera adelantada y disculpa por tremendo comentario que ademas no esta dentro del tema.

    P.D. También se que blogger ofrece la opción de insertar videos, pero hay veces en que esta opción falla y no puedo insertar luego de un buen tiempo, si no tengo el plan "A", me gustaría tener un plan "B".

    ResponderEliminar
    Respuestas
    1. Hola Yami, depende de qué videos quieras insertar, es decir, si son de algún servicio (de una página) entonces tienes que usar el código que ellos proveen.
      Si es un video que tienes alojado en un hosting entonces hay algunas opciones, una de ellas es JW Player:
      http://vagabundia.blogspot.com/2009/05/flowplayer-reproductor-de-videos.html

      También puedes usar HTML5, pero en versiones anteriores de Internet Explorer no funciona.

      Eliminar
    2. Gracias Potro por la ayuda :D! Ahora mismo la voy a probarlo para ver si funciona. Ya te iré informando (si no es mucha molestia D: ).

      Un saludo!

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

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

    ResponderEliminar
  17. Potro esta muy bien tu blog, me gustaría que me ayudaras, estoy creando una pag web o blog de noticias, y me gustaria hacer algo como esta pagina http://canaldenoticia.com/, en el sentido que quiero tener en la pagina principal las etiquetas que yo coloque por Ejemplo Mundo tenga un fondo ejemplo Azul, Economía Fondo Marrón, osea el fondo en la palabra de la etiqueta, por eso te dejo la pag esa para que puedas ver a que me refiero.. Me gustaría que me pudieras ayudar de todo corazón, gracias de antemano... Creo que si se puede hacer, pero no allo como...

    ResponderEliminar
    Respuestas
    1. Mira esta entrada de Oloblogger, la entrada que ahí explican es para poner un ícono diferente según la etiqueta, supongo que algo así necesitas:
      http://www.oloblogger.com/2008/09/iconos-por-categoria-en-cada-post.html

      Saludos.
      Pd. Eliminé los otros comentarios porque estaban duplicados.

      Eliminar
  18. como haces insertar HTML en tu página de face porque el Static XFBML??
    ayuda please

    ResponderEliminar
    Respuestas
    1. Puede ser con el Static XFBML, o cualquier aplicación que te permita agregar códigos HTML, hay bastantes opciones.

      Eliminar
    2. lo que pasa que el Static XFBML, no funciona más

      Eliminar
    3. Mira aquí:
      http://ciudadblogger.com/2012/03/11-aplicaciones-utiles-para-tu-pagina.html

      Eliminar
  19. Esta pagina siempre es de gran ayuda! Genial como siempre! Al final me he atrevido a comentar ^^ .

    ResponderEliminar
  20. Hola Potro.
    Me ha surgido un problema que no tiene que ver con esta entrada, pero necesito tu ayuda (para variar).
    A la hora de publicar la última entrada, el contenido de la sidebar se ha descolocado, poniéndose debajo de las entradas (¿?).
    He limpiado los temporales por si acaso era un problema de visión personal pero parece ser que algo del código ha tomado vida propia ya que he publicado como siempre (desde Live Writer) y nunca había tenido este problema.
    Espero que tenga una fácil solución, que me entra flojera de piernas rápido...
    Gracias y perdona por la intrusión.
    Un saludo.

    ResponderEliminar
  21. Hola de nuevo Potro.
    El error que te comenté, sólo se produce en la página principal y en las entradas individuales, al entrar en cualquier estática la sidebar carga correctamente.
    Empiezo a pensar que algún código de las presentaciones, que hago en la última entrada, me causa el problema.
    ...
    Un saludo Potro.

    ResponderEliminar
  22. Hola potro.

    A ver si me pudedes ayudar con una cosa en mi blog. Mira esta foto:

    http://desmond.imageshack.us/Himg513/scaled.php?server=513&filename=sinttuloppb.png&res=landing

    Quería saber si me pudieras decir, como puedo bajar ese cuadro de "añadir gadget" para abajo de todo.

    Espero no molestar.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Pena. Puedes poner un área para gadgets ahí, pero no quedaría como esperas, en realidad quedaría abajo del todo, es decir, abajo de las tres columnas de gadgets y sólo en el dado caso de que la plantilla no sea hecha con el Diseñador.
      Cualquier otra duda sobre eso déjala aquí:
      http://ciudadblogger.com/2011/05/dividir-el-footer-del-blog.html

      Saludos.

      Eliminar
  23. Hola Potro.
    Todo solucionado, era una incompatibilidad de caracteres, he cambiado las presentaciones de fotos por otro estilo y todo solucionado.
    Perdona por mi impaciencia y gracias por todo.
    Un saludo Potro.

    ResponderEliminar
    Respuestas
    1. No hay problema, me da gusto que lo hayas resuelto ;)

      Eliminar
  24. Puede que el coment sea un poco desubicado juesto en esta entrada pero, podría alguien decirme cómo aumentar el margen superior de la fecha de la entrada? es decir, para que las fechs de las entradas no queden justo al borde. La verdad es que no tengo mucha idea del mundo blogger, ya he modificado los valores de margin top, margin padding.... todo lo habido y por haber, y nada de cambios.

    Agradecería cualquier ayuda, el blog forma parte de una asignatura que me corregirán, y así queda bastante antiestético..

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Cristina, usualmente los estilos de la fecha de modifican dentro de h2.date-header, no sé si ahí es donde has aplicado anteriormente los cambios.
      De cualquier forma, sería bueno que dejaras el nombre/dirección del blog donde deseas hacerlo para ver porqué no surgen efecto los cambios que has aplicado.

      Eliminar
    2. Muchas gracias por tu respuesta, me emocioné pensando que se solucionaría, pero nada.

      Te corto aquñi los fragmentos del código de html que creo que son relevantes:

      * Header
      ----------------------------------------------- */
      .header-outer {
      background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
      _background-image: none;
      }

      .Header h1 {
      font: $(header.font);
      color: $(header.text.color);
      text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
      }

      .Header h1 a {
      color: $(header.text.color);
      }

      .Header .description {
      font-size: $(description.text.size);
      color: $(description.text.color);
      }

      .header-inner .Header .titlewrapper {
      padding: 22px $(header.padding);
      }

      .header-inner .Header .descriptionwrapper {
      padding: 0 $(header.padding);
      }





      /* Headings
      ----------------------------------------------- */
      h2 {
      margin: 0 0 1em 0;

      font: $(widget.title.font);
      color: $(widget.title.text.color);
      text-transform: uppercase;
      }


      el blog es orientativamenteinquietablogspot.com

      Por si quieres echarle un ojo (es simplemente que la cabecera de los post quedan muy pegadas a los anteriores)

      Creo que lo voy a dejar por perdido..ya cambié el interlineado, los márgenes interiores y demás, y claro, me encabezoné con lo de la fecha y el título de la entrada, pensando que lo podría cambiar también...:(

      De nuevo gracias
      Gracias a tus trucos y ayuda los "torpes" y los que quieren ir un poco más allá consiguen introducirse un poco más en el mundo blogger

      Eliminar
    3. Cristina

      En esa plantilla el área de la fecha la controlas aquí:
      .date-header span {

      Debajo encontrarás los estilos que puedes modificar o agregar.
      En el caso de los títulos de las entradas es aquí:
      h3.post-title, .comments h4 {
      font: normal normal 22px Nobile;
      margin: .150em 0 0;
      }

      Ahí has establecido que el margen superior sea de .15em, así que si lo quieres más separado tendrás que usar una valor más alto, como 2em

      Saludos.

      Eliminar
    4. El título de las entradas si me deja modificarlo, pero en el caso de la fecha, nada de nada (he modificado, con distintos valores tooodos los elementos, y extrañamente no se altera nada)No sé, no debería ser tan difícil, algo se me estará escapando. No puede ser que lo que falle sea algo así como "el espacio entre posts" y por eso me qeden tan juntos? también he hecho el intento de modificar el footer (o algo así) de los post...pero no hay efectos...

      Muchas gracias, por lo - ya sé de forma exacta qué tengo que modificar para cambiar la distancia de los títulos

      Eliminar
    5. Pues no sé de qué forma estés aplicando los estilos de la fecha, pero por ejemplo, si pones esto:
      .date-header span {
      margin:25px 50px 75px 100px;
      }

      Ahí determinas que el margen superior tenga 25px, el derecho 50px, el inferior 75px, y el izquierdo 100px

      Eliminar
  25. Saludos Potro, me gustaría saber si puedes hacer un post sobre como crear algo parecido a esto en blogger:

    Algo así: http://oi49.tinypic.com/5un0om.jpg

    ResponderEliminar
    Respuestas
    1. Hola Administrador, mira esta entrada, con ella podrías hacer algo parecido:
      http://ciudadblogger.com/2011/05/abrir-ventana-al-cargar-el-blog-con.html

      Eliminar
  26. Hola Potro ^^ disculpa que te pregunte esto aca pero no supe en qué entrada dejar mi duda...

    ¿Conocés algun servicio parecido a AuthPro? (http://www.authpro.com/)
    Me refiero a alguno que te permita crear areas solo para miembros, registrándote a la página para poder ver el contenido...

    Quería crear una cuenta allí pero me encontré con que solo puedes agregar 10 miembros con una cuenta gratuita =/

    ResponderEliminar
    Respuestas
    1. Nop, ninguno. En Blogger el problema es que no tenemos acceso al hosting, así que no podemos crear base de datos para los usuarios.

      Eliminar
  27. Bien, Muchas gracias, me parece que esto si me servirá...!!!

    ResponderEliminar
  28. Hola que tal si en un post solo tengo un video pq la imagen no me aparece?

    ResponderEliminar
    Respuestas
    1. Hola luis, ¿qué imagen tendría que aparecerte sino tienes ninguna imagen en la entrada? o.O

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

    ResponderEliminar
    Respuestas
    1. Hola Andersanju, he tenido que eliminar tu comentario por el aviso que está al final de esta página.
      Saludos.

      Eliminar
  30. Holaa, puse los botones pero me gustarian que quede uno arriba de otro, como puedo hacer eso? Graciass

    ResponderEliminar
    Respuestas
    1. Juego con las distancias de los botones, por ejemplo, cambia esto:
      bottom:10px;
      left:70px; /* Cambiar left por right si se quiere a la derecha */

      Por esto:
      bottom:70px;
      left:30px;

      Eliminar
  31. hola potro.....
    felicitaciones por este blog¡

    te puedo pedir q nos expliques como hacer q quede asi la barra del costado del navegador o blog...http://www.patrickfry.co.uk/

    ves esta liso y en color gris...

    es un script o q sera...
    como instalarlo porfa

    un abrazo potro

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario nn. El otro día estuve practicando con unos métodos para cambiar el scrollbar pero no he tenido éxito, seguiré buscando alguno que sea efectivo para Blogger, y en cuanto lo pruebe lo publico ;)

      Eliminar
  32. hola de nuevo potro,

    bueno aqui va mi pequeña contribucion a la ciudad...

    encontre una manera de cambiar el scroll,lo instale en un blog q tengo PERO SOLO LO VEO EN GOOGLE CHROME, NO SALE EN IE NI EN MOZILLA...

    quizas vos podrias hacer un mini tutorial o al menos revisar ese codigo para q se vea en ie y mozilla...

    te mando saludos y felicitaciones por todo tu trabajo.

    LA DIREC DONDE SALIO ES
    http://marie-another-world.blogspot.com.ar/2011/11/tutorial-cambiar-el-scroll-del-blogger.html

    ResponderEliminar
    Respuestas
    1. Ya conozco ese método nn, y justamente porque sólo funciona en Chrome y Safari es que no lo he publicado, ni lo haré hasta que haya uno compatible con todos. No se puede "hacer compatible" porque funciona con CSS, y ahí depende de qué navegador acepta tal propiedad y cuál no.

      Eliminar
  33. Solo Me SALE Una Flecha !! Man Ayudame Por Favor

    ResponderEliminar
  34. hola potro como el botón pasado el que te avise que se veia pero no subía y no se desaparecía no servia suvi estos que estan mas peolas tan bien. funcionan a la perfección y me gusta mas que el boton de subir :D
    gracias potro como tengo ams de un blog en todos tengo para que te enlasen a vos :D con el truco de colocar algo abajo de la primera entrada :D gracias potro.

    ResponderEliminar
    Respuestas
    1. Gracias augusto, me alegro que hayan sido de tu agrado estos botones :)

      Eliminar
  35. Hola Potro,este boton me gusta,lo voy a colocar el boton que tengo de bajar no me funciona..:-)) solo el de subir.
    Llegara el día que no toque mas las plantillas de esa amenra..
    Gracias.

    ResponderEliminar
  36. lo puedo agregar a un blog de Wordpress??

    ResponderEliminar
    Respuestas
    1. No lo sé Alessandro, todo lo que hay aquí es probado únicamente en Blogger.

      Eliminar
  37. Hola potro,
    Me encanta esta nueva idea de Ciudadblogger está genial... pero tengo un poblema.. pues es que en uno de mis blogs me funciona y en el normal en que quiero aplicar, cuando lo aplico no me funciona!!! y allí tengo toda clase de códigos con jquery y todos de ciudadblogger, también tengo imágenes flotantes y mucho mas y al parecer, mi blog rechaza en código, será que es algún codigo que no es compatible con ese? tengo hasta agregado jquery y nada please, help!!!! y gracias por tu ayuda...

    ResponderEliminar
  38. ha potro y aquí te dejo mi blog para que lo recibes y me ayudes por favor ayudame... jim-011.blogspot.com con el boton agregado y todo

    ResponderEliminar
    Respuestas
    1. Hola jim 011, no lo veo en tu blog, pero quizá sea porque al ponerlo duplicas la versión de jQuery.
      Cuando pongas los códigos ya no agregues esta línea porque esa ya la tienes:
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

      Eliminar
    2. hola potro,
      también lo puse así y nada y borré el que ya tenía y puse este y nada :( no hay remedio?

      Eliminar
    3. Sin verlo puesto no puedo saberlo :/

      Eliminar
  39. Wow! Gracias Potro, este sí me funcionó XD
    Solamente jugué con el tamaño y los bordes para que se ajustara más a mi blog. muchas muchas gracias :B

    ResponderEliminar
  40. Que tal amigo. Tratando de colocar estas flechas que están bonitas y discretas, seguí los pasos, pero no hay forma. Puedes, "como siempre" ayudarme? Lo estoy haciendo en el mismo blog de prueba que puse el video. http://soloparapruebascrochet.blogspot.com/
    Gracias y abrazo

    ResponderEliminar
    Respuestas
    1. Hola ELSACERDOTE2011, en ese blog de pruebas estás usando jQuery así que ya no hace falta ponerlo otra vez:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
    2. Querido amigo. Estoy de acuerdo que NO hay que ponerlo, por eso no lo hice. Fui recién a la entrada del link que me dejas y NO ENCONTRÉ donde poner jQuery.noConflict(); pero sustituí cada $ con jQuery y NADA. Entonces viendo uno de tus comentarios respecto de donde buscar las últimas actualizaciones de la librería, allá fui y me encontré con una versión 1.7.2 y la cambié por la que está en la plantilla 1.7.1
      Y NADA!!! LAS BENDITAS FLECHAS NO APARECEN.
      Se me ocurrieron esas flechas por lo que dije, están a tono de la página y son discretas, pero si se hace pesado, prefiero poner estas que tienes tu al costado, sólo que debería modificar el color de las flechas para que estén a tono con los colores de la plantilla del blog.
      Perdón por tanta molestia, por pequeñeces pero me llama la atención que las cosas que de alguna forma nos regalas no funcionen de UNA y no es por no buscar (con mi poca experiencia) pero luego de leer atentamente tus tutoriales y códigos no le encuentro salida. Disculpame.
      Espero tus noticias y te dejo un abrazo.

      Eliminar
    3. Me pareció haber visto dos versiones, por eso te lo mencioné. Lo del jQuery.noConflict(); es sólo cuando se usa Scriptaculous o Mootools y no es tu caso aun.
      Las flechas que yo tengo son con Scriptaculous, el enlace es el último que está en la entrada, y por el diseño de la flecha no te preocupes que ese es opcional en cualquier método, es decir, que tú eliges el diseño de la misma.
      Saludos.

      Eliminar
    4. Vuelvo a la carga. Sin volver a intentar probar, copié y coloqué tal cual los códigos que mencionas para las flechas de esta entrada. Incluso volví a colocar la lib. jQuery 1.7.1 y las benditas flechas no aparecen. Esto que acabo de hacer es porque después de lo que mencionaste en otra contestación, pasé a tratar de poner las que tu tienes acá (las flechitas al costado derecho, que yo tengo en "Veredas de Siempre" y como no funcionó, me puse a colocar la flecha IR ARRIBA que desaparece que tengo colocada en "Por el mundo del crochet" y NADAAA!!! Entonces resolví, colocar tal cual mencionas los códigos de ésta Entrada y como NO PASA NADA, es que te pido un poco de paciencia y ayuda.
      ACEPTO SUGERENCIAS.

      Eliminar
    5. Si estos no te funcionan quizá no sean compatibles con el otro script de jQuery, a veces pasa y es "normal". Ahora, si los de Scriptaculos no funcionan recuerda que debes aplicar un hack al script de jQuery para que ambos funcionen. Ahora mismo entré pero no las veo puestas, y necesitaría verlas para ver qué puede andar mal.

      Eliminar
    6. Gracias por tus palabras. Voy a sacar el nuevo y colocaré el que tienes tú de las dos flechitas a la derecha. Ahora, tu sabes que no tengo Scriptaculous, como ya dije, lo instalé y lo tuve que sacar porque me había dejado de funcionar el video. Bueno, volveré a instalar todo y te dejo un mensaje para que lo veas.
      Gracias ;)))

      Eliminar
    7. Querido amigo. A esta hora ya me siento cansado de tanto cambio. Acá son las 22:42 y ahí entre 3 y 4 horas antes ;)
      Resulta que hasta ahora desde hace 3 horas, he seguido probando entre unos y otros sin resultado. Recién a lo último, cuando le di VISTA PREVIA y se demoró en cargar el video VI LAS FLECHAS, las que tienes al costado acá, pero en cuanto apareció el video DESAPARECIERON LAS FLECHAS.
      SI SE TE OCURRE ALGÚN TRUCO, GENIAL. Y SI NO, LE DIBUJO UNA EN EL MONITOR ;)))

      Eliminar
    8. Jajajaja, dibujadas en el monitor seguro se verán preciosas pero poco servirán :P
      Prueba con esto, si el de jQuery lo tienes antes de Scriptaculous entonces ponlo al revés, es decir, el de Scriptaculous primero y después el de jQuery, o viceversa, según como lo tengas.

      Eliminar
    9. Pero coincides que "se verán preciosas" ;D
      Voy a hacer lo que dices y ya te contaré.
      TENGO OTRA: LO COMENTARÉ EN LA ENTRADA QUE CORRESPONDA.
      Abrazo

      Eliminar
    10. Mirá, los puse para arriba, para abajo, debajo de una axila, entre las piernas y NADA. Lo que veo (mi humilde entender) que hay un enorme conflicto con jQuery, Scriptaculous y el Video. Originalmente el script de jQuery está al principio de la plantilla y Scriptaculous NO ESTA en esta plantilla. Cuando agregué éste último tuve que poner el parche a jQuery para que el video continuara funcionando. Ahora bien, si creo un conflicto con jQuery (quiere decir que lo pongo dos veces) originalmente donde está y lo repito donde coloco el código para las flechas ARRIBA/ABAJO de esta entrada, entonces el video DEJA DE FUNCIONAR y APARECEN LAS FLECHAS, pero no solo aparecen sino que FUNCIONAN, se comprende?
      Si no se te ocurre solución, dejo las flechas y listo, pero no es lo conveniente ya que las mismas son un beneficio para nuestros lectores/visitantes.
      Creo que en otra entrada la de Enlaces de Suscripción, también me pasa algo raro, creo que lo explico allí, pero te resumo, pongo los códigos en los lugares que dices y no se ve la parte interna, es decir que se desplega solo un fondo vacío EN APARIENCIA porque si hago click en los íconos invisibles FUNCIONAN.Lo que no está es el recuadro para "Suscribir al Feed" que debería estar debajo. En fin, realmente es un LÍO. Te recuerdo el blog http://elmundodecrochet.blogspot.com/ y verás lo que digo.
      Si puedes sugerir algo? soy todo orejas. Y si no lo eliminaré, porque si al agregarle algo voy a tener todos estos dramas, mejor lo dejo y me dedico a pasear perros.- ;D
      Te dejo un abrazo.-

      Eliminar
    11. Vale, vale, que todo salga bien ;)

      Eliminar
    12. Pues Scriptaculous sí lo veo en esa plantilla. Revisa el otro comentario que te decía en la otra entrada, quizá eso pueda solucionar lo de las flechas.
      Saludos.

      Eliminar
  41. Hola Potro, lo primero felicitarte por tu página ya que con ella nos estas ayudando a mejorar nuestros blogs y lo segundo es una pregunta en relación a las flechas de subir y bajar: ¿puedo cambiar la posición de las flechas,es decir, que la de subir esté arriba y la de bajar abajo?¿ y puedo cambiar el diseño y el color?
    Gracias de antemano.
    Bueno y si tienen un rato les agradecería que visitaran mi blog-(definicionesdematematicas.blogspot.com) de matemáticas que, aunque todavía no tiene mucho contenido, parece que le está sirviendo al gente, y esoes, al fin y al cabo, de lo que se trata.
    Saludos

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Adrián.
      Para que esté una arriba de otra cambia el primer bottom:10px; por bottom: 50px;
      Luego cambia el left:70px; por left:30px;

      Lo del diseño de las flechas se menciona en la entrada.
      Saludos.

      Eliminar
    2. Muchas garcias Potro, ya lo he cambiado.
      Saludos

      Eliminar
  42. Muchas gracias, me sirvieron mucho

    ResponderEliminar
  43. Hallo....Super fácil Potro.Listo.:-)
    http://jfblueplanet.blogspot.com/

    ResponderEliminar
  44. Hola potro, de nuevo yo jeje, oye, sabrás porqué en mi blog hacia abajo solo se desliza un poco, digamos, 15% del total?

    Para arriba si se desliza todo, pero para abajo no :s espero puedas ayudarme

    *Tengo tambien instalado el script que hace que la Nav-bar desaparesca y aparezca con el cursor, no se si eso afecte.

    Saludos y muchas gracias.

    ResponderEliminar
  45. http://masajeslaguna.blogspot.mx/

    Tienes razón en los "emoticons" nunca me fije en el aviso, ni tenía conciencia plena de los diversos sistemas de comentarios, hasta ayer entré en razón de que tengo los anidados. Jajaja, el que mucho abarca poco aprieta, tengo tantas cosas que quiero meter que no lo hago con la debida calma, si vieras como tengo mi blog de pruebas jajaja.

    En fin, tu dime que podría estar pasando aquí o si será mejor que ponga los botones arriba abajo como los tuyos y no con este query.

    Otras cosas que quiero probar son:

    -Añadir elemento debajo del primer post.
    -Personalizar los links de entradas mas recientes y antiguas.
    -Agregar fecha en el blog.
    -Gadget de caja de aviso en el blog con opción de cerrar.
    -Ver número de usuarios en linea (porque quiero poner un chat a un costado).
    -Y veré que opciones hay en vagabundia para los emoticons.

    En fin, todo en su tiempo pero en verdad estoy maravillado con tus aportaciones, no he visto que aceptes donaciones, pero creo que sin dudar muchos haríamos este reconocimiento a tu labor tan loable.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Lo que pasa es que esto de los comentarios anidados es relativamente nuevo, así que los que apenas comienzan no saben que antes no teníamos ese tipo de comentarios ;)

      Lo de los botones es extraño, no encuentro alguna razón para que se quede a la mitad, pero para no complicarte sería mejor que uses los otros.

      Lo demás ciertamente deberás llevártelo con tiempo y calma, si puedes abre un blog de pruebas para que ahí vayas ensayando todo eso, así no correrás el riesgo de meter la pata en tu blog ;)

      Donaciones sí hay, debajo de cada entrada está el botón de PayPal, pero creo que casi nadie lo ve :P

      Saludos!

      Eliminar
    2. Jajaja, que metida de pata! ya vi el botón de PayPal, pero para serte sincero el color del aviso que tienes es muy poco llamativo y es muy fácil pasarlo por alto, tal vez cambiándolo y no digo que fuera fluorescente pero si un color menos pálido, jeje en fin, sé que no es tu prioridad pero no estaría de más... En mi caso si me pondré la del puebla, sólo me programo y queda.

      Gracias por el consejo, pondré los botones como los tuyos y lo haré ya con calma.

      Saludos

      Eliminar
    3. Gracias, quizá más adelante cambie el botón :)

      Eliminar
  46. Buenisimo el tutorial. Me quedo una duda. ¿Como debo poner el código para que las flechas queden una arriba de la otra, y con un espacio de por medio?

    Digamos asi:





    Gracias por tu valiosa ayuda.

    ResponderEliminar
    Respuestas
    1. Para que esté una arriba de otra cambia el primer bottom:10px; por bottom: 50px;
      Luego cambia el left:70px; por left:30px;
      Saludos.

      Eliminar
  47. Gracias, pero no queda como aca. Quedan uno abajo de la otra, pero separadas. Se ve asi:



    .......↓

    Y quiero que quede una encima de la otra.

    ResponderEliminar
  48. Ahhhh, ahi esta, ya me di cuenta. GRACIAS EL POTRO!

    ResponderEliminar
  49. potro gracias por tus post, muy bueno el blog!

    quería saber si hay alguna forma de aplicar esto en otra parte del blog, por ejemplo en una entrada

    tener un boton arriba que me lleve al final de la entrada y una al final que me lleve arriba

    o si se puede hacer que me lleve a alguna parte especifica de la entrada (ponele al medio)

    gracias!!

    ResponderEliminar
    Respuestas
    1. se me ocurre poner un ancla

      un botón
      ancla

      y el destino
      div id="ancla1">ancla /div

      pero el tema sería ponerle el efecto de desplazamiento

      Eliminar
    2. Mira esta entrada, te podrá servir para el último ejemplo que propones:
      http://ciudadblogger.com/2009/06/como-crear-vinculos-dentro-de-la-misma.html

      Eliminar
    3. claro! si poner un botón y se dirige perfecto,

      el tema sería como ponerle al link un efecto de desplazamiento como el de los botones "arriba y abajo"

      hacer click y me lleve desplazándome hacia el lugar deseado

      Eliminar
    4. claro! si poniendo un link me va a dirigir al sector que quiero, ahora el tema es ver como hacer que cuando vaya lo haga con el efecto de desplazamiento

      seguiré probando,

      gracias!

      Eliminar
    5. Con este método no creo que te sirva, quizás con el mismo sistema de las flechas de arriba y abajo con Scriptaculous sí se pueda, será cuestión de que veas cómo está el código y sólo cambies los IDs.

      Eliminar
  50. Como puedo hacer para que cuando este arriba de la pagina se oculten?
    Tal y como pasaba en el anterior tutorial que hiciste con jquery,....

    ResponderEliminar
    Respuestas
    1. Usa el otro tutorial, este no tiene esa característica.

      Eliminar
  51. ¡Hola Guapetón!

    Dime, como hago para hacer uno igual a ésto: http://i1072.photobucket.com/albums/w377/HsexualidadF/Comoponerunosimilar.jpg

    ¿Y qué necesito para cambiarle los colores, el tipo de letra etc. Y para que me aparezca al final de toda las entradas?

    ResponderEliminar
  52. Soy muy muy nuevaaa en esto muy pava y tal .. ._." en fin, yo puse un efecto antes de tal cosa y ahora me viene otro efecto muy chulo y quiero ponerlo pero va justo delante de esa cosa donde ya tenia puesto el efecto :) sk stoy haciendole un blog a una amiga y quiero ponerle efectos chulos ^-^

    ResponderEliminar
    Respuestas
    1. No comprendo Saramonic10, ¿me puedes explicar nuevamente cuál es el problema y con los mayores detalles posibles?

      Eliminar
  53. Potro no nos sale, como hacemos, nos lo podrías explicar, por aquí, no damos encontrado; Body, group...

    Querríamos poner estos y así el blog consideramos que ya estará perfecto, por favor ayudanos!

    Te paso lo que queremos poner:

    - http://ciudadblogger.com/2012/05/botones-de-ir-arriba-e-ir-abajo-con.html
    - http://ciudadblogger.com/2012/07/botones-para-compartir-flotantes-que-se.html
    - http://ciudadblogger.com/2012/05/kontactr-formulario-de-contacto-para-el.html
    - http://www.miltrucosblogger.info/2012/10/espectaculares-emoticones-para-los.html
    - http://www.miltrucosblogger.info/2012/10/insertar-un-muro-de-facebook-en-tu-blog.html

    Gracias y esperamos que nos ayudes.

    Nuestro blog:

    http://esteirofutbol.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola SCDR ESTEIRO, sólo puedo ayudarte en entradas publicadas en este blog, si tienes una duda en particular en cada una de ellas tendrás que dejar la duda en la entrada correspondiente.

      La forma más sencilla de localizar los códigos es presionando las teclas CTRL + F.
      Saludos.

      Eliminar
  54. Hola, me gustaria saber como puedo ponerlos como tu, uno encima de otro, no me sale.
    Como puedo hacerlo?!?!

    ResponderEliminar
    Respuestas
    1. Para que esté uno arriba de otro cambia el primer bottom:10px; por bottom: 50px;
      Luego cambia el left:70px; por left:30px;

      Si los quieres más arriba juega con esos valores.

      Eliminar
  55. muy bueno el tuto y sale a la perfeccion pero lo kiero poner en el medio como lo tienes tu y k vayan mas despacio o salto a salto con el cursor

    ResponderEliminar
    Respuestas
    1. Hola luis carlos, mira el comentario #49.1
      La velocidad me parece que se cambia modificando los 800 del segundo código.

      Eliminar
  56. Potro, a mi me gustaria poner en mi blog el que tu tienes, me puede enseñar como?

    ResponderEliminar
    Respuestas
    1. Yo uso el método con Scriptaculous (enlace en la entrada).

      Eliminar
  57. Al tratar de aplicar algun cambio como la posicion o el color solo lo aplica al boton de ir arriba y al de ir abajo no le pasa nada
    Que sera? de antemano agradezco la ayuda y te felicito por tu pagina la cual me ha ayudado muchisimo en estos momento con mi blog

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog lo has hecho y qué estilos quieres aplicar?

      Eliminar
  58. Hola.
    Yo lo que quisiera saber es como se ponen los botones que cambian cuando pones el puntero encima, no se si me explico. Hay muchos blogs por ahí con una imagen de ir arriba, pero cuando pones el puntero encima para pulsar el botón, se superpone otra imagen.
    Por ejemplo, el halcón milenario de esta web...
    http://meconviertoengeek.com
    Que cuendo pones el puntero encima hace un efecto.

    ResponderEliminar
    Respuestas
    1. Con estos no sé si se pueda, pero con estos sí:
      http://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html

      Sería aplicar el código de la imagen de esta otra entrada:
      http://ciudadblogger.com/2009/09/cambiar-imagen-al-pasar-el-mouse.html

      Eliminar
  59. Funciona a la perfección pero quiero hacer una pregunta, es posible poner los botones en vertical, las flechas arriba y abajo una encima de la otra?
    Grácias de nuevo por tu tiempo.

    ResponderEliminar
  60. Hola, ¿podríais poner el código para que los botones estén uno encima del otro? ¿El de direccion arriba en el superior y el de dirección abajo en inferior? Gracias n.n

    ResponderEliminar
  61. emm es muy util la informacion emm .. ejej pero no me aparece el bton de ir arriba solo el de ir abajo ya revise la URL del boton y todo esta bien pero cuando lo ingreso solo ese boton no me aparece...q hago..?? ayudame pliss.. ejeje!!..XDD

    ResponderEliminar
  62. Hola potro, me parce muy interesante tu página y te doy las gracias de ante mano. En mi blog, aún en construcción, estoy poniendo estas flechitas, he puesto todo y solo me sale la flecha de bajar. Te quería preguntar si hay que añadir algo más o es que he fallado en algo?¿?? Gracias.

    ResponderEliminar
    Respuestas
    1. Habría que ver en cuál blog lo has puesto para poder revisar los códigos que has puesto.

      Eliminar
  63. hola: me gustaria saber como poner los botones de arriba y abajo iguales que los que tu tienes

    ResponderEliminar
    Respuestas
    1. Los que yo tengo son estos:
      http://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html

      Eliminar
  64. Hola amigo porfa ayudanme en esta dificil tarea para mi, lo que quiero saber es como cambiar el fondo de mi blog, es una plantilla descargada pero he buscado como cambiar el fondo y no se que hacer, me meto en platilla y selleciono fondo pero me dice "plantilla no se le puede cambiar fondo".

    Porfa ayudame:
    http://narutoshippudenlatinoamericanarutokun.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola, he entrado tanto a esa dirección como a la que contiene la palabra "oficial" pero el segundo dice que el blog ha sido eliminado así que no he podido ver el blog donde tienes el problema.

      Eliminar
  65. Amigo gracias por ayudarnos con estas fabulosos aportes para nuestro blog.
    Te cuento que e seguido los pasos para añadir este codigo pero no me funciona y no
    se que estoy haciendo mal.,ayúdame por favor a insertarlo te lo agradeceré.
    Gracias.

    ResponderEliminar
    Respuestas
    1. No sé en cuál blog tengas el problema, pero también debes revisar lo último que está en la entrada, algo de eso pueda ser tu caso.

      Eliminar
  66. Hola Potro, he puesto los botones en mi blog, los pude personalizar y si se ven bien, perono funcionan, osea no suben ni bajan la página, noté que cuando pongo en la imagen de las flechas el cursos, no aparece la manita como en tu ejemplo, què puedo hacer?, agradezco mucho tu ayuda, gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Sari. Agrega estos estilos en tu plantilla:
      .content {position:static !important}

      Eliminar
  67. WoWWWW Potrito gracias otra vez!!! qué haría sin ti????!!!!!!
    Los botenes de subir y bajar ya funcionan, aprovechando de verdad tus atenciones, cómo puedo centrar la descripción de mi blog y el menú de las páginas que las tengo bajo la descripción de manera horizontal?, te dejo mi blog por si quieres ver, mil gracias otra vez!
    http://sari-ilustracion.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. La descripción así:
      .Header .description {text-align:center}

      El menú como tal no se puede centrar porque para que pueda estar de forma horizontal necesita "flotar" a la izquierda. Lo único que puedes hacer es ponerle un margen a las pestañas para que se recorran y den la apariencia de estar más centradas:
      .tabs .widget li, .tabs .widget li {margin-left: 50px !important}

      Eliminar
    2. gracias Potro!! funcionò perfecto!, en verdad admiro tu dedicación, te vas a ir al cielo!

      Eliminar
  68. Hola, Potro. Una pregunta: ¿cómo hago para ponerle título a las flechas? Ya sabes, algo así como "ir arriba"/"ir abajo". Lo he intentado con distintas variantes de title="ir arriba"; pero no hay forma. Gracias de antemano.

    ResponderEliminar
  69. Yo de nuevo. Ya lo conseguí. Había que ponerlo en div class='nav_up'... y div class='nav_down'..

    ResponderEliminar
  70. Hola Potro, puse los botones de ir arriba e ir abajo, junto con el parche para hacerclo compatible con scriptaculous, pero al dar clic a los botones (cualquiera de los dos) solo me baja como 10 pixles y no lo baja completo.
    http://www.yimmympbblog.bl.ee/

    ResponderEliminar
    Respuestas
    1. Hola YiMmy, no sé si pueda ser por algún otro script de tu plantilla que interfiere con este, o si porque tienes 3 veces la misma versión de jQuery y debes tener solo una.

      Eliminar
  71. Hola potro buen día... queria preguntarte que hago para que no me queden empalmados los dos botones,más bien que me queden como lo muestra en el blog de pruebas.
    saludos

    ResponderEliminar
    Respuestas
    1. Hola Raven, si lo pones tal cual como está en el código (sin modificaciones) se mostrará tal cual como está en el blog de pruebas.

      Eliminar
  72. Hola El Potro, buenos días.
    Tengo un problemilla con este código, nada difícil supongo pero a mi no me sale lo que quiero...resulta que las flechas las tengo a la derecha y quiero ponerlas a la izquierda, ya que me interesa poner el chat que verás colocado a la izquierda en la derecha, pero al modificar por ejemplo el texto right por left solo se pasa al a izquierda una flecha, la otra no. A ver si me puedes decir como las pongo en la izquierda. También me pasa que quería subirlas un poco hacia arriba y solo subía una flecha y aún encima se hacía más grande.

    Saludos, muchas gracias como siempre por todo.

    ResponderEliminar
    Respuestas
    1. Hola. Hay dos left en el código, uno es left:30px; y el otro left:70px;, ambos hay que cambiarlos.
      Saludos.

      Eliminar
    2. Hola El Potro, si, te entiendo, incluso he vuelto a copiar el código otra vez, resulta que cambio los dos right que tenía puestos por left y me deja un icono en la derecha y otro en la izquierda, es raro no?
      Igual es que lo está bloquenado otro elemento, no se...

      Saludos.

      Eliminar
    3. Hola de nuevo, entré a tu blog y veo los botones (ambos) del lado derecho, supongo que al final supiste qué impedía moverlo hacia el otro lado. Cualquier duda me comentas.
      Saludos.

      Eliminar
    4. Hola El Potro, como estás.
      Los botones los tenía colocados desde el principio en el lado derecho, los quiero colocar en el izquierdo, pero no hay forma, no se que puede pasar, y eso que coloqué el código otra vez, pero sigo sin poder ponerlo en el lado izquierdo. Si se te ocurre algo ya me dirás. De todas formas te agradezco mucho la ayuda.

      Eliminar
    5. Si puedes intenta ponerlos del lado izquierdo y déjalos así para que pueda entrar y ver dónde está el problema. Saludos.

      Eliminar
    6. Hola El Potro, lo único que consigo es poner un botón a la derecha y otro a la izquierda, es raro no?. Ya lo tienes así en el blog para que lo veas.

      De todas formas si no se puede tampoco me molesta, no te preocupes, míralo por última vez y si encuentras el fallo bien, si no no pasa nada. El chat lo tengo de pruebas.

      Saludos, hasta pronto.

      Te paso lo que tengo escrito en la plantilla referente a esos botones:

      /* Botones de Ir arriba e Ir abajo con jQuery
      ----------------------------------------------- */
      .nav_up{
      padding:7px; /* Distancia entre el borde y el ícono */
      background-color:white;
      border:1px solid #CCC; /* Color del borde */
      position:fixed;
      background:transparent url(http://lh6.googleusercontent.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
      background-position:50% 50%;
      width:20px; /* Ancho del botón */
      height:20px; /* Alto del botón */
      bottom:10px; /* Distancia desde abajo */
      left:30px; /* Cambiar left por right si se quiere a la derecha */
      white-space:nowrap;
      cursor: pointer;
      border-radius: 3px 3px 3px 3px;
      opacity:0.7;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
      }
      .nav_down{
      padding:7px; /* Distancia entre el borde y el ícono */
      background-color:white;
      border:1px solid #CCC; /* Color del borde */
      position:fixed;
      background:transparent url(http://lh6.googleusercontent.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
      background-position:50% 50%;
      width:20px; /* Ancho del botón */
      height:20px; /* Alto del botón */
      bottom:10px;
      left:70px; /* Cambiar left por right si se quiere a la derecha */
      white-space:nowrap;
      cursor: pointer;
      border-radius: 3px 3px 3px 3px;
      opacity:0.7;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
      }

      Eliminar
    7. Hola Panzer Commander, lo que sucede es que tienes repetido el código de los estilos de los botones, por eso no surge efecto porque el navegador lee el código repetido y lo interpreta como está. Localiza el código repetido y elimínalo. Luego asegúrate que el código que has dejado tenga la indicación para que las flechas estén en el lado que deseas.

      Saludos.

      Eliminar
    8. Que te voy a decir....pues que eres un crack, madre mía, lo tenía repetido como dices, culpa de mi ignorancia sobre el tema, sobre todo cuando lo coloqué hace año y medio. Ya está solucionado.
      Como siempre darte las gracias por resolver tan rápidamente el "misterio".

      Saludos.

      Eliminar
    9. Gracias, me alegro que no haya sido nada grave y que se haya resuelto de forma sencilla. Saludos.

      Eliminar
  73. Hola Potro funciona perfecto, pero tuve el problema que se me freno el Slideshows solo queda la primera foto fija y no se mueve es decir que se me quedo fijo cuando antes pasaba 5 fotos. a que se puede deber eso? fue al agregar los botones de arriba y abajo. Gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Jose Luis, revisa esta parte de la entrada, casi todos se la saltan y regularmente ahí siempre está el problema:

      "En el segundo código he puesto en color gris el script de jQuery, sólo para distinguirlo, por si ya lo tuvieras no lo agregues de nuevo.

      Si usas Scriptaculous podrías aplicar el "parche", pero si no te quieres complicar la vida usa estos botones con Scriptaculous."

      Eliminar
  74. wow! me ha quedado de maravilla. Muchas gracias ojala y te dieras una vuelta por mi blog y me das tu opinion
    La naturaleza del inexistente
    estoy empezando, puede que se vea algo extravagante pero se que con el tiempo lo iré moderando poco a poco
    Gracias!

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Shiroi Star, suerte con tu blog y mucho éxito!

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

    ResponderEliminar
  76. Ooow! ya lo pude resolver! muchas, muchas gracias :3

    ResponderEliminar
  77. Se puede cambiar el icono :s creo que si abia iconos aca en tu pagina..

    ResponderEliminar
    Respuestas
    1. Te copio y pego lo que la misma entrada menciona:
      "Las flechas son imágenes, así que puedes cambiarlas por otras cambiando las URLs de las mismas que se encuentran también en el primer código."

      Eliminar
  78. NOMBRE DE MI BLOG: LaSalaDeNurysGreen

    Escriptaclo o Jquery, antes escuche que no se podian usar ambos y que eran uan especie de manejadores para q ciertos codigos o widgets realicen ciertas funciones. podrias orientarme mejor que son ambos o cual de los 2 me conviene mas utilizar? gracias.

    ResponderEliminar
  79. creo que no le di a avisame, ahora lo hice

    ResponderEliminar
    Respuestas
    1. Son librerías de scripts para crear efectos, este de desplazarse en forma deslizante de arriba a abajo del blog es uno de ellos.

      Eliminar
  80. Ya he solucionado lo de las fechas en la version mobil, muchas gracias por tu ayuda!!!!
    Una pregunta en la version mobil de alquilerdegoletas.net como puedo añadir un telefono y mail de contaxcto en la version mobil, abajo de donde poner VER VERSIÓN WEB77Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Puedes añadir un gadget y luego condicionar ese gadget para que sólo sea visible en la versión móvil:
      http://www.ciudadblogger.com/2011/11/habilitar-las-plantillas-personalizadas.html

      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.

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

 
Ir Arriba Ir Abajo
I Ciudad Blogger