Holaaaaa que tal están?
Hace poco subí una entrada en la que les compartía diferentes botones de subir para descargar…sin embargo no les explique cómo hacerlo. En esta ocasión les traigo la explicación o tutorial, ya verán que es súper sencillo y todo lo que tendrán que hacer en su mayoría será copiar y pegar. Además también he diseñado nuevos botones por si buscan variedad.
Tamaño de los botones: 100x100px
Pack1
Pack2
pack3
El tutorial:
No en todos los blogs encontramos este tipo de botón tan característico, que en mi opinión es bastante útil sobre todo si tienen varias entradas por página y de contenido extenso. Para este tutorial en concreto escogí la opción de un botón con efecto scroll, que además aparezca y desaparezca, ya que me parece la más completa.
Entonces quizás se pregunten… y cómo queda?...bueno, simplemente pueden ver el que tengo instalado en el blog, no se queda estático en la parte inferior y a medida que vamos subiendo desaparece…cumple con su función y tiene un efecto alucinante.
Los pasos:
Vamos a la plantilla y hacemos una copia de seguridad. (Esto es opcional, pero totalmente recomendado).
Una vez hecho esto, pinchamoseditar HTML
Buscamos </head> (clickeando simultáneamente ctrl + F dentro de la pantallita). Y pegamos justo arriba, el siguiente script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Nota: revisa si ya tienes este código en tu pantalla, si no es así entonces lo puedes agregar.
Luego buscamos </b:skin> (hacemos click en los puntitos , para que se nos despliegue)
Pegamos encima el código:
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 100px; /* Ancho del botón */
height: 100px; /* Alto del botón */
display: block;
background: url(aqui la dirección de la imagen) no-repeat center center;
}
*Este código sirve para dictar la posición del botón, el amaño y que en efecto nos aparezca.
Como ven este código css lo tenemos que modificar, colocando la dirección de la imagen (botón) que queremos en nuestro blog y el tamaño en px. Siempre respetando las comillas y paréntesis como es el caso.
Y por último buscamos también la etiqueta </body> y justo antes pegamos el siguiente código, que no hay que modificar:
<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>
De esta manera:
Una vez que tenemos todos los códigos correctamente, damos click a guardar plantilla y luego a ver blog.
Y listo, eso es todo! debería aparecerles al final de la página, en la esquina inferior derecha. Asi:
Hasta aquí el tutorial. Qué les pareció? harían este tutorial? Déjenme en los comentarios cualquier duda que se les presente. Suerte!
Están muy hermosos los diseños!!! xDDD
ResponderEliminarGracias :D
Eliminar