Botón Ir Arriba con Estilo añadiendo CSS para Blogger

Navegando en internet me encuentro con el famoso truco del "botón ir arriba" en Adicciónblogger lo particular de este truco es que tiene un efecto deslizante muy bonito y el botón desaparece al llegar al top de la página, este botón va al lado derecho, pero lo puedes poner al lado izquierdo si es que tu quieres.

Según Isaías el efecto del botón que desaparece no funciona con algunas librerías como por ejemplo: Scriptaculous, así que si este último no funciona en tu blog ya sabes cual es la razón. Vale empecemos con el truquillo, pero antes lo puedes ver en mi blog de pruebas.

Primero ve a Diseño > Edición de HTML con la ayuda de (Ctrl + F) buscamos </head> Justo antes pegamos el siguiente código (puede ser que ya lo tengas en tu plantilla, si es así salta este paso):

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

Justo después del anterior código que acabamos de colocar, ponemos este otro:

<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
</script>
<script type='text/javascript'>
$(function() {
$("#toTop").scrollToTop();
});
</script>

Es hora de colocar el botón Ir Arriba para ello busca </body> justo antes pega el siguiente código:

<a href='#' id='toTop'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVgb4j9NsnU6pFmOd8zCm9XVTLPQ_Y0Eln_iuvW6eWU7z0sXJE59fwRKk3MKF7a1KToinQWabBOn8DOAhj3rVnDBULk3vo_Z0UW2ACEiP8FypirWFQ06DU9ThxqrDEyEGmuc4dprkufk/s400/23.png'/></a>

Ahora le daremos estilo con CSS, busca ]]></b:skin> Justo antes coloca el siguiente fragmento de código:

#toTop {
text-align:center;
padding:0px;
position:fixed;
bottom:0px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
filter:alpha(opacity=40);
opacity:.50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*--IE 8 Transparency--*/
}

COMFIGURACIÓN AVANZADA: veremos como cambiar la imagen, ponerlo a la izquierda, y ajustar la transparencia del botón.

Para cambiar la imagen por la tuya cambia lo que está en rojo.
Para ponerlo al lado izquierdo cambia lo que está en azul por esto:

#toTop {
text-align:center;
padding:0px;
position:fixed;
bottom:0px;left:10px;
cursor:pointer;
color:#666;
text-decoration:none;
filter:alpha(opacity=40);

opacity:.50;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*--IE 8 Transparency--*/
}

Si te fijas cambiamos bottom:0px;right:10px; por bottom:0px;left:10px; para que aparesca al lado izquierdo. Además, podemos indicar los pixeles que tendrá de separción el botón del borde de la plantilla en bottom:0px;left:10px;.

Para ajustar la transparencia cambia de porcentaje lo que está en verde, lo puedes ver que está 50 pero tu lo puedes ajustar a tú gusto, esto lo puedes realizar en los dos códigos tanto al de la derecha como al de la izquierda.