Blog de Pruebas: Botón "Ir Arriba" Para Blogger

Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. A picture of the World

Latest Posts

Botón "Ir Arriba" Para Blogger

Filled under : Blogs , Feature , Trucos 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:

Creamos Copia de seguridad (mandamiento Blogger).
Colocamos el script (es el que hace posible los efectos).
Colocamos el botón.
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/AVvXsEjzok6kHF-hi5nfyfOjI6lCuQD04lq0eenBkG3-cl5rtwJ4TvDuIR0uO2c04xCz6raniKYSILkmK2g6W9MZ3ARUzhI949M5-IvX0VxV966tr4Y5Xug5Pcvq5lmUJU2WWm3d2MQ8EcX3tQ/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/AVvXsEjzok6kHF-hi5nfyfOjI6lCuQD04lq0eenBkG3-cl5rtwJ4TvDuIR0uO2c04xCz6raniKYSILkmK2g6W9MZ3ARUzhI949M5-IvX0VxV966tr4Y5Xug5Pcvq5lmUJU2WWm3d2MQ8EcX3tQ/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/AVvXsEjzok6kHF-hi5nfyfOjI6lCuQD04lq0eenBkG3-cl5rtwJ4TvDuIR0uO2c04xCz6raniKYSILkmK2g6W9MZ3ARUzhI949M5-IvX0VxV966tr4Y5Xug5Pcvq5lmUJU2WWm3d2MQ8EcX3tQ/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

Te gustó? Twittealo!

Entrada realizada por:Isaias Arredondo

Tags: Blogs , Feature , Trucos Blogger

comments powered by Disqus.

Reciente
Commentarios

Ilxus
Gracias por el consejo. Siempre es útil tener el manejo de todas estas cosillas que pueden darle algo de identidad a tus publicaciones. En un sitio propio con

Paso a Paso, Trucos y Secretos para Tumblr - Post 2 de 4 · 9 years ago
Liviano
En 1953, más de cincuenta años antes de la restauración y publicación de la traducción del "Evangelio de Judas" (contenido en el "Codex Tchacos"), Ediciones Sol, en México, publicaría la obra "El...

http://adiccionblogger.blogspot.com/2009/04/mi-opinion-sobre-judas-iscariote.html · 9 years ago
ESPIRXL
Cuando me pongo a buscar imágenes, pongo "tumblr.com/tagged/anime" y podía ver todas las imágenes en fila y luego podía cambiar a la página dos y seguir viendo más imágenes, pero ahora no cambia de...

Paso a Paso, Trucos y Secretos para Tumblr - Post 2 de 4 · 9 years ago
Breitner
Hola soy nuevo en el tema de la personalización de los blog, puedes ayudarme?.. como se modifica la cantidad de entradas desde html

http://adiccionblogger.blogspot.com/2009/07/truco-leer-mas-o-readmore-en-blogger.html · 9 years ago
yisell
perdon me perdi ... como puedo hacer para que un post se pueda responder por otros usuarios?

Paso a Paso, Trucos y Secretos para Tumblr - Post 2 de 4 · 10 years ago