> > > > > > > > >

Tutorial: Botón Subir

19 marzo, 2015


Holaaa!
Hoy les traigo un tutorial para personalizar su blog.
Se trata de poner el botón de subir que aparece al final del blog y ayuda a que se pueda subir al principio de una manera fácil. 
Es muy sencillo el tutorial, solo deben seguir los pasos y listo.
Les dejo algunos botones que pueden utilizar
Espero les ayude este tutorial, cualquier duda no duden en dejarme un comentario.
Besos.


Este tutorial deja el botón estático, es decir va a permanecer constante en tu blog.

Arrows mini graphics Van a Diseño 
o
Les va a salir una pantalla como esta:

Arrows mini graphics Dan click en Añadir un Gadget 

Les sale un recuadro como este:

Arrows mini graphics Buscan el ítem que diga HTML/Javasript y dan click en el botón de +

Les sale este recuadro:

Arrows mini graphicsPegan el siguiente código
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="URL IMAGEN" /></a>

En titulo lo dejan en Blanco.

Donde dice URL IMAGEN ponen el link de la imagen que desean que les aparezca ahí, señalando hacia arriba o que diga arriba o up. 

Arrows mini graphics Dan click en Guardar y listo.

Con este efecto, podrás hacer que tu botón desaparezca y solo aparezca cuando bajes, es decir que es intermitente.
NOTA! Si ponen este efecto, no deben realizar el paso anterior, porque si hacen el tutorial anterior y este aparecerán los dos botones. Solo puedes hacer uno de los dos.

Arrows mini graphics Para ponerlo en tu blog entra a Plantilla y click  la Editar HTML
NOTA! Recomiendo primero hacer una copia de seguridad.

Arrows mini graphics Dan click dentro del recuadro que les aparece y dan Control + F y ponen </head> dan enter

Arrows mini graphics Antes de </head> agregan:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
NOTA! Si ya tienes ese código omite ese paso.

Arrows mini graphics Ahora en el mismo buscador ponen ]]></b:skin> y dan enter

Arrows mini graphics Antes de ]]></b:skin> agregan lo siguiente:
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(IMAGEN) no-repeat center center;
}

Arrows mini graphics En el mismo buscador ponen </body>  y dan enter

Arrows mini graphics Y antes de </body> agregan: 
<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>

Arrows mini graphics Guardan los cambios y Listo!

OJO! Donde dice IMAGEN agregan el link de la imagen que desean agregar. Pueden modificar el ancho y alto del botón para que quede mejor posicionado sen tu blog, eso lo hacen con los apartados que dicen right, width y height.
subir imagenes

1 comentario:

¡Anímate a comentar! Me encantaría saber tu opinión sobre este post.
No se permiten mensajes que falten al respeto, el spam está permitido siempre y cuando también opinen sobre la entrada, de lo contrario serán eliminados.
Si me sigues, sigo devuelta.
Siempre devuelvo los comentarios