Holaaa!
Hoy les traigo un tutorial para personalizar su blog.
Se trata de poner el botón de subir que aparece al final del blog y ayuda a que se pueda subir al principio de una manera fácil.
Es muy sencillo el tutorial, solo deben seguir los pasos y listo.
Les dejo algunos botones que pueden utilizar
Espero les ayude este tutorial, cualquier duda no duden en dejarme un comentario.
Besos.
Este tutorial deja el botón estático, es decir va a permanecer constante en tu blog.
![Arrows mini graphics](http://www.picgifs.com/mini-graphics/mini-graphics/arrows/mini-graphics-arrows-028431.gif)
Les va a salir una pantalla como esta:
![Arrows mini graphics](http://www.picgifs.com/mini-graphics/mini-graphics/arrows/mini-graphics-arrows-028431.gif)
![Arrows mini graphics](http://www.picgifs.com/mini-graphics/mini-graphics/arrows/mini-graphics-arrows-028431.gif)
![Arrows mini graphics](http://www.picgifs.com/mini-graphics/mini-graphics/arrows/mini-graphics-arrows-028431.gif)
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="URL IMAGEN" /></a>
![Arrows mini graphics](http://www.picgifs.com/mini-graphics/mini-graphics/arrows/mini-graphics-arrows-028431.gif)
Con este efecto, podrás hacer que tu botón desaparezca y solo aparezca cuando bajes, es decir que es intermitente.
NOTA! Si ponen este efecto, no deben realizar el paso anterior, porque si hacen el tutorial anterior y este aparecerán los dos botones. Solo puedes hacer uno de los dos.
NOTA! Recomiendo primero hacer una copia de seguridad.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
NOTA! Si ya tienes ese código omite ese paso.
/* 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(IMAGEN) no-repeat center center;
}
<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>
OJO! Donde dice IMAGEN agregan el link de la imagen que desean agregar. Pueden modificar el ancho y alto del botón para que quede mejor posicionado sen tu blog, eso lo hacen con los apartados que dicen right, width y height.
¡Muchas gracias! Ha sido de gran ayuda :)
ResponderEliminarSaludos desde Blog de una lectora apasionada