Botón de ir Arriba con Efecto Deslizante para tu Blog

Coloca un botón de ir arriba con efecto deslizante y que al estar en lo alto del blog desaparezca. Fácil de colocar y personalizar para Blogger y WordPress.

¡Hola! soy Gabriela de peengler.com. En esta entrada me voy a enfocar un poco en el diseño de tu blog, específicamente en mostrar un botón flotante que estará en la parte inferior derecha de tu sitio.

Sin más que decir, ¡Empecemos!

Clic en la imagen para ver el vídeo ↑ en YouTube

¿Cómo pongo el botón de subir arriba en mi blog?

Para poner el botón de ir arriba vas a necesitar Font Awesome, es un framework de iconos vectoriales y estilos CSS. En pocas palabras, no necesitaras una imagen de una flecha hacia arriba.

Para instalarlo en tu blog, solo debes copiar y pegar la siguiente línea después del <head>


<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Ahora debes ubicarte en </body> y arriba de este, pegas el siguiente jQuery:


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

Nota: revisa que no tengas el mismo jQuery, si ya lo tienes no es necesario que lo agregues.

Después del jQuery, vas a colocar el código del botón que es el siguiente:


<div id='Boton-ir-arriba'></div>

Para que tu botón de ir arriba funcione necesitaras este código ↓ Para que estés seguro de los pasos mírate mi vídeo: ver tutorial.


<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#Boton-ir-arriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#Boton-ir-arriba').fadeIn();
} else {
jQuery('#Boton-ir-arriba').fadeOut();
}
});
jQuery('#Boton-ir-arriba').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>

Faltaría darle estilos al botón. Si usas Blogger ve a ]]></b:skin> y pega esto:


/* Botón Ir Arriba
----------------------------------------------- */
#Boton-ir-arriba{display:none;z-index:1010;width:32px;height:32px;position:fixed;bottom:25px;right:25px;cursor:pointer;overflow:hidden;font-size:13px;color:#fff;text-align:center;line-height:32px;border-radius:0}
#Boton-ir-arriba:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:#000;opacity:.5;transition:opacity .17s ease}
#Boton-ir-arriba:after{content:'\f077';position:relative;font-family:FontAwesome;font-weight:400;opacity:.8;transition:opacity .17s ease}
#Boton-ir-arriba:hover:before,#Boton-ir-arriba:hover:after,.nav-active #Boton-ir-arriba:after,.nav-active #Boton-ir-arriba:before{opacity:1}

Personalizar Botón de Ir Arriba en Blogger y WordPress

Aquí te explico lo que pienso que vas a querer personalizar de tu botón, ya sea el tamaño, cambiar el icono, el color y más.

Modificar el tamaño del botón

Dirígete en: #Boton-ir-arriba y modificas el ancho y el alto a tu gusto.

width:32px;

height:32px;

Cambiar el tamaño del icono

Busca #Boton-ir-arriba:after y agrega:

font-size: 15px;

Nota: los 15px lo puedes modificar a tu gusto.

Color del icono

En la primera línea de #Boton-ir-arriba encontraras

color:#fff;

Nota: el #fff es el color blanco. En esta página → htmlcolorcodes puedes elegir el tono que desees.

Color del botón

Busca #Boton-ir-arriba:before y modifica el color de fondo:

background-color: #000;

Nota: el #000 es el color negro. En esta página → htmlcolorcodes te ayudara a elegir el tono que desees.

Cambiar el icono del botón

Ve a #Boton-ir-arriba:after y modifica lo que está entre las comillas:

content: ‘\f077‘

En esta imagen ↓ te doy un ejemplo de los iconos que puedes usar y abajo tienes sus respectivos códigos. Ese código lo aplicas en donde va f077 NO borres la barra \