Después de diseñar nuestro botón o escogerlo, lo siguiente es colocarlo en nuestra plantilla para que se pueda usar en nuestro blog ese diseño tan chulo que hemos escogido.  

Resulta que existen varias opciones de acción en cuestión al botón de subir puesto que podemos instalarla en plan sencillo: que se vea todo el rato el botón y que suba instantáneamente, o podemos instalarlo de manera que aparezca y desaparezca cuando se necesita realmente. Esta última opción es la que he elegido porque me parece la más completa y adecuada.  

Además podemos elegir entre que haga efecto scroll, de pasar la página, o que suba de forma inmediata, pero he elegido la de scroll porque creo que le da un efecto más chulo.  

Así que sobre estas elecciones nos vamos a guiar. No te lío más y vamos allá.

 En primer lugar vamos a pegar en un bloc de notas de nuestro PC, o en un word o writer, el siguiente código, para personalizarlo con nuestro botón:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 100px; /* Ancho del botón */
height: 100px; /* Alto del botón */
display: block;
background: url(URL de nuestra imagen) no-repeat center center;
}

 Vamos a cambiar lo que he marcado en azul por la dirección de imagen de nuestro botón, (si no sabes cómo mira este vídeo)

Una vez que lo tengamos preparado vamos a nuestro blog:

•  Tema
• Copia de seguridad
• Editar HTML
• Buscamos en nuestra plantilla (si no sabes cómo mira este vídeo) este código:

</head>

 y justo antes pegamos este código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> 

Este código , si no has seguido este curso desde el principio, puede que ya lo tengas, y si es así no debes volver a pegarlo. Busca googleapis.com y si no te aparece entonces sí que tienes que introducirlo de la manera que anteriormente te he expuesto.    Luego buscamos este otro código:  

</b:skin>

 y justo antes de ]]></b:skin> pegamos el siguiente código de estilo CSS:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 100px; /* Ancho del botón */
height: 100px; /* Alto del botón */
display: block;
background: url(https://1.bp.blogspot.com/-SzjXddIYKpE/V1UnWXFmzXI/AAAAAAAAAEg/ZVQd42SCDGA-44M_k2AxWZPniygkuc93QCLcB/s1600/boton-subir.blog-pruebas.png) no-repeat center center;
}

 Lo siguiente es otra vez buscar en plantilla este otro código:  

</body>

 y justo antes pegamos el siguiente código:

 <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>

 Guardamos Plantilla y vemos Blog para ver los resultados.    

Vídeo tutorial instalar botón subir en Blogger

  Así de fácil y sencillo habremos conseguido nuestro botón personalizado para subir con efecto scroll y aparece/desaparece.     

¿Qué te ha parecido?¿Algún problema? Cuéntamelo en los comentarios y buscaremos una solución