17 de septiembre de 2016

Tutorial: Botón "Up/Subir" que aparece y desaparece + Feebies

Tenia mucho tiempo que no realizaba un tutorial, pero el día de hoy amanecí muy contenta y me tome un par de horas para explicarles una de las opciones que siempre le añado a todos los diseños que realizo para blogs. El botón Up, (Arriba o Subir)
   Este tutorial seguro lo han visto en otras partes, pero el mío será muy especial... ya que les explicare como hacer para que el botón solo aparezca cuando comiencen a "bajar", o sea no es una imagen/botón completamente estático. 
Pueden tomar como ejemplo (vista previa) mi blog

Para agregarlo ve a :
  • Edición HTML y ANTES de </head> agrega:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

  •  Ahora dirígete a </body> y ARRIBA agrega el script:
<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>

  •  Y por último antes de ]]></b:skin> agrega el estilo:
/* Botón UP
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 10px; /* Distancia de abajo */
right: 10px; /* Distancia de la derecha */
}
#IrArriba span {
width: 112px; /* Ancho del botón */
height: 108px; /* Alto del botón */
display: block;
background: url(https://1.bp.blogspot.com/-d0XngQsXkjk/Vowx_0c46ZI/AAAAAAAAK-w/gwuvqPPgMpYe_4TgwZzdWPGrhII2vnDMwCPcB/s1600/up5.png) no-repeat center center;
}
Gracias a ciudadblogger.com por aclararme algunas cositas.

Guarda los cambios y listo. Ya tendrán su nuevo y divertido botón. 
  1. Pueden cambiar la url (https://1.bp.blogspot.com/-d0XngQsXkjk/Vowx_0c46ZI/AAAAAAAAK-w/gwuvqPPgMpYe_4TgwZzdWPGrhII2vnDMwCPcB/s1600/up5.png) por la URL de la imagen que deseen. El alto y el ancho deben de ser los proporcionados en la imagen. Por lo que si agregan una imagen con un ancho de 250px pero en los estilo aparece con un ancho de 150px la imagen por completo. 
Pase gran de la tarde haciendo algunos feebies para ustedes. Pueden copiar el URL y agregarlos a los estilos o la pueden guardar en su PC y subirla a su almacenamiento de preferencia. Si los desean a todos, para guardarlos da click a "Descarga" y así se dirigirán a mi post en DeviantArt para descargarlos con más facilidad.

Feebies

School

Diamond

TrianUP

Trian

Semicircle

Mancha

Circles on circles




Espero les gusten y los disfruten.  Recuerden: Si tienen algún tutorial en especial que quieren que les explique dejen un comentario.
Hasta la próxima. 

No hay comentarios:

Publicar un comentario