Flecha subir en el blog con efecto hover

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBAHAFEoTeQmAQgxNRi7Mp-9wrlMoRQ_Fmf2f0rglvnaX7QKWp3_RjV5ILfX8ZTl7bMEuec7uxooEnNs69H4jgW5sA6uJX9rcc0KdGFaOR3Udx12Cq6uX3cahJ0Kd1mW4ihslAqIFU6EU/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