Cómo poner Botón UP | efecto deslizante

OLI!!! (￣▽￣)ノ Este tutorial lo vi en varias platillas muy lindas y lo estuve buscando mucho (muchísimo ┰ω┰), por fin lo encontré y hoy quiero compartirlo con ustedes!

Ya todas conocemos el clásico BOTÓN UP. Que con darle clic aparece de inmediato en la cabecera.
La diferencia con este botón es que este botón se desliza por lo largo del blog hasta llegar a la cabecera.

Vale aquí voy con el paso a paso, pero antes.

Primera Parte

Si tienes en tu plantilla el jQuery, omite el sgte. paso, para saber si ya lo tienes usa Control+G y escribe jQuery. Y si no aparece en tu plantilla has lo sgte. ↓↓↓

PASO 1: Ve a PLANTILLA → Editar HTML. Usa  Control+F  (para buscar) y escribe </head>

PASO 2: Pega el stge. código antes de </head>

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

PASO 3: Guarda los cambios pero no salgas del Editor HTML.

Segunta Parte

Sgte. paso, AGREGAR EL SCRIP PARA EL EFECTO DESLIZANTE!

PASO 1: Sin cerra la ventana en la que estabas, haciendo uso del  Control+F  busca </body> ...Pega el sgte. código arriba de este y guarda, sin salir del editor.

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

Tercera Parte

Bien ahora agreguemos el botón UP↑

PASO 1: Aún sin cerra la misma ventana, busca ]]></b:skin> ...Y pega el sgte código arriba de este.

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 250px; /* DISTANCIA DE ABAJO */
right: 5px; /* DISTANCIA DE DERECHA */
}
#IrArriba span {
width: 60px; /* ANCHO DEL BOTÓN */
height: 60px; /* ALTO DEL BOTÓN */
display: block;
background: url(http://cort.as/Ly9b) no-repeat center center;
} 

PASO 2: Por último clic en Vista previa, ahí verás el botón aparecer si bajas por tu blog. Guarda la plantilla y LISTO! Ahora tienes un botón Up con efecto deslizante que aparece y desaparece.

Personalizando y Modificando

• Si gustas cambiar el Botón UP↑ por un diseño hecho por ti, sólo tienes que cambiar la URL en ROSADO (http://cort.as/Ly9b) por la URL de tu imagen.
• Si cambiaste la imagen del botón por una tuya, deberás también modificar las proporciones del botón UP↑ ...para que pueda visualizarse completamente tú botón. Es decir deberás modificar ANCHO DEL BOTÓN y ALTO DEL BOTÓN.
• Si quieres modificar la ubicación de tu botón, cambia bottom y/o right por top y/o left.
• Su quieres modificar la distancia del botón, cambia DISTANCIA DE ABAJO y DISTANCIA DE DERECHA.

Y es sería todo por hoy, espero les haya gusta el tutorial. Los créditos del tuto para Ciudad blogger. Byesuuuu!