Opción de cambiar el tamaño del texto a opción del lector

El algunos sitios web podrás ver una opción que brindan al lector de escoger el tamaño de letra con la cual quiere leer el post,entrada .o sea cuentan con dos imagenes una para agrandar y la otra para achicar,bueno les explico esto se obtiene con solo colocar dos códigos uno antes de que cierre el  </head>  y el otro lo colocamos en un gadget donde lo queramos mostrar les muestro una imagen y a continuación les explico como implementarlo.

Lo primero que vamos a hacer es ir a :



Diseño >> Edición de HTML >> expandimos artilugios


Buscamos la etiqueta </head> y encima añaden el siguiente  script:

 <script src='http://img21.xooimage.com/files/a/8/9/blconfigtext-194b084.js' type='text/javascript'/>

Una ves colocado guardamos la plantilla.
A continuación vamos a utilizar un gadget html-javascript

Para eso nos dirigimos a  Diseño >> añadir gadget (elemento de página) >> html-javascript

Y pegamos el siguiente código:

<center><a href="javascript:ts('main',1)"><img src="http://dl.dropbox.com/u/25944020/a%2B.gif" title="Ampliar tamaño texto" /></a><a href="javascript:ts('main',-1)"> <img src="http://dl.dropbox.com/u/25944020/a-.gif" title="Disminuir tamaño texto" /></a href="javascript:ts('main',-1)"></center>

Lo que esta en color rojo es que solo quieres que al dar click solo se agrande el contenido de la entrada y no todo el blog si deseas que al dar click se agrande todas la letras del blog pues solo tienen que cambiar main por body

Lo que esta en color naranja es la url de las imagenes si desean las pueden modificar por otras a su gusto.
Lo que esta en color amarillo son los títulos los pueden modificar a sus gustos.

En caso que no quisieras imagenes y solo quisieras texto solo debes usar el siguiente código sustituyendo el de las imagenes :

<center><a style="margin-right: 4px;" href="javascript:ts('main',1)">Agrandar texto</a><a href="javascript:ts('main',-1)">Encoger texto</a href="javascript:ts('main',-1)"></center>

Para terminar guardamos el gadget y hemos terminado se dirigen a ver como les quedo .

Read More

Como saber quien me a eliminado de la lista de amigos en facebook

Los usuarios de Facebook que están decepcionados de que la red social no ha dado una forma de ver quién deja de ser tu amigo,si quieren pueden permanecer decepcionados con Facebook ya que todavía no la hay por parte de la red social , pero un script del navegador encuentra quien a dejado de ser tu amigo o a dejado de seguirte,NO ES UN VIRUS esta puede proporcionarles la información que buscan.por Edouard Gatouillat,
esta te informa cuando alguien ya no te sigue o deja de ser tu amigo en facebook. reportado por Mashable, el script esta disponible para la descarga completamente gratuita, es compatible con Internet Explorer, Firefox, Google Chrome, Opera y Safari. Mashable agrega que Unfriend Finder se instala automáticamente para los usuarios de Chrome, mientras que los usuarios de Firefox deben de
 instalar el complemento Greasemonkey.
 Una vez instalado,        Unfriend Finder

A continuacion les muestro unas imagenes para que vean como funciona:

El Descubridor de los que han dejado de ser tu amigo o te han eliminado de su lista de amigo es un script en tiempo real que te permite saber quien de tus amigos te quitó en facebook.
Una base de datos del lugar guarda el registro de su lista de amigo.
Los no amigos son la gente que era antes su amigo, pero ha desactivado o su cuenta o le ha quitado de su lista de amigo.
El Descubridor de los que han dejado de ser tu amigo o te han eliminado de su lista de amigo le dirá qué amigos le han quitado, quién ha desactivado sus cuentas, la gente con la que usted ha solicitado la amistad y quién ha rehusado su petición de amigo.
El Descubridor de los que han dejado de ser tu amigo o te han eliminado de su lista de amigo hace que sepas rápido,fácil mostrando un contador rojo en el menubar con la cantidad de no amigos que usted tiene. Esto también usa la notificación Facebook para alertarle en estos acontecimientos.


Sí les gusto este post,entrada recuerden compartir y comentar no cuesta nada es un modo de agradecer por el trabajo y esfuerzo que uno hace si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código o la informacion lo podrán ver muchas gracias.

Read More

Mostrar/ocultar contenido en nuestro sitio

