Vamos ao Tutorial:
OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final.
1º- Clique em Editar HTML e expandir modelos de widgets.
2º- procure por </head> e antes cole o seguinte código.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
3º- Agora antes da tag ]]></b:skin> cole o seguinte código.
/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYHYKKoa4N37C73FQEI22aHSn5vRf6Hyz5xua6Nzly9s4ckAEWtDAHeFeJsIoEx2Azf2AfyfwB7QmS9LykReRgLLUD7JHby3bcQ5lC4BvA1tUHeWg1Qkh-WtihYLoy0pa5O8VhUxGvN50/s60/flecha-arriba.png) no-repeat center center;
}
4º E por ultimo procure por </body> e cole antes o código antes.
<div id='IrArriba'>Se deseja mudar a imagem basta substituir a URL da imagem destacado em azul no terceiro passo pela URL que deseja.
<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>
Salve e pronto.
Tem algum DEMO pra que eu possa ver como fica no blog ?
ResponderExcluir