Hacer que un enlace abra en una ventana emergente.

Truco para que no se desvien tus visitas.

Es muy importante para los webmaster saber como hacer para que un enlace abra en otra ventana, digo esto porque si tú tienes una sesión de web amigas, o intercambio de enlaces, cuando una persona haga click sobre un link que le llame la atención, este sitio podría desviarlo y salir de tú web o blog, abriendo una nueva página en la misma ventana, esto no es ventajoso para nadie, ya que se perdería la atención del contenido de tus sitios, por parte del o los visitantes. Esto sería diferente si el enlace abre en otra ventana.

Para agregar un enlace que apunte a otro sitio y a la vez abra en otra ventana, debes utilizar la expresión TARGET BLANK o TARGET NEW de la siguiente manera:

a href='http://elsitioquedesees.com' title='Titulo' target="_blank"; ABRE EN UNA NUEVA VENTANA

Un ejemplo quedaría de esta manera:

a href='http://www.colonvoleibol.com' title='Voleibol Club La Armonía' target="_blank"Voleibol Club La Armonía

El código ya codificado quedaría así:

Voleibol Club La Armonía

Nótese que al hacer click sobre el enlace, este abrirá en una nueva ventana, pero si le quitas el ' target="_blank" abrirá en la misma ventana

Snipplr ¿buscas Snippets para tu web?

Completo repositorio de códigos para ahorrar tiempo y esfuerzo. 

Snipplr es un plataforma que reune un importante número de snippets con los que facilitar la vida de un desarrollador a la hora de llevar a cabo su trabajo.
Entre los recursos que vamos a poder encontrar destacan snippets de CSS, JavaScript, HTML, PHP, Ruby, Objective-C....
Todos los fragmentos de código incluidos en este site están a disposición de cualquier interesado para poder usarlo o implementarlo en su propio desarrollo.
Además si nos registramos y sacamos nuestra propia cuenta en Snipplr también vamos a poder añadir nuestros propios snippets y etiquetarlos para que otros puedan encontrarlos y usarlos, haciendo más grande esta comunidad.

Simply Testable, valida con 1 click el código de tu website.

Completo sistema de validación de un website de forma gratuita.

Muchos de los desarrolladores que desean cumplir con las mejores prácticas y estandares web llevan a cabo la validación de su página web a través de W3C. Aunque este trabajo no plantea una excesiva dificultad técnica, cuando nuestro proyecto es un site de varias páginas web, puede llegar a convertirse en un trabajo tedioso ya que la validación se lleva a cabo documento por documento.
Simply Testable es una herramienta interesante para el desarrollador front-end con la que ahorrarnos un importante tiempo a la hora de verificar el código de todas las páginas que forman parte de nuestro site.
Para validar nuestro proyecto web de forma completa simplemente debemos introducir la URL de la home y seleccionar "Test your site now" para que se lleve a cabo en tiempo real el mencionado test de Validación del HTML conforme al estándar del W3C. Además de lo anterior Simply Testable también llevará a cabo comprobaciones de enlaces rotos, presencia del archivo robots.txt o detección de la inclusión de un favicon.
Los informes ofrecidos por esta herramienta gratuita incluyen los errores de cada URL con explicaciones (en inglés) para que podamos ir a través de ellos y solucionar cada uno.
Simply Testable es una utilidad en constante mejora que ya ha anunciado que trabaja en la validación CSS y el análisis JavaScript como características planificada para un futuro próximo.

Code Snipets: el código para tus proyectos web.

Coleción de fragmentos de código con los que mejorar tu trabajo de desarrollador web.

Los chicos de CSS Tricks, plataforma web para todos aquellos interesados en mejorar sus habilidades y conocimientos web, tienen una interesante biblioteca abierta de snipets lista para ser usados por cualquier desarrollador y/o diseñador interesado.
Esta recopilación de fragmentos de código es un recurso muy recomendable para tenerlo siempre a mano e incluye snippets de tecnolologias y lenguajes como CSS, PHP, jQuery, WordPress, htaccess, o JavaScript.
Entre los snippets que podemos encontrar destaca el centrado vertical en CSS, la creacion de tablas o listas con efecto, almacenamiento de los errores de PHP en un archivo o cómo evitar cacheo de CSS en WordPress.
Así que si estás buscando una amplio repositorio de código con una importante cantidad de snippets listos para ser implementados en tu desarrollo, noi dejes de darle un vistazo a css-tricks.com/snippets.

Optimizadores de código CSS.

herramientas online para optimizar código fuente de hojas de estilo en cascada.



Esta selección de aplicaciones web nos van a servir para optimizar código CSS, ayudándonos a solucionar problemas en su formato y evitándonos revisar y optimizar el código de forma manual.
Entre las herramientas presentadas, algunas más básicas otras más complejas, vamos a poder elegir el nivel de compresión disponiendo de opciones como eliminar selectores no utilizados o determinadas propiedades.

1.CSS Óptimo: organiza y da formato al código de acuerdo a un grado de optimización seleccionado. Reduce el peso de una hoja de estilos en más de un 30%.

