1.9.13

Boton Ir Arriba con Jquery que aparece y desaparece -Tutorial-

7 comentarios :

Hola hoy vengo respondiendole a Caro que me pregunto si podia hacer un tutorial de mi boton que dice "Top"

imageBueno lo primero que hay que hacer es entrar a Plantilla image Edicion HTML y con Ctrl+F buscar </head> y justo antes agregar

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

Si ya lo tienes en tu plantilla omite este paso

imageAhora antes de ]]></b:skin> agregar 

/* 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(Url De Tu imagen) no-repeat center center;
}

imageY para finalizar antes de </body> agregar
<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>

" 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 negro 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;"

imageEste tutorial es de: Ciudad Blogerimage

Si quieres otro tutorial añadiendo un gadget HTMLjavascript da click aqui 
Bueno eso es todo, cuidate image

7 comentarios :

  1. exelente tutorial una consulta tienes tutos para plantillas blogskin???? seria genial que subieras me ayudarias un monton!

    ResponderEliminar
    Respuestas
    1. Buen tutorial! Quizás lo use *O*
      Ahh y Sakuya
      Head en plantillas blogskins es:
      ]*]*>*<*/*b*:skin*>
      Sin asteriscos :3

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

    ResponderEliminar
  3. A mi me da error cuando pego el codigo arriba de body, me dice: No se ha podido cargar la vista preliminar de la plantilla: Error al analizar XML, línea 2456, columna 5: The content of elements must consist of well-formed character data or markup. En rojo y me marca la fila que dice: //<![cdata[
    Espero puedas ayudarme :(
    Saludos desde hellocatskawaii.blogspot.com.ar

    ResponderEliminar
    Respuestas
    1. cambia //<![cdata[ por //<![CDATA[ como veras esta en mayusculas fue un error mio al cambiar el blockquote de mi plantilla, avisa si te funciono

      Eliminar

Todo comentario es importante para el blog.
Pero por favor no escribas

✘INSULTOS