Una forma mas de mostrar/ocultar el contenido de un gadget, de una parte de la entrada etc... Esta vez, usaremos un efecto deslizante, un efecto slide que podremos aplicar a un gadget o en alguna parte de una entrada. aparte de slide tambien esta (appear y blind) pero es mas elegante el efecto slide.

Primeramente antes de comenzar, debemos tener en cuenta que si ya tenemos el código de Prototype y Scriptaculous en la plantilla.solo es necesario incluirlo una vez, por lo que si ya lo tienes, podrás saltarte el siguiente paso.

1) Debes pegar este script antes de la etiqueta </head>

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

Una ves puesto el codigo guarda la plantilla


2) Una vez tengas el script instalado, ya podrás aplicar el efecto a cualquier parte de tu blog, ya sea en una entrada o en un gadget.

Este es el código para usar el efecto deslizante con un enlace de texto:

<div style="margin-left: 30px;"><a style="color: #999999; " href="javascript:void(0);" title="Clic para desplegar" onclick="new Effect.toggle('elemento1','slide'); return false">Mostrar el contenido</a></div>
<div id="elemento1" style="overflow: visible; text-align: justify; display: none;">
CONTENIDO OCULTO
</div>

Mostrar el contenido▼▲

Esto es un poco de texto para que veas el ejemplo aquí puedes poner lo que quieras desde imagen videos o un largo texto lo que mas guste poner

Si lo que decean es poner en lugar de un texto que diga mostrar el contenido a una imagen entonces deben poner el siguiente codigo:

<div style="margin-left: 30px;"><span ><a style="color: rgb(153, 153, 153); " href="javascript:void(0);" title="Clic para desplegar" onclick="new Effect.toggle('elemento2','slide'); return false"><center><img src="URL DE TU IMAGEN"/></center></a></span></div><div id="elemento2" style="overflow: visible; text-align: justify; display: none;">
CONTENIDO OCULTO
</div>

Den click a la imagen para ver el efecto:

Esto es un poco de texto para que veas el ejemplo aquí puedes poner lo que quieras desde imagen videos o un largo texto lo que mas guste poner

MOSTRAR EL CONTENIDO por la frase o texto que actuará como enlace para desplegar el contenido.

CONTENIDO OCULTO por cualquier cosa que desees ocultar. Puede ser un código, un bloque de texto, una tabla, una imagen un video lo que quieras

URL DE TU IMAGEN por la imagen que actuará como botón para desplegar el contenido.


Donde dice elemento1 elemento2 pueden cambiarlo por el nombre que quieran pero nunca se puede repetir para que no ocasione comflictos ejemplo cada ves que quieran poner el codigo seria asi elemnto1 elemento2 elemnto3 elemnto4 etc... si me entienden no se puede repetir el mismo nombre.


Bueno es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.

Read More

Mostrar los seguidores,fans de facebook con imagen y texto

Despues de un rato rompiendome la cabeza porque ya que la idea es Mostrar los seguidores,fans de facebook con imagen y texto me puse a jugar un poco con las herramientas para desarrolladores que ofrece Facebook y encontre la forma personalizada que muestre el número de fans de nuestra página en Facebook.
vamos a emplear el Social Graph de Facebook para generar un archivo en formato JSON (Javascript Object Notation) con la información disponible sobre nuestra página,antes de hacer esto debemos asegurarnos de haber creado ya la página para nuestro blog, sitio web, personalidad, negocio o de lo que queramos. en el sitio de Francisco pueden ver como se crea una pagina en facebook.

Una vez la hayamos creado nuestra pagina tendremos una URL similar a esta :

http://www.facebook.com/pages/tube-trucos/161206907309924
La cual podemos personalizar despues

http://www.facebook.com/tubetrucos
En  los dos casos vamos a necesitar  el ID  de la página (en nuestro caso 161206907309924) ó el username ( tubetrucos) para  llamar al Social Graph de esta manera:

  http://graph.facebook.com/tu id/

cambiamos "tu id"  por el ID de la página o su username,como les explique arriba  que son los numeros o el nombre que le hayas dado.


ejemplo: http://graph.facebook.com/161206907309924/

Con cualquier ID de los dos ejemplo ya mencionado vemos que Facebook nos arroja un archivo JSON como el siguiente: que es mi caso


{
"id": "161206907309924",
"name": "tube trucos",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-ash2/373096
_161206907309924_1379826980_s.jpg",
"link": "http://www.facebook.com/pages/tube-trucos/161206907309924",
"likes": 1,
"category": "Entertainment",
"website": "tubetrucos.com",
"description": "trucos blogger,web,tube trucos,html,css,
javascript,redes sociales,Slideshows,google,iconos,tecnologia,
twitter,facebook,etiquetas,codificador,widget y mucho mas.",
"can_post": true
}

Con esa información creamos un pequeño script que nos de el
número total de fans de nuestra página.

Entonces nos dirigimos a diseño > Edición de HTML > Expandir plantillas de artilugios
podemos usar Ctrl+F para busqueda mas rapida.
El código que pondriamos antes del </head> sería este:

<script type='text/javascript'>
//<![CDATA[
  function fbfans(json) {
    var misfans = json.likes;
    var pagelink = json.link; 
    document.write("<span class='fan_count'>" + misfans + "</span></a>");
  }
//--><!]]>count facebook
</script>

Una ves puesto el codigo antes del </head> vamos a colocar el codigo que va a hacer el llamado y el cual te va a mostrar el numero de fans este lo podemos colocar en cualquier  lugar de su sitio.la mejor opcion y mas rapida es colocarlo en un gadget para eso vamos a:
Diseño> añadir gadget >html-javascript y pegamos el siguiente codigo

<script src="http://graph.facebook.com/161206907309924?callback=fbfans">
</script> fans

El codigo tendrá una clase llamada  Fan_count a la cual le podemos añadir los estilos que deseemos cambiar los numeros por el ID de su pagina.
y donde dice fans lo pueden modificar por lo que quieran .

Al poner el codigo que hace el llamado asi el resultado seria este ejemplo: 145 fans
entonces vamos a darle un toquesito con  una imagen sin tener que tocar nuestra plantilla asi que colocaremos este codigo:

<div style="float:left;padding:8px;">
<img src="http://dl.dropbox.com/u/25944020/facebook_icon.png" style="margin-right: 8px; float:left;" />
<div style="float: left; margin-top:2px;padding:0;font-size:18px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">
<script src="http://graph.facebook.com/161206907309924?callback=fbfans"></script> Seguidores en facebook</div>
<!--[if IE]><br /><![endif]-->
<a href="http://www.facebook.com/pages/tube-trucos/161206907309924"target="_blank">
<div style="text-align:left;margin:0px;padding:0px;font-size: 12px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;"> Sigueme en facebook</div></a></div>

Y asi con este codigo quedaria como se los muestro en la imagen que esta antes del codigo
Lo que esta en rojo lo cambian por el ID de su pagina
Lo que esta en naranja pueden escribir el texto que quieran
Lo que esta en azul es la url completa de su pagina de facebook

Una ves puesto el codigo guardamos y vemos como nos quedo.
Bueno esto es todo espero y les sirva de algo este codigo recuerden que compartir y comentar no cuesta nada denle click a los botoncitos de facebook,twitter,google+ y bitacoras y asi otros que a lo mejor tambien necesitan el código lo podran ver muchas gracias.

Read More

Mensajes aleatorios en la barra de titulo

Bueno hoy vamos a animar un poco la barra de titulo en la cual va a aparecer cada 10 segundo un mensaje nuevo hasta cuatros y mas,en el código que les brindo se los doy para que pongan cuatro mensajes no tan largo claro aunque si lo ponen un poquito largo para que se vea completo hay que poner el cursor encima de la barra de titulo pero ya eso es a gusto de cada persona este es un código pequeño y fácil de implementar yo les voy a marcar lo que deben cambiar.
Aquí les muestro un ejemplo:

Para poner este código vamos a Diseño > Edición de HTML y sin Expandir plantillas de artilugios ponemos en el  <head> y </head> el siguiente código:

<script language="JavaScript">
<!-- Este script y mucho mas en tubetrucos.com -->
function tubetrucos() {
var a = "Todo para tu web en tube trucos.";
var b = "Los trucos y gadget más completo en tube trucos";
var c = "Enlázanos desde tu página";
var d = "Enlazándonos nos ayudas a prosperar";
 var t = new Date();
 s = t.getSeconds();
 if (s == 10) {
  document.title = a;}
 else if (s == 20) {
 document.title = b;}
 else if (s == 30) {
 document.title = c;}
 else if (s == 60) {
 document.title = d;}
 else if (s == 40) {
 document.title = a;}
 else if (s == 50) {
 document.title = b;}
 else if (s == 70) {
 document.title = c;}
 else if (s == 00) {
 document.title = d;}
 setTimeout("tubetrucos()", 1000);
 }
</script>


Una ves colocado ese código vamos  a colocar el siguiente para eso bajamos mas hacia abajo o para una búsqueda mas rápida usen Ctrl+F y ponen lo que quieren buscar en este caso vamos a buscar </body>
Y justo antes vamos a colocar lo siguiente:

<body onLoad="tubetrucos()"></body>

Una ves puesto le damos click a guardar plantilla y es todo no dirigimos a nuestra pagina y vemos en la barra de titulo como cambia cada 10 segundos los mensajes que ustedes colocaron ,bueno espero y les haya servido de algo

Read More

Opacidad en una imagen al pasar el cursor

Con el código de hoy vamos a obtener el efecto de opacidad en una imagen al pasar el cursor y viseversa también, por lo tanto vamos a obtener dos códigos,este efecto es muy fácil de implementar copien el código que les brindo y lo puedes colocar en la plantilla o en Diseño > añadir gadget > HTML/Javascript y pegamos es todo.
Aquí les muestro el ejemplo como quedaría:















En el codigo donde nos dice "URL de la imagen" ponen entre las comillas la url de la imagen que quieren mostrar

<img style="opacity: 0.2; filter:alpha(opacity=20);" src="URL de la imagen" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/><br /> <br />

<br /><img src="URL de la imagen" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

Read More

Efecto magico de estrellitas al mover el mouse

Con el código que les brindo hoy vamos a obtener un efecto muy bonito el cual se trata de cuando muevas el mouse,ratón este va a ir dejando unas estrellitas de varios colores este efecto es como una varita mágica jajaja ,pero este no hace magia ok solo hace ese efecto maravilloso de la forma que se los voy a brindar no tienen que hacer nada simplemente copien el código que les voy a brindar a continuación y lo van a pegar justo después de el  <body>

Aquí pueden ver el ejemplo >>>> Ver <<<<

Bueno para implementarlo,hacemos los siguientes pasos :
1.Vamos a diseño > Edición de HTML y click a Expandir plantillas de artilugios
2.Para una busqueda mas rapida CTRL+F y buscamos   <body> y justo despues de éste, pegamos el siguiente codigo:

<script src='http://img68.xooimage.com/files/4/3/7/tubetrucos-2dd00ad.js' type='text/javascript'/>

Read More

Poner un mapa en tu sitio (sitemap)

Los mapas en los sitios web(sitemaps)son importantes ya que han dado prueba de su utilidad. Los administradores de los sitios lo utilizan como herramientas que permiten orientarse rápidamente en los archivos, es una herramienta de muy buena utilidad ya que puedes encontrar lo que buscas mas rápido,muchas empresas lo usan para mostrar los servicios que brindan ya que con este código les muestra todo. también Los mapa en los sitios (sitemaps) informan a Google acerca de todas tus entradas de tu sitio web que no podrían detectar de otra forma. Los "sitemaps", son listas que incluyen las entradas,páginas que integran los sitios web. La creación y el envío de un sitemap permite a Google conocer todas las páginas
de un sitio, incluyendo las URL que los procesos de rastreo habituales de Google podrían no detectar.

Como poner un mapa en tu sitio es muy facil acontinuacion les boy a bridar el codigo que deben poner para
obtener el resultado.Para ponerlo en tu blog crea una página estática o una entrada normal, luego en el editor de entradas en la parte superior derecha pincha en Edición de HTML y pega el siguiente código:



<script style="text/javascript"
src="http://dl.dropbox.com/u/25944020/tubetrucossitemap.js"></script>
<script src="http://LA-URL-DE-TU-SITIO/feeds/posts/default?max-results=10000&alt=json-in-
script&callback=loadtoc"></script>


Ejemplo: en mi caso quedaria así

<script src="http://tubetrucos.com/feeds/posts/defaul
t?max-results=10000&alt=json-in-script&callback=loadtoc"></script>

Read More

saber el tiempo vivido

Quieres saber cuanto tiempo has vivido? cuando ustedes pongan su fecha de nacimiento este le dira el día de la semana que nacistes y cuantos meses ,semanas,horas,minutos,segundos,y milisegundos han trancurrido hasta entonces y en que tiempo sera su proximo cumpleaños.


Hola disculpen el inconveniente con este codigo pero por algun motivo dejo de funcionar estoy trabajando en ello espero y solucionarlo pronto mientras pueden chequear en este sitio saber el tiempo vivido