2.CSS SuperScrub, herramienta online que nos permite reducir el tamaño y la complejidad del CSS, deshaciéndose de código innecesario.

3.CSS Formatter and Optimiser comprime y optimiza CSS, mejorando y eliminado elementos no necesarios. Dispone de varios niveles de compresion

4.Code beautifier, aplicación online que permite ordenar y combinar selectores y propiedades, comprimir los colores y la tipografía de peso, elegir entre el formato de mayúsculas y minúsculas, desprenderse de las propiedades no válidas.....Basta con pegar el código CSS y seleccionar dentro de las opciones el tipo de estilo y listo.

5.Tabifier, esta aplicación web está centrada en las tabulaciones. Soporta CSS, HTML y C.

6.FlumpCakes Online CSS Optimizer ordena, optimiza y comprime código CSS ofreciendo una versión más reducida.

Syntaclet, entiende mejor el código fuente de un site

Herramienta para interpretar codigo fuente.

Syntaclet es un bookmarklet desde el que vamos a poder volver más legible y fácil de entender el código fuente de un website.
Es común en webmasters navegar entre webs en busca de fragmentos de código y ejemplos diversos. El problema es que muchos sites tienen métodos pobres para mostrar el código, lo que los convierte en complicados de leer. Ahora, simplemente con hacer clic en el bookmarklet Syntaclet, se aplicará automáticamente la sintaxis del lenguaje específico, ofreciendo colores, números en las lineas y otros recursos que favorezcan su entendimiento.
Syntaclet es una herramienta gratuita que soporta más de 20 lenguajes de programación, entre los que encontramos Javascript, PHP, Java C, C++ o C#.

Calculadora flash para tu sitio web.

Calculadora flash muy util para tu web o blog.

He aqui una;aplicación que podría ser muy vistosa y de provecho para tus sitios, me refiero a la calculadora, si bien es cierto de que nuestro sistema operativo posee una entre sus herramientas, pero es más rápido usarla en una web o blog directamente si los usuarios quieren efectuar algún cálculo, este gadget es ideal para sitios que ofrezcan en venta algún tipo de producto, o para aquellas cuya temática se relacione con comercio electrónico, estadísticas en línea entre otros.

Vista previa de la aplicación:



Este es el codigo que debes insertar en tu web:

<center><a href="http://amigaswebs.blogspot.com" title="relojes web"> <embed style = "" src = "http://img60.xooimage.com/files/c/b/2/calculadora-2-23793a9.swf"wmode =" transparent "type =" application / x-shockwave-flash "height =" 200 "width =" 200 "> <param name="wmode" value="transparent" /><td align="center"></td></embed></a></center><br />

Optimizadores online de código JavaScript.

Herramientas online que organizan nuestro código JavaScript de forma automática.

JavaScript es un lenguaje de script comúnmente utilizado por desarrolladores web y webmasters para crear sitios web interactivos. A menudo son necesarias herramientas con las que organizar su código fuente ya que en muchos casos este es escrito sin espacios entre lineas.

Optimizadores de código JavaScript:

• Javascript Unpacker & Beautifier. Esta aplicación online de forma sencilla y rápida, limpia el código, lo ordena y formatea perfectamente. Dispone de algunas opciones con las que personalizar y embellecer el resultado. Interesados pueden acceder desde jsbeautifier.org

• Javascript Beautifier. Es una herramienta para descomprimir y embellecer el código javascript de forma eficaz aunque sin opciones para configurar. Simplemente pegar el código y seleccionar Beautify para obtener el resultado. Interesados pueden acceder desde http://www.javascriptbeautifier.com/.

• JSON Formatter & Validator. Este validador online permite copiar el JSON (JavaScript Object Notation)o tomarlo desde una URL y da opciones de validarlo contra el estándar de JSON o simplemente darle formato para que sea fácilmente legible. Interesante para tenerlo a mano en marcadores. Interesados pueden acceder desde jsonformatter.curiousconcept.com.

Herramienta Online para trabajar codigos de programación.

herramienta web permite trabajar y experimentar con más de 40 lenguajes de programación.

Ideone nos ofrece la posibilidad de compilar y ejecutar código en múltiples lenguajes de programación sin necesidad de descargas en nuestro equipo.
Su manejo es muy sencillo, basta con elegir el lenguaje de programación que vamos a utilizar en el código que crearemos, para una vez escrito poder compilarlo a través de la opción run code. Una vez hayamos ejecutado nuestro código, Ideone además de ofrecernos la posibilidad de descargarlo nos entrega de forma automática una URL que servirá para compartir nuestro enlace con otras personas.
Entre los más de 40 lenguajes soportados destaca C, Ruby (v1.9.2), C++, Java, Perl (v5.12.1), PHP (v5.2.11), Python (v2.6.4) o Visual Basic .NET.
Ideone nos permite además experimentar con nuevos lenguajes gracias a su sección de ejemplos (samples).

Como poner codigos en los post.

Codigos HTLM en los post.

