viernes, 26 de diciembre de 2014

[TUTORIAL] Poner un Boton Up (Deslizante & aparece abajo )

Hello Kawaii's ... ¿C0m0 Estan? Yo Bien Bien , aquí & Ustedes ;3 aparte ando entusiasmada por que mañana es la 1º Reseña xDD jajajaj ando Organizando Todoo ;33
Bueno aquí el Tutorial es un Boton Up ! que lleva hacia arriba pero se desliza ; No es estilo Sencillo, aparece desde abajo  .... Los botones sencillos son esos que están todo el tiempo en la esquina & cuando le das clik te aparece arriba de la nada pero no desliza ¬¬' xD
1º- Ve a Plantilla -> editar HTML -> CTRL+F--> TE APARECE UNA CAJITA DONDE BUSCARAS ; </head>
& pega antes de el  ; el siguiente código .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Ahora en la misma cajita que tenemos al presionar CTRL +F ; BUSCAMOS </body>
& pega antes de el el siguiente código ;

 <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>

& Busca el siguiente código ahora ; ]]></b:skin>
& PEGA ANTES DE EL ESTE CODIGO ;
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 250px; /* Distancia desde abajo */
right: 5px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */

display: block;
background: url(Url de tu botón) no-repeat center center;
AHORA SOLO EDITA ; el ancho de botón & alto esto es la medida de la imagen del botón & coloca la URL DEL BOTON
-----PROXIMAMENTE TRAERE BOTONES  :33 -----
Espero que les haya gustado nos vemos en el próximo Tuto adiós! :'3

2 comentarios:

  1. Gracias por el tutorias :).
    Feliz año nuevo :3,besos ^3^

    ResponderEliminar
    Respuestas
    1. Que bueno que te gusto el Tuto ....Gracias Por comentar ;333 aaa & Igual feliz año
      empezemoslo de maravilla :DD ;3

      Eliminar