muchas gracias por su visita.jorge

Read More

Numerar los comentarios en blogger

En esta entrada les muestro como numerar los comentarios es decir que cada comentario tenga su numero 1 2 3 etc, estos se van a mostrar entre mensaje y mensaje a la derecha
lo pueden modificar a sus gustos.
bueno para implementar esto y obtener el resultado vamos a ir a Diseño
Edición de HTML y Marcamos la casilla "expandir artilugios" una ves hecho eso vamos a buscar este codigo:
(les recomiendo usar Ctrl + F para buscar más rápido)

<b:loop values='data:post.comments' var='comment'>

una ves encontrado vamos a colocar dos codigos uno antes y uno despues
el primer codigo que vamos a colocar antes es este :

<script type='text/javascript'>var num_comm = 1;</script>

una ves puesto este antes pues vamos a colocar el siguiente que es despues

<a class='num_comments' expr:href='data:blog.url + &quot;#comment-&quot; + data:comment.anchorName' expr:id='&quot;comment-&quot; + data:comment.anchorName' expr:title='&quot;Comentario hecho por &quot; + data:comment.author'><script type='text/javascript'>document.write(num_comm); num_comm=num_comm+1 ;</script></a>

Una ves hecho eso les tendria que quedar así :

<script type='text/javascript'>var num_comm = 1;</script>

<b:loop values='data:post.comments' var='comment'>

<a class='num_comments' expr:href='data:blog.url + &quot;#comment-&quot; + data:comment.anchorName' expr:id='&quot;comment-&quot; + data:comment.anchorName' expr:title='&quot;Comentario hecho por &quot; + data:comment.author'><script type='text/javascript'>document.write(num_comm); num_comm=num_comm+1 ;</script></a>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

Ya verificado que haiga quedado igual vamos al ultimo paso busquemos lo siguiente:

]]></b:skin>

y arriba de este codigo ,antes colocamos esto:


.num_comments {
color:#0101DF;
float:right;
text-decoration:none;
font-size:24px;
}

este ultimo codigo es para darle estilo pueden modificar el color la posicion y el tamaño si necesitan los codigos de colores pueden encontrarlos aquí

bueno ya por ultimo paso es guardar los cambios y comprobar que te haya quedado bien, yo he hecho lo mismo en mi blog asi que el resultado final tambien lo puedes apreciar aquí en mi blog.

Read More

Personalizar la fecha de los post,(entradas) en tu blog

Con los siguientes pasos podremos hacer que las fechas de los post,entradas de nuestro blog se muestre dentro de un fondo que quieras mostrar con la medida 48 px por 49 px como el que yo tengo en mi blog, si no la quieres con un fondo igual te queda con un estilo diferente y mas hermoso de como la muestra blogger que es horizontal y por encima del titulo con los pasos que les boy a indicar hoy les va a quedar en miniatura y vertical arlado del titulo .

Este es un ejemplo sin imagen de fondo:

Y este va a ser el resultado con imagen:

Bueno despues de ver estos ejemplos vamos a cambiar el formato en que se muestra la fecha de nuestros posts. Para eso vamos a Diseño a Configuración y escogemos la opción Formato, una vez allí en "Formato de cabecera de la fecha" seleccionamos la penúltima opción que se nos presenta en el desplegable, ejemplo: 28 septiembre 2011, y guardamos configuración

Ya guadado el formato de la fecha vamos a ir a diseño despues a Edición de Html y expandimos los artilugios.
vamos a localizar la etiqueta </head> y justo antes vamos a colocar este script:


<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
}
</script>


Ahora vamos a localizar este codigo:


<h2 class='date-header'><data:post.dateHeader/></h2>

Una ves localizado lo vamos a sustituir por este codigo:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

Ya por ultímo vamos a darle un poco de estilo a la fecha y localizemos este codigo:

]]></b:skin>

Justo antes vamos a pegar este codigo a continuacion:

/* css para la-Fecha
-------------------- */

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(AQUI VA LA URL DE LA IMAGEN) no-repeat;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}

.fecha_anio {
display: block;
font-size: 10px;
}

.fecha_dia {
margin: 2px 0 0 1px;
display: block;
font-size: 16px;
font-weight:bold;
}




Ahora guardamos los cambios y vemos que todo este bien.

Si no quieren fondo no pongan ninguna imagen y solo se les mostrara la fecha.