Varias amigos me han estado preguntando como poner código dentro de un Post.
Bien,  lo que tenemos que tener en claro es que, normalmente en Blogger cuando introducen cualquier texto, que tenga naturaleza HTML o de programación web, este lo tomara como si fueran instrucciones para que muestre el elemento y no para que muestre solamente el código.
Por lo que tendremos que convertir nuestro HTML/Texto al formato Escape para esto usaremos la herramienta online que nos proporciona Blogcrowds.
Ponemos el texto en el cuadro superior y le damos click a "Parse", ahora simplemente copiamos el código resultante y lo ponemos en nuestro Blog.

Codigos para efectos de ratón y cursor.

Trucos de efectos para el mouse y cursor.

Tenemos aqui algunos trucos y códigos javascript recopilados, que creemos que te pueden ser útiles para realizar cualquier página; basicamente son efectos que actuan sobre el funcionamiento del mouse o en el cursor de tu pagina web.

Estrella persiguiendo al puntero.
<!-- Dentro del Tag HEAD --><br /> <br /> <STYLE TYPE="text/css"> <!-- BODY{ overflow:scroll; overflow-x:hidden; } .s1 { position : absolute; font-size : 10pt; color : blue; visibility: hidden; } .s2 { position : absolute; font-size : 18pt; color : red; visibility : hidden; } .s3 { position : absolute; font-size : 14pt; color : gold; visibility : hidden; } .s4 { position : absolute; font-size : 12pt; color : lime; visibility : hidden; } //--> </STYLE><br /> <br /> <br /> <!-- Dentro del Tag BODY --><br /> <br /> <DIV ID="div1" CLASS="s1">*</DIV><DIV ID="div2" CLASS="s2">*</DIV><DIV ID="div3" CLASS="s3">*</DIV><DIV ID="div4" CLASS="s4">*</DIV><br /> <br /> <SCRIPT LANGUAGE="javascript" TYPE="text/javascript"> // adaptado por http://www.bibliotutos.blogspot.com var nav = (document.layers); var tmr = null; var spd = 50; var x = 0; var x_offset = 5; var y = 0; var y_offset = 15; if(nav) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = get_mouse; function get_mouse(e) { x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft; y = (nav) ? e.pageY : event.clientY+document.body.scrollTop; x += x_offset; y += y_offset; beam(1); } function beam(n) { if(n<5) { if(nav) { eval("document.div"+n+".top="+y); eval("document.div"+n+".left="+x); eval("document.div"+n+".visibility='visible'"); } else { eval("div"+n+".style.top="+y); eval("div"+n+".style.left="+x); eval("div"+n+".style.visibility='visible'"); } n++; tmr=setTimeout("beam("+n+")",spd); } else { clearTimeout(tmr); fade(4); } } function fade(n) { if(n>0) { if(nav)eval("document.div"+n+".visibility='hidden'"); else eval("div"+n+".style.visibility='hidden'"); n--; tmr=setTimeout("fade("+n+")",spd); } else clearTimeout(tmr); } // --> </SCRIPT><br />

Conjunto de estrellas persiguiendo al cursor.
<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,3,3"></LAYER><br /> <br /> <br /> <script language="JavaScript"> /* Magic Wand cursor (By Kurt at kurt.grigg@virgin.net) Modified and permission granted to Dynamic Drive to feature script in archive For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ if (document.all){ with (document){ write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">') write('<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div>') write('</div>') } } var Clrs=new Array(6) Clrs[0]='ff0000'; Clrs[1]='00ff00'; Clrs[2]='000aff'; Clrs[3]='ff00ff'; Clrs[4]='fff000'; Clrs[5]='fffff0'; if (document.layers) {window.captureEvents(Event.MOUSEMOVE);} var yBase = 200; var xBase = 200; var step; var currStep = 0; var Xpos = 1; var Ypos = 1; if (document.all) { function MoveHandler(){ Xpos = document.body.scrollLeft+event.x; Ypos = document.body.scrollTop+event.y; } document.onmousemove = MoveHandler; } else if (document.layers) { function xMoveHandler(evnt){ Xpos = evnt.pageX; Ypos = evnt.pageY; } window.onMouseMove = xMoveHandler; } function animateLogo() { if (document.all) { yBase = window.document.body.offsetHeight/4; xBase = window.document.body.offsetWidth/4; } else if (document.layers) { yBase = window.innerHeight/4; xBase = window.innerWidth/4; } if (document.all) { for ( i = 0 ; i < starsDiv.all.length ; i++ ) {step=3; starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200); starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400); for (ai=0; ai < Clrs.length; ai++) { var c=Math.round(Math.random()*[ai]); } starsDiv.all[i].style.background=Clrs[c]; } } else if (document.layers) { for ( j = 0 ; j < 14 ; j++ ) //number of NS layers! {step = 4; var templayer="a"+j document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + j*4)/12)*Math.cos(0.7+currStep/200); document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400); for (aj=0; aj < Clrs.length; aj++) { var c=Math.round(Math.random()*[aj]); } document.layers[templayer].bgColor=Clrs[c]; } } currStep+= step; setTimeout("animateLogo()", 10); } animateLogo(); // --> </script><br />

