Botón de ir Arriba con Efecto Deslizante y Desaparece

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!

botón de ir arriba en el blog

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 \

iconos de ir arriba

En conclusión

Colocar un botón de ir arriba ayuda a que las personas no tengan que hacer scroll para subir a la parte superior de tu blog.

Se que la gran mayoría de las plantillas de terceros lo incluyen y aun así quería compartir contigo cómo hacerlo por si tu sitio no lo tiene.

Si tienes alguna duda o pregunta, déjamelo en los comentarios.

¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *