Flechitas para subir y bajar

Bueno, como mi querida Yersey me ha preguntado cómo poner una flechita para bajar (la de subir la puso con el mismo método que las imágenes en la esquinita del blog, vease aquí), voy a responderla con este tutorial que puede serviros a muchos. Los botones de subir y bajar facilitan el acceso a info de vuestros blogs, por ello es algo a tener en cuenta a la hora de hacer uno.
Si solo queréis poner una imagen (o flecha) para subir, podéis hacerlo de la forma que explicamos antes (en el link). Si no podéis hacero de esta forma tan simple y sencilla. Hay dos formas de hacerlo (una simple y otra con efecto deslizante) así que aquí explicaré las dos y ya vosotros usáis la que más os guste.

 Forma Simple:
Primero tenemos que irnos a "Diseño" en nuestro blog, pulsamos en "Edición de HTML" (está justo al lado de "Elementos de la página", justo debajo de "Ver Blog"). Antes de hacer nada vamos a descargar nuestra plantilla del blog. Porque como vamos a meter mano en los códigos, a veces uno la caga y jode todo el blog y no queremos que eso pase. Así que le damos a "Descargar plantilla completa" y ya está. Tras descargar la plantilla buscamos entre el amasijo de letras que forman nuestro código de plantilla el comando </body>. Para que os sea más fácil, pulsar Control y F para que se os abra una barra de busquedas (abajo) y escribís  </body> , se os marcará en color la palabra que estamos buscando. Entonces, una vez encontrado el </body> tenemos que pegar este código encima de él (justo una linea por encima de </body>), pegamos los siguientes códigos:

<a href='#'><img border='0' style='position:fixed; top:0; right:0;' src="URL de la imagen" title="Ir arriba" /></a>


<a href='#footer-wrapper'><img border='0' style='position:fixed; bottom:0; right:0;' src="URL de la imagen" title="Ir abajo" /></a>

Ahora solo tenéis que sustituir lo que pone en rojo por la URL de la imagen que queráis usar (ya sea flechita u otra cosa).  El código de arriba es el que colocará una flecha que subirá y el código de abajo insertará una flecha que vaya hacia abajo. 


Forma Deslizante:
 Este efecto hará que al subir y bajar lo hagamos deslizándonos por el blog. En esta forma tendrémos que pegar varios códigos en varias partes distintas de la plantilla, pero no os asustéis, vamos a hacerlo despacio y explicando todo para que no queden dudas.


Tenemos que ir (como en el otro método) a "Diseño" en nuestro blog, pulsamos en "Edición de HTML" como hemos explicado en el caso anterior, descargamos la plantilla por lo que pudiera pasar y tras descargarla  buscamos entre el amasijo de letras (con el truco anteriormente mencionado de el Control + F) el comando </head>  . Una vez encontrado el </head> tenemos que pegar este código encima de él (justo una linea por encima de </head>), pegamos el siguiente código:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

P.D: Si por alguna casualidad ya tuviérais este código pegado, NO HARÍA FALTA VOLVER A PONERLO. Pero solo si ya se tiene, sino hay que pegarlo.

Ahora buscamos </body> y pegamos estos dos códigos (justo una linea por encima de </body>):

<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>


<a href='#footer-wrapper' onclick='new Effect.ScrollTo(&quot;footer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>

Como en la forma simple, hay que sustituir las letras en rojo por la URL de la imagen que queréis poner, e igual que la vez anterior, la primera parte corresponde a la flecha de arriba y el código inferior a la flecha de ir abajo.
  
IMPORTANTE: En cualquiera de las dos formas (simple o deslizante) si usas una plantilla nueva del Diseñador de plantillas de Blogger tendrás que sustituir unas lineas por otras, vamos paso por paso a hacerlo. Primero (con ayuda del Control+F) buscamos este código entero:
<div class='body-fauxcolumns'>

ahora la tenemos que cambiar por este otro:
<div id='outer-wrapper' class='body-fauxcolumns'>

Luego buscamos este otro código:
<div class='content-cap-bottom cap-bottom'>

y lo cambiamos por este otro:
<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>

Al cambiar esos dos códigos conseguiremos que las flechas funcionen también en esas plantillas. Luego, cuando hayamos terminado de sustituir y cambiar los códigos, en la plantilla nos vamos abajo (botón naranja) y guardamos los cambios; y ya tendríamos nuestras flechitas para subir y bajar por el blog.

1 Aullidos en mitad del bosque :

Yersey Owen dijo... Responder

¡Hola!

Gracias por el completísimo tutorial. Lo he hecho deslizante y tuve que cambiar lo del diseñador de plantillas, y las flechas funcionan, pero no se deslizan. Sólo suben y bajan. Lo he revisado dos veces y he seguido todos los pasos, así que no sé por que no va.

¡Besitos!

Publicar un comentario

Bienvenida criatura del lado oscuro. Aquí tus palabras serán escuchadas, solo hay una condición; el respeto tiene que estar presente en ellas, sino conseguirás enojar al resto de criaturas que habitamos este lugar y tus palabras serán borradas para no volver a ser oídas. Gracias y que tengas dulces pesadillas...

Related Posts Plugin for WordPress, Blogger...