Conjunto de bolas persiguiendo al cursor.
<!--inserta aqui tantas imágenes como quieras que sigan al cursor --><br /> <div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11; left: 12; top: 0"><img src="../../imagenes/AM11.gif" height=11 width=11></div><div id="dot1" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot2" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot3" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot4" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot5" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot6" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot7" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot8" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><br /> <script LANGUAGE="JavaScript"> <!-- hide code /* Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL:http://members.xoom.com/ebullets) Script featured on Dynamicdrive.com For this and 100's more DHTML scripts, visit http://dynamicdrive.com Apaptado y traducido al español por http://www.losrecursosgratis.com. Mas de 100 JavaScript en tu idioma y con ejemplos reales. */ // Thanks to Troels Jakobsen <tjak@get2net.dk> // configura el número de imágenes que seguiran al cursor. No olvides poner las mismas que hayas insertado anteriormente. var nDots = 9; if (document.all&&window.print) document.body.style.cssText="overflow-x:hidden;overflow-y:scroll" var Xpos = 0; var Ypos = 0; // variable de tiempo var DELTAT = .01; // distancia entre las imágenes var SEGLEN = 4; // variable de la elasticidad (preferible no poner mucho) var SPRINGK = 10; // constantes físicas supuestas; la imagen se conporta como un cuerpo var MASS = 1; var GRAVITY = 50; var RESISTANCE = 10; var STOPVEL = 0.1; var STOPACC = 0.1; var DOTSIZE = 11; 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); } if (!isNetscape) { // I only know how to read the locations of the // <LI> items in IE //skip this for now // setInitPositions(dots) } // set their positions for (i = 0; i < nDots; i++) { dots[i].obj.left = dots[i].X; dots[i].obj.top = dots[i].Y; } if (isNetscape) { // start right away since they are positioned // at 0, 0 startanimate(); } else { // let dots sit there for a few seconds // since they're hiding on the real bullets setTimeout("startanimate()", 2000); } } function dot(i) { this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0; if (isNetscape) { this.obj = eval("document.dot" + i); } else { this.obj = eval("dot" + i + ".style"); } } function startanimate() { setInterval("animate()", 20); } // This is to line up the bullets with actual LI tags on the page // Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why // Still doesn't work great function setInitPositions(dots) { // initialize dot positions to be on top // of the bullets in the <ul> var startloc = document.all.tags("LI"); var i = 0; for (i = 0; i < startloc.length && i < (nDots - 1); i++) { dots[i+1].X = startloc[i].offsetLeft startloc[i].offsetParent.offsetLeft - DOTSIZE; dots[i+1].Y = startloc[i].offsetTop + startloc[i].offsetParent.offsetTop + 2*DOTSIZE; } // put 0th dot above 1st (it is hidden) dots[0].X = dots[1].X; dots[0].Y = dots[1].Y - SEGLEN; } // just save mouse position for animate() to use function MoveHandler(e) { Xpos = e.pageX; Ypos = e.pageY; return true; } // just save mouse position for animate() to use function MoveHandlerIE() { Xpos = window.event.x + document.body.scrollLeft; Ypos = window.event.y + document.body.scrollTop; } if (isNetscape) { document.captureEvents(Event.MOUSEMOVE); document.onMouseMove = MoveHandler; } else { document.onmousemove = MoveHandlerIE; } function vec(X, Y) { this.X = X; this.Y = Y; } // adds force in X and Y to spring for dot[i] on dot[j] 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() { // dots[0] follows the mouse, // though no dot is drawn there 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); } // air resisitance/friction var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE); // compute new accel, including gravity var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY); // compute new velocity dots[i].dx += (DELTAT * accel.X); dots[i].dy += (DELTAT * accel.Y); // stop dead so it doesn't jitter when nearly still 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; } // move to new position dots[i].X += dots[i].dx; dots[i].Y += dots[i].dy; // get size of window 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; } // bounce of 3 walls (leave ceiling open) 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; } // move img to new position dots[i].obj.left = dots[i].X; dots[i].obj.top = dots[i].Y; } } // end code hiding --> </script><br />

Anular boton de la derecha.
<!-- Botón derecho del mouse --><br /> <br /> <script LANGUAGE="JavaScript1.1"> <!-- Adaptado por Tk: Compatible con IE y NS --> function derecha(e) { if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){ alert('Botón derecho inhabilitado') return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2)){ alert('Botón derecho inhabilitado') } } document.onmousedown=derecha </script><br />

Anular boton de la izquierda.
><!-- Botón izquierdo del mouse --><br /> <br /> <script LANGUAGE="JavaScript1.1"> <!-- Adaptado por Tk: Compatible con IE y NS --> function izquierda(e) { if (navigator.appName == 'Netscape' && (e.which == 1 || e.which == 2)){ alert('Botón izquierdo inhabilitado') return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 1)){ alert('Botón izquierdo inhabilitado') } } document.onmousedown=izquierda </script><br />

Anular boton de la derecha e izquierda.
<!-- Botón izquierdo y derecho del mouse --><br /> <br /> <script LANGUAGE="JavaScript1.1"> <!-- Adaptado por Tk: Compatible con IE y NS --> function ambos(e) { if (navigator.appName == 'Netscape' && (e.which == 1 || e.which == 3 || e.which == 2)){ alert('Los botones del mouse han sido inhabilitados') return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 1 || event.button == 2)){ alert('Los botones del mouse han sido inhabilitados') } } document.onmousedown=ambos </script><br />


