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/AVvXsEiBQZ0L0HuTmlTDdYc_eqWKRSPvSt1ZvNkSWlDxKcL6J2Ifu53R2PviMq8aS-C-371ro2zQzcmBiBOaKCKdLGo_FAA2mgM9Pot4D7j9cY3qkd2CJa2U1Kj0Ia2UXv9_t4zn12_UMBBBxW4G/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/AVvXsEi7r0Ju8Cn4vU7JZ331trrD8g7PDq_sMo-MOB5gtPquWLNv1svDrHSHewuKeweQ-yd5Asl9L_PccmSSJAUgDHmC9zErmPMnq4OoLbmDuqgXVLlxlHI4wpEF1KPfZUET9ZB3CtpsJ7K2unaT/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/AVvXsEjrXvLIPRj5zElLdDV9GwO9EkHd-wS49siz0Hv6jWGFvu5EqfMzeh8jRvx0bipuIYIQl2yscVfqdBJGBeOMcKwlsRCANMNt3Qa5FPsIB2ah8clvsdzQII2agtPAF3G9jFDx5cWQFWRR10wy/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/AVvXsEiBQZ0L0HuTmlTDdYc_eqWKRSPvSt1ZvNkSWlDxKcL6J2Ifu53R2PviMq8aS-C-371ro2zQzcmBiBOaKCKdLGo_FAA2mgM9Pot4D7j9cY3qkd2CJa2U1Kj0Ia2UXv9_t4zn12_UMBBBxW4G/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/AVvXsEi7r0Ju8Cn4vU7JZ331trrD8g7PDq_sMo-MOB5gtPquWLNv1svDrHSHewuKeweQ-yd5Asl9L_PccmSSJAUgDHmC9zErmPMnq4OoLbmDuqgXVLlxlHI4wpEF1KPfZUET9ZB3CtpsJ7K2unaT/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/AVvXsEjrXvLIPRj5zElLdDV9GwO9EkHd-wS49siz0Hv6jWGFvu5EqfMzeh8jRvx0bipuIYIQl2yscVfqdBJGBeOMcKwlsRCANMNt3Qa5FPsIB2ah8clvsdzQII2agtPAF3G9jFDx5cWQFWRR10wy/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/AVvXsEiBQZ0L0HuTmlTDdYc_eqWKRSPvSt1ZvNkSWlDxKcL6J2Ifu53R2PviMq8aS-C-371ro2zQzcmBiBOaKCKdLGo_FAA2mgM9Pot4D7j9cY3qkd2CJa2U1Kj0Ia2UXv9_t4zn12_UMBBBxW4G/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/AVvXsEi7r0Ju8Cn4vU7JZ331trrD8g7PDq_sMo-MOB5gtPquWLNv1svDrHSHewuKeweQ-yd5Asl9L_PccmSSJAUgDHmC9zErmPMnq4OoLbmDuqgXVLlxlHI4wpEF1KPfZUET9ZB3CtpsJ7K2unaT/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/AVvXsEjrXvLIPRj5zElLdDV9GwO9EkHd-wS49siz0Hv6jWGFvu5EqfMzeh8jRvx0bipuIYIQl2yscVfqdBJGBeOMcKwlsRCANMNt3Qa5FPsIB2ah8clvsdzQII2agtPAF3G9jFDx5cWQFWRR10wy/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.
0 comments:
Post a Comment