Espero y les haya gustado aquí les dejo algunas imagenes por si quieren usar ,den click derecho encima de la imagen  ver imagen y guardar como y se les guardara en su pc despues la pueden subir a un servidor de imagenes o archivos les recomiendo Dropbox obtinen la url la ponen donde va y es todo
o click derecho ver informacion de la imagen y copien la direccion url de la imagen.

Read More

Imagenes rotativas con boton de start y stop

En este código vamos a usar la etiqueta marque que nos va a dar el efecto a estas imagenes ,rotandolas una detrás de otra también añadiéndoles otros atributos que necesitamos,vamos a ponerle la opción de empezar y parar recuerden pueden modificarlas a sus gustos como la velocidad en la que van a ir pasando la altura etc.
este código lo van a poner en donde ustedes quieran que se muestre no necesitamos poner nada en el head.
aquí pueden ver otras opciones de la etiqueta marque ver aquí

Donde dice:  

<center><a href="AQUI VA LA URL DE ENLACE" target="_blank"><img src="AQUI VA LA URL DE LA IMAGEN" alt="AQUI VA TITULO O INFORMACION" style="position: relative;" border="0" /></a>
</center>

Si quieres mostrar mas imagenes simplemente añade este codigo:

<center><a href="AQUI VA LA URL DE ENLACE" target="_blank"><img src="AQUI VA LA URL DE LA IMAGEN" alt="AQUI VA TITULO O INFORMACION" style="position: relative;" border="0" /></a>
</center>

<center><marquee behavior="scroll" style="position: relative;" id="mymarquee" align="center" direction="up" scrollamount="2" scrolldelay="5" width="200" height="280"><br /> <!--- code for http://fasetube.blogspot.com/---><br /> <center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images1.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images2.jpg" alt="'aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images3.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images4.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images5.jpg" alt="'aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images6.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images7.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images8.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a></center><br /> <br /> <br /> </marquee><br /> <input onclick="document.getElementById('mymarquee').start ();" value="Start" type="button" /> <input onclick="document.getElementById('mymarquee').stop ();" value="Stop" type="button" /></center>

Ejemplo:

Read More

Galeria de imagen con la opcíon ampliar II

Esta es una galería de imagen al pasar el mouse por encíma de ese texto se mostrara una imagen,Un título puede ser añadido a la imagen ampliada,estas las pueden modificar a sus gustos,medidas color de fondo del borde y imagenes disfrutenla.


Este va entre las etiquetas .<head><head>

<!-- Codes by tubetrucos.com --> <style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>

Este va en el body donde ustedes quieren que se muestre.

<div class="gallerycontainer"> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images11.jpg" /></span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/images9.jpg" /></span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images.jpg" /></span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/jesus.jpg" /></span></a> </div>

Con este es lo mismo lo uníco que este tiene para mostrar un titulo o informacion hacerca de la imagen en la parte de abajo de la imagen van a usar el mismo codígo para el head que les brindo anteriormente ,este va en el body donde ustedes quieren que se muestre.

<div class="gallerycontainer"> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images11.jpg" /><br />Aquí ponen el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/images9.jpg" /><br />Aquí ponen el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images.jpg" /><br />Aquí ponen el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/jesus.jpg" /><br />Aquí ponen el titulo que quieran</span></a> </div>

Ejemplo:

Aquí ponen el titulo
Aquí ponen el titulo
Aquí ponen el titulo
Aquí ponen el titulo

Ejemplo:

Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran

Read More

Galeria de imagen con la opcíon ampliar

Esta es una galería de imagen CSS con títulos, que muestra más grandes las imágenes dinámicamente cuando el mouse pasa sobre ellas. Un título puede ser añadido a la imagen ampliada,estas las puedes modificar a sus gustos,medidas color de fondo del borde y imagenes disfrutenla.

Este va entre las etiquetas .<head><head>

<!-- Codes by tubetrucos.com --> <style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>

Este va en el body donde ustedes quieren que se muestre.

<div class="gallerycontainer"><br /> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images1.jpg" width="100px" height="66px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images1.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/ima.jpg" width="100px" height="66px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/ima.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images6.jpg" width="100px" height="75px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images6.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images7.jpg" width="100px" height="70px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images7.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images4.jpg" width="100px" height="75px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images4.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images8.jpg " width="100px" height="70px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images8.jpg " /><br /> Aquí pueden poner el titulo que quieran</span></a> <br /> </div>

Ejemplo:

Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran

Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran

Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran

Read More

Translucente scroller con texto y enlaces

