Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada

Ya vimos la primera forma.

Este efecto funciona con la librería Jquery.

Si ya la tienen no es necesario ponerla.

Si no la tienen poner el siguiente código arriba de </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>

Ahora agregamos el siguiente código abajo del anterior (quedará arriba de </head>)

<script type="text/javascript">
//<![CDATA[
// http://loseasi.blogspot.com
// Vku
(function(jQuery){var m=jQuery.scrollTo=function(b,h,f){jQuery(window).scrollTo(b,h,f)};m.defaults={axis:'xy',duration:parseFloat(jQuery.fn.jquery)>=1.3?0:1};m.window=function(b){return jQuery(window).scrollable()};jQuery.fn.scrollable=function(){return this.map(function(){var b=this,h=!b.nodeName||jQuery.inArray(b.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!h)return b;var f=(b.contentWindow||b).document||b.ownerDocument||b;return jQuery.browser.safari||f.compatMode=='BackCompat'?f.body:f.documentElement})};jQuery.fn.scrollTo=function(l,j,a){if(typeof j=='object'){a=j;j=0}if(typeof a=='function')a={onAfter:a};if(l=='max')l=9e9;a=jQuery.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&&a.axis.length>1;if(a.queue)j/=2;a.offset=n(a.offset);a.over=n(a.over);return this.scrollable().each(function(){var k=this,o=jQuery(k),d=l,p,g={},q=o.is('html,body');switch(typeof d){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px)?jQuery/.test(d)){d=n(d);break}d=jQuery(d,this);case'object':if(d.is||d.style)p=(d=jQuery(d)).offset()}jQuery.each(a.axis.split(''),function(b,h){var f=h=='x'?'Left':'Top',i=f.toLowerCase(),c='scroll'+f,r=k[c],s=h=='x'?'Width':'Height';if(p){g[c]=p[i]+(q?0:r-o.offset()[i]);if(a.margin){g[c]-=parseInt(d.css('margin'+f))||0;g[c]-=parseInt(d.css('border'+f+'Width'))||0}g[c]+=a.offset[i]||0;if(a.over[i])g[c]+=d[s.toLowerCase()]()*a.over[i]}else g[c]=d[i];if(/^\d+jQuery/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],u(s));if(!b&&a.queue){if(r!=g[c])t(a.onAfterFirst);delete g[c]}});t(a.onAfter);function t(b){o.animate(g,j,a.easing,b&&function(){b.call(this,l,a)})};function u(b){var h='scroll'+b;if(!q)return k[h];var f='client'+b,i=k.ownerDocument.documentElement,c=k.ownerDocument.body;return Math.max(i[h],c[h])-Math.min(i[f],c[f])}}).end()};function n(b){return typeof b=='object'?b:{top:b,left:b}}})(jQuery);
//]]>
</script>

Ahora hay que poner las imágenes de Ir arriba, centro y abajo.

Poner el siguiente código abajo de <body>

<!-- ir arriba,centro y abajo -->
<a id='irarriba'></a>
<a href="javascript:jQuery.scrollTo('#irarriba',3000);"><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="javascript:jQuery.scrollTo('#ID-CENTRO',3000);"><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="javascript:jQuery.scrollTo('#irabajo',3000);"><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 -->


Ahora vamos a personalizar el código.

1- Cambiamos las imágenes. (color azul)

2- Según las imágenes ajustamos el estilo. (color naranjo)

3- La velocidad del desplazamiento. (color negro)

    3.1- Mayor número menor velocidad.

4- Cambiamos las ID correspondientes. (color rojo)

    4.1 - #ID-CENTRO Vemos la forma en la entrada: anterior.

                                    O podemos elegir una ID de la sidebar, ejemplo #HTML5

Para terminar colocamos la Id de ir abajo.

Poner el siguiente código bien abajo de la plantilla, arriba de </body>

<a id='irabajo'></a>

Ver Vista previa y si todo esta bien guardamos.

Podemos elegir las opción que queramos, por ejemplo: solo poner el ir arriba e ir abajo.

Jquery junto con Prototype y Scriptaculous.

Este código ya esta adaptado para utilizarlo en conjunto con Prototype y Scriptaculous.

Si no funciona agregar en el primer código, abajo de // Vku (no creo que sea necesario)

La siguiente línea:

jQuery.noConflict();

Tener en cuenta que para utilizar en conjunto Jquery y Prototype - Scriptaculous, el script de Prototype y Scriptaculous siempre tiene que estar por debajo de cualquier código de Jquery. Y si agregan la anterior línea tendran que hacer lo mismo en todos los códigos que utilizen Jquery.

Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
Obed C. dijo...

Gracias, me funciono en mi blog a que te refieres cuando dices Cambiamos las ID correspondientes. (color rojo) y #ID-CENTRO Vemos la forma en la entrada: anterior?

Gracias.

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.



Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.


Nota: solo los miembros de este blog pueden publicar comentarios.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?