29 nov 2014

[Tutorial] Cómo poner un botón para subir

Hiii~! Hoy os traigo un tutorial super útil, que queda genial para mi gusto :)
Lo botones para subir, son esos que pones en la esquina derecha del blog, donde al darle subirá automáticamente hacia arriba (hasta la cabecera). La verdad es bastante útil y es fácil de poner :D

Para empezar, vamos a Plantilla > Edición HTLM > Y buscas </head> con Ctrl+f
Cuando lo hayas encontrado, pega el siguiente código antes del </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Ahora, buscamos </body>, y al tenerlo copias el siguiente código arriba:
<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>
Guardamos, y nos fijamos si todo sigue igual (por si nos hemos equivocado, en ese caso, vuelve a hacer el tutorial)

Bueno, una vez hayas guardado y mirado que esta todo correcto, volvemos a Editar HTML y buscamos ]]></b:skin> y pega el siguiente código debajo:
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 250px; /* Distancia desde abajo */
right: 5px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(Url de tu botón) no-repeat center center;
Esta vez, en la parte de naranja tendréis que poner el ancho y alto de vuestro botón. Y en el azul, la url del botón [Tutorial: Como conseguir la URL de una imagen]
Si no tenéis botón, en mi blog encontrareis varios que os pueden servir, AQUÍ.

Por último guardamos, y listo, ya tendréis vuestro botón puesto~! :D
Espero que os sirva, y cualquier duda me dicen ^^

Créditos del tuto: Clasic & Love

No hay comentarios:

Publicar un comentario