Tutorial: Botón Subir

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.

 Van a Diseño 

o

Les va a salir una pantalla como esta:

 Dan click en Añadir un Gadget 

Les sale un recuadro como este:

 Buscan el ítem que diga HTML/Javasript y dan click en el botón de +

Les sale este recuadro:

Pegan el siguiente código

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="URL IMAGEN" /></a>

En titulo lo dejan en Blanco.
Donde dice URL IMAGEN ponen el link de la imagen que desean que les aparezca ahí, señalando hacia arriba o que diga arriba o up. 
 Dan click en Guardar y listo.

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.

 Para ponerlo en tu blog entra a Plantilla y click  la Editar HTML

NOTA! Recomiendo primero hacer una copia de seguridad.

 Dan click dentro del recuadro que les aparece y dan Control + F y ponen </head> dan enter

 Antes de </head> agregan:

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

 Ahora en el mismo buscador ponen ]]></b:skin> y dan enter

 Antes de ]]></b:skin> agregan lo siguiente:

/* 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;
}

 En el mismo buscador ponen </body>  y dan enter

 Y antes de </body> agregan: 

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

 Guardan los cambios y Listo!

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.