Botón Ir Arriba para Blogger

Paseando por el Blog de Pizcos (una eminencia en Blogger) me encontré esta maravilla, con este truco tendrás un botón fijo, justo en la esquina inferior derecha (o donde gustes ponerlo) cuya finalidad es llevar al lector al "top" de la pagina, todo esto, con un elegante efecto deslizante y por si fuera poco, además, desaparece al llegar al top.

Nota: Oloman (otra eminencia en Blogger) me ayudo a identificar que este último efecto (desaparecer) no funciona con algunas librerías, por ejemplo "Scriptaculous" así que si notas que no se aplica el último efecto, es probablemente por esta razón.

Explico como se hace y para que no se me pierdan lo haremos de la siguiente manera:

1. Creamos Copia de seguridad (mandamiento Blogger).
   
2. Colocamos el script (es el que hace posible los efectos).
3. Colocamos el botón.
4. Y le damos forma, color y sabor para que quede lindo ^^
   

Paso 1. Respaldo

Guarda una copia de tu plantilla por si las moscas ¬¬ (o sea, por si la cagamos).

Paso 2. Script

Entramos a Diseño==>Edicion de HTML y buscamos (Ctrl +F) lo siguiete:

</head>

Y justo antes pegamos lo siguiente (es posible que ya lo tengas, si es el caso, brinca este paso):

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

Inmediatamente después de esto, pegamos lo siguiente:

<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 &quot;Scroll to Top&quot; 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(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});
</script>
<script type='text/javascript'>
$(function() {
$(&quot;#toTop&quot;).scrollToTop();
});
</script>

(puedes dar clic en "vista previa" para verificar que vamos bien, en caso de que no te permita guardar, borra y repite los pasos).

Paso 3. Elemento

Ahora vamos a colocar el botón "ir Arriba", para ello buscamos lo siguiente:

</body>

Y justo antes, pegamos lo siguiente:

<a href='#' id='toTop'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmoCVMD-eVMTbzr14uQypLwTE5PJMIK_wYiYn173luEeuWV-FH2a34Ssd3H0J2IleC_ceJdH4ZJnIVM4tZH4PQTcsc9ba7oZ1AK800aO519HPsi3FY5Z6dp0DYCXr3Dgp2icetF41U9w/s400/24.png'/></a>

Damos clic en "vista previa" para verificar que vamos por buen camino.

Paso 4. CSS

Vamos a darle estilo con un poco de CSS (o sea, a darle su maquillada) para ello buscamos:

]]></b:skin>

Y justo antes colocamos lo siguiente:

#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--*/
}

Damos clic en vista previa para verificar y si lo hicimos correctamente, tendremos el botón "Ir Arriba" fijo, ubicado exactamente en la esquina inferior derecha, que se deslizara elegantemente para llevarnos al "top" y que desaparecerá una vez cumplida su misión, por cierto, también le agregamos un poco de transparencia al botón para darle mas "Style"

CONFIGURACION AVANZADA

El truco básico termina aquí, ahora bien, si quieres personalizarlo aun más, vaya, ponerlo en algún otro lado, subir o bajar la transparencia o incluso, ponerle otra imagen, entonces esto es lo que tienes que hacer:

localizamos el código que agregamos:

#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--*/
}

Y si lo queremos, es cambiar de ubicación, por ejemplo; que aparezca del lado izquierdo, entonces cambiamos lo siguiente:

#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--*/
}

por:

#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--*/
}

Notese que cambiamos bottom:0px;right:10px; por bottom:0px;left:10px; de esta manera el botón aparecerá del lado izquierdo. Puedes colocarlo mas detalladamente indicando los pixeles que tendrá de separación, en el caso de bottom:0px; aparecerá hasta el fondo, pero si le pones bottom:10px; notaras que sube un poco, lo mismo pasa con left:10px; o right:10px;

Ahora si quieres cambiar la transparencia, entonces, en el mismo código ubica opacity:.50; donde .50; es el porcentaje, puedes cambiarlo por .30; .20; .10; .90; etc, según como tu consideres.

Y por último, para cambiar la imagen tienes que ir a:

<a href='#' id='toTop'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmoCVMD-eVMTbzr14uQypLwTE5PJMIK_wYiYn173luEeuWV-FH2a34Ssd3H0J2IleC_ceJdH4ZJnIVM4tZH4PQTcsc9ba7oZ1AK800aO519HPsi3FY5Z6dp0DYCXr3Dgp2icetF41U9w/s400/24.png'/></a>

Y en donde dice src=' notaras que esta la URL (dirección de la imagen) y esta la cambias por la que tu prefieras.

<a href='#' id='toTop'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmoCVMD-eVMTbzr14uQypLwTE5PJMIK_wYiYn173luEeuWV-FH2a34Ssd3H0J2IleC_ceJdH4ZJnIVM4tZH4PQTcsc9ba7oZ1AK800aO519HPsi3FY5Z6dp0DYCXr3Dgp2icetF41U9w/s400/24.png'/></a>

Aquí te dejo algunas opciones, para copiar la URL solo tienes que darle clic con botón derecho sobre la imagen y en el menú, seleccionar "copiar dirección de la imagen".

Si deseas descargar mas Iconos como estos, entonces vamos a Z-Graphics