Botón Subir y Bajar en Blogger con Efecto jQuery


Ya antes había publicado una entrada para agregar un botón que permitía subir dentro del blog, ahora, y por curiosidad de "ÐŖǻĜǾŊ ÃζЏĿ", les muestro otra forma que además de darnos el botón de subir, se adiciona el botón para bajar, todo esto con un efecto deslizante en jQuery.

Los pasos a seguir son muy sencillos, básicamente se trata de lo siguiente:

  • Libreria jQuery (para hace el efecto).
  • Elemeto en el Blog (Donde lo vamos a poner dentro del blog).
  • Css. (para que se vea chulo de bonito!).

Si quieres ver el demo, da clic aquí.

Habiendo dicho esto, comencemos con la implementación.

Paso 1. Elemento jQuery.


¡Importante! Si ya tienes la librería, omite este paso.


En nuestra plantilla (Diseño>>Edición HTML) buscamos </head> y pegamos el siguiente código:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>



Paso. 2 Pegamos el elemento en el blog


En la plantilla buscamos </body> y justo antes pegamos lo siguiente:


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


<script src='http://isaiasgah.web.officelive.com/Documents/scroll-startstop.events.jquery.js' type='text/javascript'/>

<script type='text/javascript'>

$(function() {
var $elem = $(&#39;#content&#39;);

$(&#39;#nav_up&#39;).fadeIn(&#39;slow&#39;);
$(&#39;#nav_down&#39;).fadeIn(&#39;slow&#39;);

$(window).bind(&#39;scrollstart&#39;, function(){
$(&#39;#nav_up,#nav_down&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;});
});
$(window).bind(&#39;scrollstop&#39;, function(){
$(&#39;#nav_up,#nav_down&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;});
});

$(&#39;#nav_down&#39;).click(
function (e) {
$(&#39;html, body&#39;).animate({scrollTop: $elem.height()}, 800);
}
);
$(&#39;#nav_up&#39;).click(
function (e) {
$(&#39;html, body&#39;).animate({scrollTop: &#39;0px&#39;}, 800);
}
);
});

</script>


Ahora buscamos en la plantilla <body> y justo después pegamos lo siguiente:


<div class="content" id="content">


Ahora volvemos a </body> y justo antes pegamos:


</div>



Paso 3. Propiedades Css.


En la plantilla buscamos ]]></b:skin> y justo antes pegamos lo siguiente:


.nav_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://i49.tinypic.com/ivwpit.jpg) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:7px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://i47.tinypic.com/vwpe88.jpg) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:7px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}


En esta parte es donde puedes cambiar colores, formas y sabores de los botones ;)

Y con esto hemos concluido el truco de hoy, para ver el demo, haz clic aquí.

Si tienes alguna duda puedes dejar un comentario o mandarme un correo, tratare de responder en breve :)

Fuente: Scrolling to the Top and Bottom with jQuery by Codrops

Comentarios

  1. Hola Arredondo , la he implementado y me encanta , porque habia probado otras y alguna no me funciona bien .
    es de agradecer lo claro que lo pones todo ya que yo soy un "CARROZA" y esto me facilita las cosas , ha habido veces que he inetntado hacer algo parecido y me ha sido imposible ya que en algun blog dan por supuesto que se saben algunas cosas , que "carrozas" como yo no tenemos ni idea y que ademas estamos "mu mayores" para aprender a estas alturas.
    No obstante te agradeceia si fuera posible , si me podias resolver unos pequeños ( o grandes??) detalles
    las flechas estan mejor a la derecha , y ademas y si estan abajo , tambien ponerlas arriba , aunque lo mejor es que estuvieran en el centro.
    Tambien seria importante el que las flechas fueran con un poco de diseño o bien con una gracia .. de color ...por ejemplo. yo en otro diseño ( que no me funciona bien ) las he puesto con url desde picasa.

    Por cierto veo que eres de Mejico y que te apellidas ARRedondo , y me gustaria saber si este es un apellido mejicano , ya que yo me apellido REDONDO y este de Arredondo no lo habia visto nunca.
    Un saludo.
    Victorino Redondo Fidalgo
    (VredondoF)

    ResponderEliminar
  2. Hola Victorino, me alegra que te haya ayudado este truco, te agradezco enormemente tus comentarios y créeme que trato de ser lo más claro posible porque en mi caso, también me costaba seguir algunos trucos que como dices, daban por hecho que uno es experto o algo similar jeje pero bueno, la practica hace al maestro y nunca es tarde para aprender, sólo es cuestión de dedicarlo un poco a investigar y experimentar ;) en ese sentido, considerame para cualquier ayuda que necesites ok?

    Ahora, respecto a las inquietudes, las mencionare punto por punto.

    1.- Posición de las flechas.
    El lugar que por defecto es en la esquina inferior izquierda, sin embargo, es muy fácil cambiarlo, esto lo conseguimos modificando las propiedades CSS, es decir, las que pegamos en el PASO No. 3, donde ".nav_up" contiene las propiedades de la flecha hacía arriba (lo que esta contenido entre los corchetes { } ) y ".nav_down" contiene las propiedades de la flecha hacía abajo ( de igual manera, lo que esta entre corchetes { } ).

    Para cambiar la ubicación de las flechas, primero hay que saber que es lo que lo determina, para esto nos sirven las propiedades "top, bottom, left y right" si observas, en este caso especifico tiene:

    bottom:7px;
    left:30px;

    Aquí se esta determinando que el elemento ".nav_up" (flecha hacía arriba) tenga una distancia de "7px" respecto del "bottom" (o "piso" por llamarle de alguna forma) y una distancia de 30px respecto a "left" (o "pared izquierda") si quieres cambiarla por ejemplo a la esquina superior derecha deberás poner:

    top:7px;
    right:30px;

    Donde "top" es el "techo" y "right" la "pared derecha"


    Si quieres ubicar la flecha en la esquina inferior derecha, entonces pones:

    Bottom:7px;
    right:30px;

    Y así según donde quieras ubicarla.

    Notas:

    Los pixeles tu los determinas según de la ubicación exacta que deseas.
    Recuerda que cada flecha tiene sus propiedades, por lo que debes cambiar ambas, es decir ".nav_up" y".nav_down"


    2.- Diseño de las flechas.

    Para cambiar el tipo de flecha, digamos por otra imagen, sólo tienes que poner la URL de la nueva imagen en:"background:" para que nos quede de la siguiente manera:

    background:transparent url("URL DE LA NUEVA IMAGEN") no-repeat top left;

    Nota:
    Es muy importante considerar el tamaño de la nueva imagen, ya que si es más grande, tendrás que modificar otras propiedades o bien eliminarlas, me refiero específicamente a:

    border:1px solid #CCC;
    width:20px;
    height:20px;

    Estas propiedades son las que hacen posible que la flecha se encuentre dentro de un cuadro, donde "border" representa la línea, "width" el ancho y "height" lo alto.

    Personalmente considero que las flechas deben ser bastante discretas, pero bueno, cada blog es un mundo y las podemos adaptar fácilmente ;)

    Por último, sobre mi apellido... pues según se, proviene de España, de hecho hay un municipio en llamado Arredondo en Cantabría y si que es poco conocido por estos lares jejeje

    Nuevamente, gracias por comentar y estoy a tus ordenes para cualquier consulta, comentario o sugerencia.

    ¡Saludos cordiales!

    ResponderEliminar
  3. Buenas noches Arredondo.
    Perfecto como me lo indicas , es un placer dejarse guiar por ti , yo que soy muy negado para esto , lo he entendido todo ... sobre todo he entendido el CONCEPTO ... que es lo importante , aqui puedes ver como me han quedado ...
    http://countryyvariantes.blogspot.com/

    Mañana te contesto , ahora son las 21 horas en España y ya lo dejo
    Mañana te mirare lo del apellido Arredondo , y te enviare datos ya que hay una base de datos donde indica los Arredondos que hay en España por 1er apellido y por 2º apellido y por provincia ... te lo miro y te lo indico ..
    hasta mañana.

    ResponderEliminar
  4. Te quedo muy bien, me da mucho gusto que como dices, se haya entendido el concepto, eso es lo más importante, y conste, ya quedamos con lo del Apellido Arredondo :)

    Seguimos en contacto y cualquier cosa, ya sabes, estoy a la orden ;)

    Saludos!!

    ResponderEliminar
  5. Buenos dias Arredondo.
    He intentado pegar la informacion del Apellido Arredondo , pero no ha sido posible , por lo tanto te copio el enlace
    http://www.ine.es/fapel/FAPEL.INICIO

    En el veras que el numero de personas con 1er apellido es de 2.622 personas y con 2º apellido son 2.475
    Por Nacimientos , la mayor parte (656 - 25,2% ) nacieron en la Provincia de Granada.
    Es logico ya que en la Reconquista ( a los Arabes) los reyes Castellanos a medida que recuperaban ciudades llevaban colonos cristianos para repoblar las zonas conquistadas , por lo que no te extrañe que siendo un apellido de ORIGEN Cantabro lo hayan ido desplazando hacia el Sur.

    Aqui tienes Arredondo en Wikipedia
    http://es.wikipedia.org/wiki/Arredondo
    Donde indica que una gran parte de la poblacion emigro a las Americas.
    "Arredondo antiguamente era denominado la Capital del mundo pues de allí emigraron numerosos indianos hacia América"
    Por lo que se aprecia , es probable que la mayor parte de las personas esten ahora en Hispanoamerica.
    El que haya solo 2.622 personas con primer apellido indica que es un Apellido que es probable que desaparezca de tierras Españolas.
    Es una pena que las personas que os apellidais Arredondo y que estais por todo el mundo no hagais "ALGO" como por ejemplo reuniros en algun lugar de America cada x tiempo y en España y en Arredondo , por ejemplo cada 5 años.
    Te digo esto porque en Astorga ( ciudad prosima a mi ciudad Ponferrada) se reunen todos los años los que se apellidan "BOTAS" son varios miles , y la verdad es que es un acto entrañable.
    Bueno es una idea que te doy ... yo entiendo que el recuperar las raices es una buen objetivo.
    En mi familia nos reunimos todos los años en Leon , todos los parientes y este es nuestro blog .
    somos unos 100 y o que hacemos es ademas de una cena el RECONOCERNOS ..
    http://descendientesderedondosanz.blogspot.com/

    ResponderEliminar
  6. Te agradezco enormemente la información, antes habia tenido la curiosidad de saber de donde provenia mi apellido y solo encontre que era de procedencia española, lo cual no me sorprendio mucho y lo deje hasta ahí.

    Ahora me has dado una idea para crear un Blog y tratar de contactar a todos aquellos "Arredondo" y bueno... quizás algun día logremos reuniones como las que tu familia hace, probablemente de resultado, probablemente nadie me pele jeje pero al menos hare un intento, te agradecería sugerencias de temas para publicar porque por el momento lo más que se me ocurre es la información que me has proporcionado amablemente.

    Seguimo en contacto y nuevamente gracias por la información :)

    ResponderEliminar
  7. Muchas gracias una vez mas traes lo mejor para el blogger, Saludos

    ResponderEliminar
  8. Gracias mi estimado y prometo traer más curiosidades jejeje he andado un tanto apretado de tiempo :s en fin.

    Gracias por comentar :)

    ResponderEliminar
  9. Gracias me funciona de maravilla aca esta mi blog donde recien lo probe http://pacheclown.iya.es/

    ResponderEliminar
  10. ¡Qué buena pregunta!

    Pues estuve buscando por la red y al parecer no es un truco muy solicitado, seguiré atento a ver si logro encontrar algo para «postearlo», sin embargo, no se que tan recomendable sea, he visto ese efecto en algunas plantillas de Tumblr y no le veo mucha funcionalidad (muchos clic's para ver más información) pero bueno cada blog es distinto, me queda claro.

    Seguiremos informando. Saludos.

    ResponderEliminar
  11. no salio bien mi comentario :P la parte que no encuentro es la que dice BODY.

    ResponderEliminar
  12. Si es para tu blog (lo revisé), entonces es:

    <body class='loading'>

    Y abajo el código. :)

    Saludos.

    ResponderEliminar
  13. Buenos dias Bloggers!!!

    Me encanta tu Blog, y estoy buscando los trucillos que hay. He intentado de poner los botones de subir y bajar. Pero cuando doy a vista previa, no me sale nada de nada....no se que es lo que ago mal!!??

    Te puedo mandar el codigo html de mi Blog, para que me digasdonde van las cosas, seria super amable de tu parte!!!!!!!!

    Gracias por todo y espero tu respuesta aqui!!!!!

    Saludos

    Virginia

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Agregar Últimas Entradas Con Imágenes (thumbnail) En Blogger

Soy Isaías, y Soy un Adicto a Blogger

Paso a Paso, Trucos y Secretos para Tumblr - Post 2 de 4