Flechitas

>> Diferentes flechitas para subir arriba en la página


La presencia de esta flechita es básica cuando hay muchas entradas en el blog. En todos los casos hay que insertar la URL DE LA IMAGEN de la flechita a usar. Un modelo de ejemplo es este:

    

1) Al final de las entradas o posts
  • Ubicación: plantilla. 
  • Proceso:

Colocar debajo de alguna de estas lineas <div class='post-footer-line post-footer-line- 1'> ....  <p class='post-footer-line post-footer-line-1'/> el siguiente código e insertar la imagen de la flechita (URL):

<a href='#' style='bottom: 0px; right: 0px;' title='Subir'><img align='right' src 'URL DE LA FLECHITA'/></a><div class='body-fauxcolumns'> 


2) Flotante en la esquina inferior derecha del blog SIN efecto deslizante
  • Ubicación: gadget java.
  • Proceso:
Copiar este código en el java y sustituir URL DE LA FLECHITA por la imagen deseada: 

<a href='#'><img alt='ir arriba' border='0' src='URL DE LA FLECHITA' style='position:fixed; bottom:0; right:0;'/></a>


3) Flotante en la esquina inferior derecha del blog CON efecto deslizante o scroll
  • Ubicación: plantilla.
  • Proceso:
Pegar antes de </head> lo siguiente:

<!-- Volver arriba deslizante blcn-->
<script language='javascript' type='text/javascript'>
var bl_subirdesliz;
function bl_clicsubir() {
if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0) {
window.scrollBy(0, -40);
bl_subirdesliz = setTimeout(&#39;bl_clicsubir()&#39;, 8);
}

else clearTimeout(t);
}
</script>
<!-- Fin volver arriba deslizante blcn-->

Seguidamente, pegar antes de </body> estos códigos: 

<a href='#' onclick='bl_clicsubir();return false' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='ir arriba'><img src='URL DE LA FLECHITA'/></a>


4) Dos flotantes, arriba y abajo para subir/bajar, CON efecto deslizante
  • Ubicación: plantilla. 
  • Proceso:
Copiar antes de </head>  

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
  
Copiar antes de </body> y poner url de las flechitas:

<a  href='#outer-wrapper'  onclick='new  Effect.ScrollTo("outer-wrapper",{offset:-140}); 
return false'><img border='0' src='URL DE LA FLECHITA' style='position:fixed; top:0; right:0;' 
title='Ir arriba'/></a>
 
<a  href='#footer-wrapper'  onclick='new  Effect.ScrollTo("footer-wrapper",{offset:-140}
); return false'><img border='0' src='URL DE LA FLECHITA' style='position:fixed; bottom:0; 
right:0;' title='Ir abajo'/></a>
 
--> Buscar esta línea  <div class='body-fauxcolumns'> y poner esta en su lugar  <div id='outer-wrapper' class='body-fauxcolumns'>
Lo mismo con esta: buscar <div class='content-cap-bottom cap-bottom'> y poner esta en  su lugar <div id='footer-wrapper' class='content-cap-bottom cap-bottom'>
 
Si no se hacen estos cambios de líneas, el efecto deslizante no funcionará.
 

Etiquetado como: ,