Hoy les voy a brindar un código muy utilizado en los sitio web los cuales ponen algún texto rotativo con sus enlaces esta translucente scroller es configurable yo les voy a guiar donde poner el texto la url,enlace color de fondo el ancho y la altura y la velocidad con la que va a ir rotando el texto.

Donde dice:

var scroller_width='190px' este es el ancho
var scroller_height='80px' esta es la altura
var bgcolor='#FFDEAD' este es el color de fondo si necesitan codígo de color pueden ir aquí
var pause=3000 esta es la velocidad con la que se muestra el texto (3000=3 segundos)


scrollercontent[0]='AQUI VA TEXTO <a href="AQUI VA LA URL">AQUI VA EL ENLACE DE LA URL </a>AQUI VA MAS TEXTO'

scrollercontent[1]='AQUI VA TEXTO <a href="AQUI VA LA URL">AQUI VA EL ENLACE DE LA URL </a>AQUI VA MAS TEXTO'

scrollercontent[2]='AQUI VA TEXTO <a href="AQUI VA LA URL">AQUI VA EL ENLACE DE LA URL </a>AQUI VA MAS TEXTO'

Si quieren añadir mas simplemente añaden lo que les muestro anteriormente lo unico donde dice: scrollercontent[2] donde esta el 2 lo cambian por el 3 despues el 4 y así sucesivamente.

<script language> var scroller_width='190px' var scroller_height='80px' var bgcolor='#FFDEAD' var pause=4000 //selecciona el tiempo de uno al otro (4000=4 segundos) var textcolor='#FFDEAD' var aling='center' var scrollercontent=new Array() scrollercontent[0]='todos los <a href="http://tubetrucos.com">codigos html javascript </a>todo gratis!' scrollercontent[1]='todos los <a href="http://tubetrucos.com/">trucos blogger y web</a> aquí vas a encontrar todo lo que necesitas para tu sitio web o blog.' scrollercontent[2]='Con este <a href="http://tubetrucos.com/">descodificador html</a>descodifica tu codigo html o codificalo.' //Para mas HTML scripts, visita http://tubetrucos.com/ //////NO necesitas editar despues de aquí////// var ie4=document.all var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1 if (ie4||dom) document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>') else if (document.layers){ document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=2 top=2>'+scrollercontent[0]+'</layer></ilayer>') } var curpos=scroller_height*(1) var degree=10 var curcanvas="canvas0" var curindex=0 var nextindex=1 function moveslide(){ if (curpos>0){ curpos=Math.max(curpos-degree,0) tempobj.style.top=curpos+"px" } else{ clearInterval(dropslide) if (crossobj.filters) crossobj.filters.alpha.opacity=100 else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=1 nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML=scrollercontent[curindex] nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0 setTimeout("rotateslide()",pause) } } function rotateslide(){ if (ie4||dom){ resetit(curcanvas) crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ if (crossobj.filters) document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20 else if (crossobj.style.MozOpacity) document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2 var temp='setInterval("moveslide()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else if (document.layers){ crossobj.document.write(scrollercontent[curindex]) crossobj.document.close() } curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0 } function resetit(what){ curpos=parseInt(scroller_height)*(1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.top=curpos+"px" } function startit(){ crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub if (ie4||dom){ crossobj.innerHTML=scrollercontent[curindex] rotateslide() } else{ document.tickernsmain.visibility='show' curindex++ setInterval("rotateslide()",pause) } } if (ie4||dom||document.layers) window.onload=startit </script>

Read More

Deshabilita el botón derecho y no permite seleccionar

Muchas personas no les gusta que alguien venga y les copie cosas de su sitio porque después de tanto esfuerzo que te cuesta diseñarlo esta duro verdad,el que tenga un sitio personal y no quiere compartir ningún código con nadie y quisiera evitar que otra persona le copie o le seleccione a continuación le voy a brindar ese código el cual nadie puede seleccionar ni dar click derecho para poderte copiar.
Nota: también existe una manera pero es mas complicada porque tendrías que ir al código completo de la pagina y pueden usar Ctrl+F y buscan lo que necesitan pero mucho no lo saben.

Bueno para implementar este codigo vamos a Diseño>edición HTML>expandimos artilugios
para busqueda mas rapido usamos Ctrl+F y buscamos </head> y justo antes pegamos el siguiente

<script type='text/javascript'>
function inhabilitar(){

return false;
}
document.oncontextmenu=inhabilitar;

function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function (&quot;return false&quot;);
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>



