Se trata de poner unas imágenes en la parte de abajo sobre la derecha de nuestro blog, para darle la posibilidad a nuestros visitantes que se desplacen mas facilmente por nuestro blog.
El siguiente código lo pegamos abajo de <body>:
<!-- ir arriba,centro y abajo -->
<a href='#outer-wrapper'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsiZ1pHHT-Sm4mhSqUTRvBMSupFxlTl-OPX-dnR_KT5Rwm62UZHR362zCfV10L9Ostq4a18TOzxS6ktxzM5hiQnIyBCsJL6c8lG8bZNFw3I44ejraR_vd2lqeKbk6uOgnxcvmbVEN7dr_/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/></a>
<a href='#centro'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgYpHWovHXLx0zyUGyTrzyMMjKw07OY_dBASwQNtCaa-bWyUZtkoTeio_zPnwhxG4qaeYwX7TqAyNFbous5uhEZiMuFgg6ZcXydK3BfJo2yJWv1AnkJEFqAbypnTmZF0vRb1i2iy1pPaH/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/></a>
<a href='#footer-wrapper'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlwbks02fxrhP7dh1xse_BmkmjqEqBr0z7Wr9iNqSBCN0ggc0RpFQ3OHwiYObGNZt9TQw0JyW87OB9bqPJM9Q6G49LPcexgleoO6I1E0Z-qdXPxydRmCWA3K8w8SD4-b3mU_Am4XOAwnkx/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>
<!-- fin ir arriba,centro y abajo -->
Luego pegamos el siguiente código dentro de <body> y </body>, yo lo coloque en medio de la sidebar.
<a id='centro'/>
Ejemplo en mi plantilla (hacer la prueba):
<b:widget id='HTML14' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<a id='centro'/><b:widget id='HTML9' locked='false' title='Ultimos Comentarios...' type='HTML'>
<b:includable id='main'>
Ahora modificar a gusto el código cambiando las imágenes y si es necesario la posición.
Guardar cambios.
Ya tenemos nuestras imágenes o flechas en el blog.
Ahora si queremos darle un efecto de suavidad al deslizar, se puede hacer con Jquery o Scriptaculous.
Efecto con Jquery: (Ver ejemplo acá:)
Tenemos que pegar 2 códigos justo arriba de </head>.
Código 1: (OJO si ya lo tienen en la plantilla no es necesario repetirlo.)
<!-- jquery-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<!-- fin jquery-->
Código 2:
<!-- ir arriba,centro y abajo -->
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
jQuery('a[href*=#]').click(function() {
var name = jQuery(this).attr('href');
var no = new Array ('#mas', '#mas');
var total = no.length;
var desplazamiento = 2500;
for (i=0;i<=total;i++) {
if(no[i] == name){
return false;
}
}
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length && target
|| jQuery('[href=' + this.hash.slice(1) +']');
if (target.length) {
var targetOffset = target.offset().top;
jQuery('html,body')
.animate({scrollTop: targetOffset}, desplazamiento);
return false;
}}
});
});
//]]>
</script>
<!-- fin ir arriba,centro y abajo -->
Guardar cambios.
Efecto con Scriptaculous: (Ver ejemplo en mi blog)
Tenemos que pegar el siguiente código justo arriba de </head>.
Código: (OJO si ya lo tienen en la plantilla no es necesario repetirlo.)
<!-- 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>
<!-- fin prototype y scriptaculous-->
Ahora modificaremos un poco el primer código que colocaron arriba de <body>.
Hay que agregar unas lineas al código.
El código seria así:
<!-- ir arriba,centro y abajo -->
<a href='#outer-wrapper'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsiZ1pHHT-Sm4mhSqUTRvBMSupFxlTl-OPX-dnR_KT5Rwm62UZHR362zCfV10L9Ostq4a18TOzxS6ktxzM5hiQnIyBCsJL6c8lG8bZNFw3I44ejraR_vd2lqeKbk6uOgnxcvmbVEN7dr_/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/></a>
<a href='#centro'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgYpHWovHXLx0zyUGyTrzyMMjKw07OY_dBASwQNtCaa-bWyUZtkoTeio_zPnwhxG4qaeYwX7TqAyNFbous5uhEZiMuFgg6ZcXydK3BfJo2yJWv1AnkJEFqAbypnTmZF0vRb1i2iy1pPaH/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/></a>
<a href='#footer-wrapper'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlwbks02fxrhP7dh1xse_BmkmjqEqBr0z7Wr9iNqSBCN0ggc0RpFQ3OHwiYObGNZt9TQw0JyW87OB9bqPJM9Q6G49LPcexgleoO6I1E0Z-qdXPxydRmCWA3K8w8SD4-b3mU_Am4XOAwnkx/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>
<!-- fin ir arriba,centro y abajo -->
Ahora le agregamos la siguiente linea para darle el efecto:
onclick='new Effect.ScrollTo("outer-wrapper",{offset:-150}); return false'
outer-wrapper se cambia en cada link por la id asignada:
- "outer-wrapper"
- "centro";
- "footer-wrapper"
<!-- ir arriba,centro y abajo -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-150}); return false'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsiZ1pHHT-Sm4mhSqUTRvBMSupFxlTl-OPX-dnR_KT5Rwm62UZHR362zCfV10L9Ostq4a18TOzxS6ktxzM5hiQnIyBCsJL6c8lG8bZNFw3I44ejraR_vd2lqeKbk6uOgnxcvmbVEN7dr_/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/></a>
<a href='#centro' onclick='new Effect.ScrollTo("centro",{offset:-150}); return false'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgYpHWovHXLx0zyUGyTrzyMMjKw07OY_dBASwQNtCaa-bWyUZtkoTeio_zPnwhxG4qaeYwX7TqAyNFbous5uhEZiMuFgg6ZcXydK3BfJo2yJWv1AnkJEFqAbypnTmZF0vRb1i2iy1pPaH/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/></a>
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-150}); return false'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlwbks02fxrhP7dh1xse_BmkmjqEqBr0z7Wr9iNqSBCN0ggc0RpFQ3OHwiYObGNZt9TQw0JyW87OB9bqPJM9Q6G49LPcexgleoO6I1E0Z-qdXPxydRmCWA3K8w8SD4-b3mU_Am4XOAwnkx/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>
<!-- fin ir arriba,centro y abajo -->
Guardar cambios.
Consejo: No utilizar Jquery y Scriptaculous juntos, para evitar conflictos.
Good post and this enter helped me alot in my college assignement. Gratefulness you as your information.
ResponderEliminarOk a pleasure.
ResponderEliminarVku.
Otra vez yo, no diras que no visito tu blog, te voy a mandar parte de mi sueldo a casa jajja
ResponderEliminarmira yo en mi blog tengo una flechita para ir arriba pero quisiera poner otra de abajo como tu la tienes, en el margen inferior derecho, al lado o encima de la que tengo..¿como tendria que hacerlo?
siento las molestias y te doy las gracias de antemano
<a title="Subir" href="#header" style="position: fixed; bottom: 40px; right: 10px;"><img src="http://1.bp.blogspot.com/_gjBqKNTws4M/S7Hf1spvR2I/AAAAAAAACM4/c0sZ0u_KYlw/s320/blsubir.png" /></a>
ResponderEliminar<a title="Bajar" href="#abajo" style="position: fixed; bottom: 0px; right: 10px;"><img src="IMAGEN ABAJO" /></a>
@ Vku:
ResponderEliminarYa lo puse, muchas gracias por tu inestimable ayuda
un beso vku
@ Vku:
ResponderEliminarHolaaaa vku, como te dije, lo puse en mi blog gracias a tu ayuda pero no tienen las flechitas el efecto deslizante¿se podria poner?
Muchas gracias por tu ayuda
besos
Tu tienes jquery, agrega solo el código 2 arriba de </head>
ResponderEliminar@ Vku:
ResponderEliminarLo acabo de hacer pero se atranca mucho
@ Vku:
ResponderEliminarMuchas gracias
ah, puse un botoncito tuyo en mi blog para que te enlacen
No es necesario, pero igual gracias.
ResponderEliminarYo lo veo bien el desplazamiento.
Puedes ajustar la velocidad donde dice: var desplazamiento = 2500;
Y agregale a las 2 flechas z-index así:
right: 10px;z-index:1000"
@ Vku:
ResponderEliminar¿en el script de las flechas, en que lugar del codigo?
en el comentario 4 despues de right: 10px; antes de "
ResponderEliminarasi: flecha subir
style="position: fixed; bottom: 40px; right: 10px;z-index:1000"
y en flecha bajar
style="position: fixed; bottom: 0px; right: 10px;z-index:1000"
@ Vku:
ResponderEliminarMuchas gracias, ya lo he puesto, espero que me funcione jaja
un beso
Hola, que tal!!!
ResponderEliminarVengo recomendado por Potro, de ciudadblogger.com :D
Intente colocar las flechas a mi pagina www.angelcanibal.com pero no hay caso :10) no se sera por la nueva plantilla o porque hay algo que no este bien puesto...
HELP!!! :(
FIX Empecemos.
ResponderEliminar1- Tienes repetido el código jquery, elimina el 1.2.6 y deja el 1.4.2
2- El código javascript que pusistes para ir ariba, centro y abajo
<!-- ir arriba,centro y abajo -->
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
jQuery('a[href*=#]').click(function() {
........................
Cambialo de lugar.
Dejalo arriba de </head>
3- en los link de las flechas cambia
#head por #header-inner
#footer por #HTML10
4- Coloca el link del centro como dice arriba
<a id='centro'/>
Me avisas cuando esté.
En lo personal prefiero este otro:
ResponderEliminarhttp://loseasi.blogspot.com/2011/03/ir-arriba-centro-y-abajo-con-jquery.html
Hola Vku ! mira tengo un problema con este codigo (me interesa el Scriptaculous) , en relidad soy novato en modificar codigos aunque ya he logrado poner anteriormente varios, pero creo que con este si estoy reprobando ! jajaja estos son mis dos conflictos por si tienes un poco de tiempo y quisieras ayudarme!
ResponderEliminara).- en Edición de HTML en el caso de </head> si visualizo ambas, osea tambien esta otra <head> (con y sin diagonal). El problema es con esta donde dice </body> con esa diagonal no la tengo, solamente tengo esto <body>. entonces no se donde colocar este codigo <a id='centro'/> dentro de <body> y </body> .
b).-En la parte superior del post nos dices que peguemos este PRIMER codigo asi:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
El siguiente código lo pegamos -ABAJO- de <body>:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!-- ir arriba,centro y abajo -->
<a href='#outer-wrapper'><img border='0' src='http://4.bp.blogspot.com/_lMNoba63Ric/S5jjwKKwRWI/AAAAAAAAAC8/x2HAn0h-r5Q/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/></a>
<a href='#centro'><img border='0' src='http://1.bp.blogspot.com/_lMNoba63Ric/S5jjwHlUs7I/AAAAAAAAADA/qXb9rmM6J_A/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/></a>
<a href='#footer-wrapper'><img border='0' src='http://1.bp.blogspot.com/_lMNoba63Ric/S5jjv3svZlI/AAAAAAAAAC4/fKqXmhDmQlk/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>
<!-- fin ir arriba,centro y abajo -->
-PERO DESPUES NOS DICES ESTO:
Ahora modificaremos un poco el PRIMER código que colocaron ARRIBA de <body>.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Entonces esa es mi duda, si es arriba o abajo de <body> este primer codigo.
Pero mi principal problema es con el inciso a), aqui si estoy reprobado.
Gracias por tu tiempo..!!!
Perdon !! parece que no supe publicar bien el codigo de ejemplo. deveras que se echa de ver que soy novato con los codigos !!! jajaja
ResponderEliminarHola Leonardh.
ResponderEliminarPrimero lee esto:
http://loseasi.blogspot.com/2011/04/modificar-el-diseno-del-blog-algo-para.html
</body> esta bien abajo.
Pero lo que quise decir es que este dentro de la plantilla, fíjate el ejemplo que tiene una id HTML14, vos podes ponerlo pero busca en tu plantilla id='Image5'
B- ponerlo abajo de <body> y lo que hay que modificar es el código css.
O sea: cambiar las imágenes (en rojo) y la distancia (en azul)
bottom es abajo
right es derecha
Si tienes mas dudas me lo dices. Suerte.
Vku.
Hola Vku, mira ya funcionan las flechas bien, van arriba y abajo bien.
ResponderEliminar- Ahora quiero agregar el efecto Scriptaculous entonces agrego el Primer Codigo de dicho efecto (que va arriba de < /head >) hasta aqui va bien.
Y en seguida esto fue lo que hice para no modificar manualmente el codigo que mencionas (osea el que esta hasta arriba del post y que esta colocado ABAJO de < body > en la plantilla en HTML), simplemente borre ese codigo y pegue alli el que tu ya tienes modificado.
Es correcto lo que hice? porque no se desliza? jajaja (lo curioso es que se guardo la plantilla correctamente osea no marco error, pero pues no se desliza) tengo que darle click para que se balla hacia arriba o abajo.
Seguire leyendo los manuales tambien, pero si tu pudieras detectar que hice mal???
El efecto es ese. Al hacer clic sobre las flechas se desliza.
ResponderEliminarPor lo que vi en tu blog funciona bien, menos la del centro.
¿O tu lo que quieres es hacer el efecto que utilizo yo?
En ese caso es agregando otro código javascript.
Yo utilizo dos efectos juntos.
aa! pues con razon jajaja utilizas dos! y yo me rompia la cabeza tratando de lograr que se deslizara como el tuyo, osea sin dar el click, bueno estaria de lujo si me muestras como se hace el efecto del tuyo.!! gracias ! y estare bien pendiente cuando me muestres como lograrlo.!
ResponderEliminarPorcierto es estupenda la manera en la que te enlazan a otros blogs, muy rapido el proceso!, si te alcanza el tiempo me podrias mostrar tambien esos codigos? yo lo unico que tengo de momento es el Banner de mi Blog hecho.
ResponderEliminarYo utilizo junto con este código:
ResponderEliminarhttp://loseasi.blogspot.com/2009/10/subir-y-bajar-desplazandose-despacio.html
Y los link serían así:
Le agrego lo siguiente:
Para arriba: onmouseout='stopScroll()' onmouseover='subir()'
Para abajo: onmouseout='stopScroll()' onmouseover='abajo()'
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-150}); return false' onmouseout='stopScroll()' onmouseover='subir()'><img border='0' src='http://4.bp.blogspot.com/_lMNoba63Ric/S5jjwKKwRWI/AAAAAAAAAC8/x2HAn0h-r5Q/s1600/arriba.png' style='position:fixed; bottom:75px; right:10px;' title='Ir arriba'/></a>
<a href='#centro' onclick='new Effect.ScrollTo("centro",{offset:-150}); return false'><img border='0' src='http://1.bp.blogspot.com/_lMNoba63Ric/S5jjwHlUs7I/AAAAAAAAADA/qXb9rmM6J_A/s1600/centro.png' style='position:fixed; bottom:45px; right:10px;' title='Ir centro'/></a>
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-150}); return false' onmouseout='stopScroll()' onmouseover='abajo()'><img border='0' src='http://1.bp.blogspot.com/_lMNoba63Ric/S5jjv3svZlI/AAAAAAAAAC4/fKqXmhDmQlk/s1600/abajo.png' style='position:fixed; bottom:10px; right:10px;' title='Ir abajo'/></a>
GRACIAS.!!! Vku- ahora si me resulto muy facil.!quedan estupendos los dos juntos, -no agregue el Boton de Enmedio pues realmente no es tan necesario.
ResponderEliminarHola de nuevo Vku. ya se que esto es antiguo y lo tengo puesto hace muchísimo en los blogs pero me he dado cuenta que en este http://elclubdemisamores-meri.blogspot.com/ al darle para ir al centro se abre una pagina en blanco. Por más vueltas que le doy no se como solucionarlo ¿me ayudas?
ResponderEliminarSaludos
Es que tienes este código:
ResponderEliminar<base target='_blank'/>
Que hace que los link habran en una nueva pestaña.
Lo que es raro que no afecte el ir arriba y abajo.
Gracias Vku. Siempre han funcionado los tres con ese código pero ahora..... ¡cosas raras!
ResponderEliminarNo pasa nada
Graciassss
Saludos
Prueba agregar target="_self" a href='#centro'
ResponderEliminar<a href='#centro' target="_self"
Gracias Vku. voy a probar
ResponderEliminarSaludos
Pues solucionado, simplemente era que no estaba en el sitio correcto esto a i d ='centro'/ lo he bajado para abajo y listo jeje
ResponderEliminarPerdona que te haya molestado
Saludos
PD: te lo he puesto asi porque no lo admite