ALGUNAS RECOMENDACIONES PARA INCLUIR LOS CÓDIGOS

Debes copiar el contenido de los cuadros de textos (CTRL + C) y luego pegarlo en tu editor de HTML ( CRTL + V). Normalmente si es un editor gráfico (tipo FrontPage o Nestcape composer) será muy sencillo; vas a Insertar código HTML y lo pegas allí; por defecto te lo pega entre las etiquetas ; la mayoria de los que tenemos incluidos en nuestra página, y por norma general, van incluidos ahí, por lo que no deberás hacer más; pero hay partes de código, o a veces incluso todo el código (esta comentado en el mismo código, ya que aparece entre dos etiquetas distintas a ) deberás insertarlo en donde el código te indique (normalmente entre las etiquetas ). Para incluirlo allí, sólo debes cortar el código correspondiente a esta parte de las etiquetas y pegarlo en su sitio.
Por último, y si se necesita, sustituye los parámetros de ejemplos por los tuyos (Links, fuentes...) y a funcionar. Te recomendamos que los pruebes primero en una página nueva, para que te familiarices con su funcionamiento, y posteriormente los adaptes a lo que busques y lo pegues en tu página.

Botones de navegacion.

Botones para la navegacion de tu web.

Este código crea unos botones de navegación: atrás, arriba y adelante.
También puedes usar solo el botón Top para subir arriba de cada página.
Lo puedes pegar tantas veces quieras en la misma página.

Copia y Pega el siguiente código en tu vista HTML en el lugar donde quieras que aparezcan.

<table border="0" bgcolor="#FFCC66"><tr> <td align="center"><br /> <input type="button" value=" << " onclick="javascript:window.history.go(-1);"><br /> <input type="button" value="Top" onclick="document.location='#top';"><br /> <input type="button" value=" >> " onclick="javascript:window.history.go(1);"></td> </tr> </table><!-- End Navigation -->

Ejemplo: aqui no podrán apreciar el antes y despues, pero si el boton de ir arriba.

Efecto de luz en la imagen.

Efecto muy bueno para tus imagenes.

Este código crea un tipo de luz como una linterna en el puntero del ratón.


Copia y Pega el siguiente código dentro de las etiquetas <head> y </head> en vista HTML de tu pagina web.
 
<style>
<!--#myimage{filter:light}-->
</style>

Y este otro lo pones dentro del <body>

<body bgcolor="#000000">
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
<img id="myimage" src="images/bola2.jpg" width="230" height="230">
<script language="JavaScript1.2">
s = 50; // the size of the spotlight
vp = 10; // the visibility percent of the picture
startx = 0; // the top position of your sportlight into the image (on start)
starty = 0; // the left position of your spotlight into the image (on start)
var IE = document.all?true:false
function moveL()
{xv = tempX; yv = tempY; myimage.filters.light.MoveLight(1,xv,yv,s,true);}
if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
function getMouseXY(e) {tempX = event.offsetX
tempY = event.offsetY
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{moveL();}
return true
}
var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
</script>

Puedes editar la linea de color rojo.
Cambiando la URL de la imagen, y tambien la altura y el ancho.

Mensaje al entrar y salir de la pagina.

Les traigo aqui un codigo para que cuando un visitante entre o salga de tu pagina web se abra una ventana emergente con un saludo.

Debes sustituir el primer <body> por el siguiente codigo en la vista HTML

<BODY onLoad="alert('Bienvenido a mi web');" onUnLoad="confirm('Gracias por tu visita, espero que no sea la última');">


Puedes editar los mensajes a tu gusto.

Slider con entradas del blog.

Gadget que muestra entradas en slider.

Este codigo es muy interesante, se trata de un slider que muestra entradas de tu blog en forma aleatoria, muy bueno para llamar la atencion de los visitantes y retenerlos un poco mas.

Para instalarlo sigue los siguientes pasos:

1) Ves a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript. En él pega el siguiente código:

