Espera unos segundos se esta Cargando...

Flecha subir en el blog con efecto hover

7 de marzo de 2016

Tenemos que añadir un Gadget HTML/JavaScrip

dentro de el pegamos el siguiente código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
   padding: 20px;
}
.back-to-top {
   position: fixed;
   bottom: 35px;
   right: 10px;
   text-decoration: none;
   width: 10px;
   height: 20px;
   background-color: #a991af ; /*color de fondo*/
   background-image: url("https://lh3.googleusercontent.com/-FfH9Oo6SJWk/Vt14Uxf07TI/AAAAAAAAFAc/oDPGBWzY2d4/w140-h140-p/up.png");
   background-repeat: no-repeat;
   background-position: 50% 50%;
   border-radius: 2px 2px 2px 2px;
   font-size: 12px;
   padding: 1em;
   display: none;
}
.back-to-top:hover {
   background-color:#ebb499;/*color de fondo al  presionar*/
   text-decoration: none;
}
</style>
<a href="#" class="back-to-top" title="Scroll to Top" /></a>

Así tendremos una flecha subir en el blog de blogger con efecto hover.

Para personalizar el color cambiar los códigos de  background-color

-1 comentario-

  1. ¿Es posible hacer lo mismo insertando una imagen propia dentro de la plantilla y no como widget? Gracias de antemano. Un saludo.

    ResponderEliminar

Cosas para el Blog © Creative Commons 2014 | Plantilla Cosas para el Blog

creada por CPB | Con la tecnología de Blogger