Una ves puesto el codigo guardamos plantilla y es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.

Read More

fuegos artificiales en la web

Con este código ya pueden celebrar en su sitio web o blog porque hace el efecto de fuegos artificiales,fireworks por toda la web
pueden ver el ejemplo en pantalla.este codigo lo deben de ubicar entre las etiquetas <body></body> disfrutenlo.

<script type="text/javascript">
var bits=100;
var intensity=7;
var speed=20;
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");


var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}

function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
</script>

Read More

Pelotas que siguen al cursor

Con este código javascripts van a obtener el resultado de unas pelotas que de una forma elásticas siguen al cursor,mouse a donde quiera que se mueva,para implementarlo simplemente lo van a colocar entre las etiqueta <body></body> y van a obtener el resultado que ven en pantalla. para poner su imagen donde dice:     http://dl.dropbox.com/u/25944020/football.gif        lo remplazan por la imagen que quieran poner

<div id="dot0" style="position: absolute; visibility: hidden;"> </div> <div 0="" 30;="" height:="" id="dot1" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot2" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot3" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot4" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot5" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot6" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <script type="text/javascript"> <!-- http://www.tubetrucos.com/ --> <!-- Begin var nDots = 7; if (document.all&&window.print) document.body.style.cssText="overflow-x:hidden;overflow-y:scroll" var Xpos = 0; var Ypos = 0; var DELTAT = .01; var SEGLEN = 10; var SPRINGK = 10; var MASS = 1; var GRAVITY = 50; var RESISTANCE = 10; var STOPVEL = 0.1; var STOPACC = 0.1; var DOTSIZE = 35; var BOUNCE = 0.75; var isNetscape = navigator.appName=="Netscape"; var followmouse = true; var dots = new Array(); init(); function init() { var i = 0; for (i = 0; i < nDots; i++) { dots[i] = new dot(i); } for (i = 0; i < nDots; i++) { dots[i].obj.left = dots[i].X + "px"; dots[i].obj.top = dots[i].Y + "px"; } if (isNetscape) { startanimate(); } else { setTimeout("startanimate()", 20); } } function dot(i) { this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0; this.obj = eval("document.getElementById('dot" + i + "').style"); } document.onmousemove = MoveHandler; function startanimate() { setInterval("animate()", 20); } function MoveHandler(e) { if (!e) { Xpos = window.event.x + document.body.scrollLeft; Ypos = window.event.y + document.body.scrollTop; } else { Xpos = e.pageX; Ypos = e.pageY; } } function vec(X, Y) { this.X = X; this.Y = Y; } function springForce(i, j, spring) { var dx = (dots[i].X - dots[j].X); var dy = (dots[i].Y - dots[j].Y); var len = Math.sqrt(dx*dx + dy*dy); if (len > SEGLEN) { var springF = SPRINGK * (len - SEGLEN); spring.X += (dx / len) * springF; spring.Y += (dy / len) * springF; } } function animate() { var start = 0; if (followmouse) { dots[0].X = Xpos; dots[0].Y = Ypos; start = 1; } for (i = start ; i < nDots; i++ ) { var spring = new vec(0, 0); if (i > 0) { springForce(i-1, i, spring); } if (i < (nDots - 1)) { springForce(i+1, i, spring); } var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE); var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY); dots[i].dx += (DELTAT * accel.X); dots[i].dy += (DELTAT * accel.Y); if (Math.abs(dots[i].dx) < STOPVEL && Math.abs(dots[i].dy) < STOPVEL && Math.abs(accel.X) < STOPACC && Math.abs(accel.Y) < STOPACC) { dots[i].dx = 0; dots[i].dy = 0; } dots[i].X += dots[i].dx; dots[i].Y += dots[i].dy; var height, width; if (isNetscape) { height = window.innerHeight + document.scrollTop; width = window.innerWidth + document.scrollLeft; } else { height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft; } if (dots[i].Y >= height - DOTSIZE - 1) { if (dots[i].dy > 0) { dots[i].dy = BOUNCE * -dots[i].dy; } dots[i].Y = height - DOTSIZE - 1; } if (dots[i].X >= width - DOTSIZE) { if (dots[i].dx > 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = width - DOTSIZE - 1; } if (dots[i].X < 0) { if (dots[i].dx < 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = 0; } dots[i].obj.left = dots[i].X + "px"; dots[i].obj.top = dots[i].Y + "px"; } } // End --> </script>

Read More