<style type="text/css"><br /><br />.gfg-root {<br /><br />width : 100%;<br /><br />height : auto;<br /><br />position : relative;<br /><br />overflow : hidden;<br /><br />text-align : center;<br /><br />font-family: "Arial", sans-serif;<br /><br />font-size: 15px;<br /><br />border: 1px solid #BCCDF0;<br /><br />}<br /><br /><br /><br />.gfg-title {<br /><br />font-size: 24px;<br /><br />font-weight : bold;<br /><br />color : #3366cc;<br /><br />background-color: #E5ECF9;<br /><br />line-height : 1.4em;<br /><br />overflow : hidden;<br /><br />white-space : nowrap;<br /><br />}<br /><br /><br /><br />.gfg-title a {<br /><br />color : #3366cc;<br /><br />}<br /><br /><br /><br />.gfg-subtitle {<br /><br />font-size: 20px;<br /><br />font-weight : bold;<br /><br />color : #3366cc;<br /><br />background-color: #E5ECF9;<br /><br />line-height : 1.4em;<br /><br />overflow : hidden;<br /><br />white-space : nowrap;<br /><br />margin-bottom : 0px;<br /><br />}<br /><br /><br /><br />.gfg-subtitle a {<br /><br />color : #3366cc;<br /><br />display:none !important;<br /><br />}<br /><br /><br /><br />.gfg-entry {<br /><br />background-color : white;<br /><br />width : 100%;<br /><br />height : 6.9em;<br /><br />position : relative;<br /><br />overflow : hidden;<br /><br />text-align : left;<br /><br />margin-top : 3px;<br /><br />}<br /><br /><br /><br />/* To allow correct behavior for overlay */<br /><br />.gfg-root .gfg-entry .gf-result {<br /><br />position : relative;<br /><br />background-color : white;<br /><br />width : auto;<br /><br />height : 100%;<br /><br />padding-left : 20px;<br /><br />padding-right : 5px;<br /><br />}<br /><br /><br /><br />.gfg-list {<br /><br />position : relative;<br /><br />overflow : hidden;<br /><br />text-align : left;<br /><br />margin-bottom : 5px;<br /><br />display:none !important;<br /><br />}<br /><br /><br /><br />.gfg-listentry {<br /><br />line-height : 1.5em;<br /><br />overflow : hidden;<br /><br />white-space : nowrap;<br /><br />text-overflow : ellipsis;<br /><br />-o-text-overflow : ellipsis;<br /><br />padding-left : 15px;<br /><br />padding-right : 5px;<br /><br />margin-left : 5px;<br /><br />margin-right : 5px;<br /><br />}<br /><br /><br /><br />.gfg-listentry-odd {<br /><br />background-color : #F6F6F6;<br /><br />}<br /><br /><br /><br />.gfg-listentry-even {<br /><br />}<br /><br /><br /><br />.gfg-listentry-highlight {<br /><br />background-image : url('garrow.gif');<br /><br />background-repeat: no-repeat;<br /><br />background-position : center left;<br /><br />}<br /><br /><br /><br />/*<br /><br />* FeedControl customizations.<br /><br />*/<br /><br /><br /><br />.gfg-root .gfg-entry .gf-result .gf-title {<br /><br />font-size: 24px;<br /><br />line-height : 1.2em;<br /><br />overflow : hidden;<br /><br />white-space : nowrap;<br /><br />text-overflow : ellipsis;<br /><br />-o-text-overflow : ellipsis;<br /><br />margin-bottom : 2px;<br /><br />}<br /><br /><br /><br />.gfg-root .gfg-entry .gf-result .gf-snippet {<br /><br />height : 3.8em;<br /><br />color: #000000;<br /><br />margin-top : 3px;<br /><br />}<br /><br /><br /><br />/*<br /><br />* Easy way to get horizontal mode, applicable via js options to gadget.<br /><br />*/<br /><br /><br /><br />.gfg-horizontal-container {<br /><br />position : relative;<br /><br />}<br /><br /><br /><br />.gfg-horizontal-root {<br /><br />height : 1.5em;<br /><br />_height : 100%;<br /><br />position : relative;<br /><br />white-space : nowrap;<br /><br />overflow : hidden;<br /><br />text-align : center;<br /><br />font-family: "Arial", sans-serif;<br /><br />font-size: 13px;<br /><br />border: 1px solid #AAAAAA;<br /><br />padding : 5px;<br /><br />margin-right : 80px;<br /><br />}<br /><br /><br /><br />.gfg-horizontal-root .gfg-title {<br /><br />font-weight : bold;<br /><br />background-color: #FFFFFF;<br /><br />line-height : 1.5em;<br /><br />overflow : hidden;<br /><br />white-space : nowrap;<br /><br />float : left;<br /><br />padding-left : 10px;<br /><br />padding-right : 12px;<br /><br />border-right: 1px solid #AAAAAA;<br /><br />}<br /><br /><br /><br />.gfg-horizontal-root .gfg-title a {<br /><br />color : #444444;<br /><br />text-decoration : none;<br /><br />}<br /><br /><br /><br />.gfg-horizontal-root .gfg-entry {<br /><br />width : auto;<br /><br />height : 1.5em;<br /><br />position : relative;<br /><br />overflow : hidden;<br /><br />text-align : left;<br /><br />margin-top : 0px;<br /><br />margin-left : 0px;<br /><br />padding-left : 10px;<br /><br />}<br /><br /><br /><br />/* To allow correct behavior for overlay */<br /><br />.gfg-horizontal-root .gfg-entry .gf-result {<br /><br />position : relative;<br /><br />background-color : white;<br /><br />width : 100%;<br /><br />height : 100%;<br /><br />line-height : 1.5em;<br /><br />overflow : hidden;<br /><br />white-space : nowrap;<br /><br />}<br /><br /><br /><br />.gfg-horizontal-root .gfg-list {<br /><br />display : none;<br /><br />}<br /><br /><br /><br />/*<br /><br />* FeedControl customizations.<br /><br />*/<br /><br /><br /><br />.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,<br /><br />.gfg-horizontal-root .gfg-entry .gf-result .gf-author {<br /><br />display : none;<br /><br />}<br /><br /><br /><br />.gfg-horizontal-root .gfg-entry .gf-result .gf-title {<br /><br />color: #0000cc;<br /><br />margin-right : 3px;<br /><br />float : left;<br /><br />}<br /><br /><br /><br />.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {<br /><br />float : left;<br /><br />}<br /><br /><br /><br />.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,<br /><br />.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {<br /><br />display : block;<br /><br />color: #AAAAAA;<br /><br />}<br /><br /><br /><br />.gfg-branding {<br /><br />white-space : nowrap;<br /><br />overflow : hidden;<br /><br />text-align : left;<br /><br />position : absolute;<br /><br />right : 0px;<br /><br />top : 0px;<br /><br />width : 80px;<br /><br />}<br /><br /><br /><br />.gfg-collapse-open, .gfg-collapse-closed {<br /><br />background-repeat : no-repeat;<br /><br />background-position : center;<br /><br />cursor : pointer;<br /><br />float : right;<br /><br />width : 17px;<br /><br />height : 20px;<br /><br />}<br /><br /><br /><br />.gfg-collapse-open {<br /><br />background-image : url('arrow_open.gif');<br /><br />}<br /><br /><br /><br />.gfg-collapse-closed {<br /><br />background-image : url('arrow_close.gif');<br /><br />}<br /><br /><br /><br />.gfg-collapse-href {<br /><br />float : left;<br /><br />}<br /><br /><br /><br />.clearFloat {<br /><br />clear : both;<br /><br />}<br /><br />#feedGadget {<br /><br />margin-top : 5px;<br /><br />margin-left: auto;<br /><br />margin-right: auto;<br /><br />width : 520px;<br /><br />font-size: 10px;<br /><br />color: #9CADD0;<br /><br />}<br /><br /></style><br /><br /><noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Hacks</a></noscript><br /><br /><script src="http://www.google.com/jsapi/?key=internal-sample" type="text/javascript"></script><br /><br /><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script><br /><br /><br /><br /><script type="text/javascript"><br /><br /><br /><br />function showGadget() {<br /><br />var feeds = [<br /><br />{title:'title',<br /><br />url:'http://www.TUBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},<br /><br /><br /><br />];<br /><br /><br /><br />new GFdynamicFeedControl(feeds, 'feedGadget',<br /><br />{numResults : 1000, stacked : true,<br /><br />title: "Entradas destacadas"});<br /><br />}<br /><br />google.load("feeds", "1");<br /><br />google.setOnLoadCallback(showGadget);<br /><br /></script><br /><br /><noscript><a href="http://bibliotutos.blogspot.com/" target="_blank">Bibliotutos</a></noscript><br /><br /><div id="feedGadget">Cargando...</div><br /><br />

Sustituye donde dice TUBLOG por el nombre de tu blog y luego pon a tu gusto el nombre de este gadget en Entradas destacadas. Si deseas modificar el tamaño, cámbialo en donde dice 520px.

Código extraído de anshuldudeja.com

Boton flotante de Facebook.

Enlaza a Facebook con un boton flotante.

Aqui les traigo un codigo para poner un boton flotante en el blog que enlace con tu perfil en Facebook, para que los visitantes puedan unirse como amigos.

Para colocar este badge de Facebook en tu blog, entra a Diseño > Edición de HTML y antes de /body esto:

<a href="http://www.facebook.com/usuario" target="'_blank'" title="'Sígueme"><img src="http://i46.tinypic.com/5p0l1s.png" style="'display:scroll;position:fixed;bottom:225px;right:0px'/" /></a>

Sólo cambia tu nombre de usuario y listo.
En esta ocasión sólo hice un diseño del botón pues pensé que el color clásico de Facebook es muy distintivo y no necesita muchas variantes, pero si quieres cambiar el badge por un ícono u otra imagen cambia la URL de la imagen por la tuya y listo.

Links y Banners en movimiento.

Movimiento para links y banners en tu sitio web.

Este truco les dará movimiento a tus links estilo marquesina, y hará que el link se detenga cuando el mouse pasa sobre él. Lo haremos de dos formas, una con links de texto y otra con imágenes.

Para los links de texto el código es el siguiente:

<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="1" onmouseout="this.scrollAmount='2'"><br /> <br /> <a href="URL">Nombre del enlace 1</a><br /> <br /> <br /> <a href="URL">Nombre del enlace 2</a><br /> <br /> <br /> <a href="URL">Nombre del enlace 3</a><br /> <br /> </marquee><br /> <br />

Para los links con imágenes el código es el siguiente:

<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="1" onmouseout="this.scrollAmount='2'"><br /> <br /> <a href="URL"><img src="URL" /></a><br /> <br /> <br /> <a href="URL"><img src="URL" /></a><br /> <br /> <br /> <a href="URL"><img src="URL" /></a><br /> <br /> </marquee><br /> <br />

Personalización:
Debes cambiar los datos en color rojo por los tuyos.
marquee direction="up" es la dirección a donde se mueve, up arriba, down abajo, right derecha, left izquierda.
width:200px;height:150px; es el tamaño del cuadro donde aparecen los links
border:1px solid #ccc; es el ancho y color del borde.
scrollamount="1" es la velocidad con la que se mueven los links, números más altos dará mayor velocidad.

El resultado es este:



Aqui

pones el texto

NO OLVIDES COMENTAR

Frases aleatorias para tu Blog.

Script de frases aleatorias.

Este es un script sencillo que permite poner frases aleatorias en el blog, puede usarse para poner mensajes de bienvenida, recordatorios, citas célebres o lo que se te ocurra. La frase cambia cada que se recarga la página y los mensajes se distribuyen al azar.

Para ponerlo en tu blog, entra a Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y ahí pega esto:

<script language="JavaScript"> frases = new Array() frases[0] = "Aqui va la Frase1" frases[1] = "Aqui va la Frase2" frases[2] = "Aqui va la Frase3" frases[3] = "Aqui va la Frase4" frases[4] = "Aqui va la Frase5" frases[5] = "Aqui va la Frase6" aleatorio = Math.random() * (frases.length) aleatorio = Math.floor(aleatorio) document.write(frases[aleatorio]) </script><br />

Sólo cambia lo que dice "Aqui va la frase" por las frases que vayas a utilizar, puedes agregar más frases, sólo repite esa línea las veces que quieras.

Las frases aparecen al azar por lo que el orden de aparición siempre será distinto cada que se entre a la página.
Una vez que lo pongas presiona F5 para recargar el blog y ver una frase distinta.

Diccionario en tu web

Un bonito diccionario para tu web.

Copia y pega el siguiente codigo:


<img src="http://img503.imageshack.us/img503/9426/librosib5.jpg" _fcksavedurl="http://img503.imageshack.us/img503/9426/librosib5.jpg" align="left" /> <div style="padding:0px 0px 0px 35px;" align="left"> <script type="text/javascript"><br /><br /><br />function frm_diccionario(form) {<br /><br /><br /><br /><br /><br />if (form.palabra.value != '') {<br /><br /><br />if (form.donde[0].checked) {<br /><br /><br />document.lengua.LEMA.value = form.palabra.value;<br /><br /><br />document.lengua.submit();<br /><br /><br />}<br /><br /><br />if (form.donde[1].checked) {<br /><br /><br />document.sinoni.pb.value = form.palabra.value;<br /><br /><br />document.sinoni.submit();<br /><br /><br />}<br /><br /><br />if (form.donde[2].checked) {<br /><br /><br />document.caste.spen.value = form.palabra.value;<br /><br /><br />document.caste.submit();<br /><br /><br />}<br /><br /><br />if (form.donde[3].checked) {<br /><br /><br />document.ingles.tranword.value = form.palabra.value;<br /><br /><br />document.ingles.submit();<br /><br /><br />}<br /><br /><br />}<br /><br /><br />}<br /><br /><br /></script> <form name="lengua" action="http://buscon.rae.es/draeI/SrvltGUIBusUsual" method="post" target="_blank" style="margin: 0px;"> <input value="cara" name="LEMA" type="hidden"> <input name="TIPO_HTML" value="2" type="hidden"> </form> <form name="sinoni" action="http://tradu.scig.uniovi.es/sinon.cgi" enctype="application/x-www-form-urlencoded" method="post" target="_blank" style="margin: 0px;"> <input name="pb" type="hidden"> <input name="np" value="5" type="hidden"> </form> <form name="caste" action="http://wordreference.com/es/en/translation.asp" method="get" target="_blank" style="margin: 0px;"> <input name="spen" type="hidden"> </form> <form name="ingles" action="http://wordreference.com/es/translation.asp" method="get" target="_blank" style="margin: 0px;"> <input name="tranword" type="hidden"> </form> <form name="diccionario" onsubmit_fckprotectedatt=" onsubmit=" action="" method="post" target="_blank" style="margin: 0px;"> <input name="palabra" style="width: 120px;" type="text"><br /> <input class="radioboton" name="donde" value="lengua" id="blengua" checked="checked" type="radio"> <label for="blengua"> L. Española</label><br /> <input class="radioboton" name="donde" value="sinoni" id="bsinoni" type="radio"> <label for="bsinoni"> Sinónimos</label><br /> <input class="radioboton" name="donde" value="anton" id="banton" type="radio"> <label for="banton"> Español - Inglés</label><br /> <input class="radioboton" name="donde" value="ingles" id="bingles" type="radio"> <label for="bingles"> Inglés - Español</label><br /> <div class="boton"><a href="javascript:frm_diccionario(document.diccionario)" _fcksavedurl="javascript:frm_diccionario(document.diccionario)" class="boton"><b>Buscar</b></a></div> </form> </div>

Curso rapido de CSS.

Aqui les traigo cuatro videos tutoriales para aprender a manejar algo se CSS, estan muy buenos, espero que les sean de utilidad.

01- ESTRUCTURA.



02- SELECTORES Y DECLARADORES.



03- ID & PSEUDOCLASES.



04- SELECTORES CONTEXTUALES Y HERENCIAS.