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

Traductor con banderas animadas para tu blog o web.

Traductor para web o blog muy vistoso.

Si tú sitio es frecuentemente visitado por usuarios que no hablan el Español, acá les tengo un traductor google pero con banderas animadas, un atractivo recurso que a diferencia de otros traductores no son imágenes estáticas, son gif de cada bandera que representa un idioma, este traductor posee además traducciones en doce idiomas principales, desde Chino, Francés, Holandés, Alemán, Portugués, Árabe, Japones, Italiano, Inglés, Español. Koreano y Ruso. Solo te pido que no modifiques el código para que funcione.


ACÁ ESTÁ LA VISTA PREVIA DE COMO QUEDARÍA TÚ TRADUCTOR

Para agregarlo en tu sitio solo debes copiar y pegar el código HTML de bajo

<center> <center> <br /> <style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style><br /> <div> <br /> <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;" rel="nofollow" target="_blank" title="English"><img align="absBottom" alt="English" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Gran-Bretana.gif" style="cursor: pointer; margin-right: 8px;" title="English" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;" rel="nofollow" target="_blank" title="French"><img align="absBottom" alt="French" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Francia.gif" style="cursor: pointer; margin-right: 8px;" title="French" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;" rel="nofollow" target="_blank" title="German"><img align="absBottom" alt="German" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Alemania.gif" style="cursor: pointer; margin-right: 8px;" title="German" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;" rel="nofollow" target="_blank" title="Spain"><img align="absBottom" alt="Spain" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Espana.gif" style="cursor: pointer; margin-right: 8px;" title="Spain" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;" rel="nofollow" target="_blank" title="Italian"><img align="absBottom" alt="Italian" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Italia.gif" style="cursor: pointer; margin-right: 8px;" title="Italian" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;" rel="nofollow" target="_blank" title="Dutch"><img align="absBottom" alt="Dutch" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Paises%20Bajos.gif" style="cursor: pointer; margin-right: 8px;" title="Dutch" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;" rel="nofollow" target="_blank" title="Russian"><img align="absBottom" alt="Russian" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Rusia.gif" style="cursor: pointer; margin-right: 8px;" title="Russian" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;" rel="nofollow" target="_blank" title="Portuguese"><img align="absBottom" alt="Portuguese" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Portugal.gif" style="cursor: pointer; margin-right: 8px;" title="Portuguese" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;" rel="nofollow" target="_blank" title="Japanese"><img align="absBottom" alt="Japanese" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Japon.gif" style="cursor: pointer; margin-right: 8px;" title="Japanese" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;" rel="nofollow" target="_blank" title="Korean"><img align="absBottom" alt="Korean" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Corea%20del%20Sur.gif" style="cursor: pointer; margin-right: 8px;" title="Korean" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;" rel="nofollow" target="_blank" title="Arabic"><img align="absBottom" alt="Arabic" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Arabia%20Saudi.gif" style="cursor: pointer; margin-right: 8px;" title="Arabic" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absBottom" alt="Chinese Simplified" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/China.gif" style="cursor: pointer; margin-right: 8px;" title="Chinese Simplified" width="24" /></a> </div> <br /> <div 0px="" 0pxãƒâ¢??="" 3px="" style="margin: 8px;">  </div> </center> </center>

Aardvark, analiza la estructura de una página web.

Herramienta para consulta rápida de los elementos de un website.

Aardvark es un complemento para el navegador Firefox con el que lograremos se resalten los elementos HTML de la página y su id, a medida que pasamos el ratón sobre ellos.
Además seleccionando determinadas teclas podremos realizar algunas acciones como eliminar elementos de la página, pegarlos en otros lugares del código, eliminar los atributos de anchura de los elementos, cambiar los colores para dejarlos en blanco y negro, ver el código fuente o aislar un elemento, entre otras posibilidades.
Este plugin puede resultar interesante para desarrolladores y diseñadores que deseen ver como están distribuidos los elementos en una página web además de para llevar determinadas funciones básicas para controlar un site .
Una vez instalado Aardvark podremos ejecutarla haciendo clic con el botón derecho y seleccionando en el menú contextual Start Aardvark.
Este complemento nos permite, además, hacer que las páginas web se puedan imprimir con mayor facilidad o incluso hacerlas más legibles al eliminar determinados elementos.
Interesados pueden acceder a más información de Aardvark desde karmatics así como a su descarga desde la página de complementos de Mozilla.
Los usuarios de Firefox 5 pueden acceder a una versión de Aardvark que soporta este último lanzamiento del navegador de la Fundación Mozilla.

ClustrMaps, contador web gratuito.

Contador para saber la procedencia de los visitantes de tu web.

Quiero hablar sobre ClustrMaps, un novedoso servicio de contador, que tiene la particularidad que sirve para conocer la procedencia de los visitantes de tu web. Es un servicio gratuito que puedes incorporar en cualquier web, sin prácticamente conocimientos HTML ni ningún conocimiento de programación.
El sistema lo ofrece una página web que se puede acceder a través de la URL: http://clustrmaps.com/
Están en fase Beta, lo que quiere decir que todavía están desarrollando o mejorando el sistema, pero ya lo podemos incorporar en nuestra página web. Para conseguir un contador nos tenemos que registrar en dicha página. No nos piden ninguna información personal, salvo la URL donde vamos a incorporar el sistema y nuestro email. Nos enviarán la clave para acceder a los servicios a nuestro correo electrónico. Una vez la recibamos podremos acceder a la página a través de la dirección de nuestro sitio y la clave.
Una vez dentro nos darán un código fuente que podemos copiar y pegar en la página. Tienen unas cuantas versiones del código, que podemos elegir la que mejor se ajuste a nuestras necesidades. Tienen una versión incluso para utilizar si nuestra página está alojada en un servidor como MySpace.

Conversor de entidades HTML

Herramienta online permite traducir un texto a su correspondiente entidad HTML.

Los caracteres especiales como letra ñ, signo de puntuación, letras con tilde o diéresis, o símbolos del lenguaje, se deben convertir en entidad HTML para mostrarse correctamente en un navegador. Así por ejemplo, á equivale a á , ¿ equivale a ¿ y ñ equivale a ñ.
No obstante, puede resultar algo pesado escribir un texto lleno de caracteres especiales ya que tendremos que recordar todas las entidades HTML. Es por ello que presentamos este conversor online en el que simplemente con escribir el texto lleno de caracteres especiales y de forma automática se convertirán a sus respectivas entidades HTML.
Esta sencilla aplicación no requiere registro para su uso y es totalmente gratuita.
Interesados pueden acceder a este conversor de texto a entidades HTML desde chuano.net.

HTML5rocks, nueva plataforma de Google

 Google reúne variados recursos para desarrolladores dedicados a tecnologías HTML5.

El equipo de desarrollo de Google Chrome ha creado un portal llamado HTML5rocks con tutoriales, demos y material acerca de HTML5 con el que la compañía líder de Internet muestra su apoyo a la implementación de esta tecnología con el objetivo de convertirla en un nuevo estándar para la web.
Con la creación de HTML5rocks, la quinta versión del lenguaje HTML vuelve a recibir un explicito apoyo por parte de Google, que se suma al recibido por Microsoft, Apple, Youtube o La Fundación Mozilla.
HTML5rocks, íntegramente en inglés, se compone de varias secciones principales:
La presentación interactiva, para demostrar características del HTML5
Un editor en línea donde podrás escribir, editar y ejecutar código HTML5,
Tutoriales HTML 5
Recursos sobre características específicas HTML5.
Además esta plataforma reúne otros recursos adicionales como una serie de APIs que se definen fuera de las especificaciones del W3C.

Colección de menus CSS y HTML.

Only CSS Menu es una interesante y completa galería de menús libres desarrollados con CSS y HTML.


Only CSS Menu ofrece una variada colección de menús verticales, horizontales o con varios niveles de navegación que podrán ser implementados sin disponer de grandes conocimientos en CSS o HTML.
Al seleccionar cualquiera de los menús ofrecidos por esta plataforma obtendremos además de una muestra del resultado final, el código HTML, el código CSS, la compatibilidad con los principales navegadores y un enlace para la descarga del recurso.
Only CSS Menu también permite personalizar los menús ofrecidos en 4 sencillos pasos. El uso de estos menús en CSS es libre tanto para un uso personal como profesional.
Interesados pueden acceder a Only CSS Menu de forma completamente gratuita y sin necesidad de registro desde http://www.onlycssmenu.com/.

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.

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.

Messenger en tu blog.

Como poner Messenger en el blog.

Es una realidad que Messenger es el cliente líder en mensajería instantánea, por lo que su uso es sumamente importante a la hora de querer estar comunicados.
Es por ello que muchos bloggers desean tener comunicación con sus lectores vía Messenger, ya sea para dar asesorías, responder preguntas o simplemente conversar.
Así que vamos a poner el Messenger en el blog para que puedas estar siempre en contacto con tus lectores.


-Primero inicia sesión en Windows Live Messenger e ingresa a la Configuración web.
-Marca la casilla: Permitir que los usuarios de sitios web vean mi estado y me envíen mensajes.
-Guarda los cambios y selecciona la pestaña Crear HTML.
-A continuación selecciona una opción, puedes elegir tener la ventana del Messenger incrustada o un botón que permita abrir una ventana emergente con el Messenger. La opción tres no la selecciones ya que falla mucho para actualizar el estado.
-Ya que has elegido la opción que más te guste copia el código HTML que se encuentra abajo.
-Ahora entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega el código anterior.

Listo, podrás tener tu Messenger en tu blog; tus lectores podrán platicar contigo desde tu blog y tú podrás hacerlo desde el Messenger de tu computadora. Siempre que estés conectado tus lectores podrán ver en tu página que te encuentras en línea y podrán charlar contigo. No es necesario que ellos estén en tu lista de contactos, aun así podrán comunicarse contigo, incluso podrán conversar contigo de forma anónima si lo desean.
Por otra parte, los datos del usuario no se quedan registrados por lo que es una forma segura de iniciar sesión, además de que ningún otro lector que se encuentre en el blog podrá leer la conversación de los demás, excepto la que él mantenga contigo.


NOTA:Si eliges la ventana de mensajería instantánea, verás que abajo puedes elegir el color del gadget y las medidas de la ventana, sólo ingresa los valores correspondientes. Por defecto está en 300 x 300 px, pero esta medida generalmente es muy grande para la sidebar.

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

Reproductor de MP3.

Navegando por la red me encontré con un reproductor de música mp3 en formato flash que me pareció muy bueno el diseño.


Este reproductor al igual que el Dewplayer es muy útil para agregar audio a nuestros posts o para agregar música de fondo al blog.


Hay tres versiones de este reproductor, la normal, maxi y multi.
Para usarlo debes tener tu música en formato mp3 subida en Internet, ya que la tengas lista, entra a Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y ahí pega el código del reproductor que te guste:

Version normal:
<img src="http://www.blogger.com/img/object_element.gif" style="height: 20px; width: 200px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_0" data-original-id="BLOGGER_object_0" /><br />

Version Maxi:
<img src="http://www.blogger.com/img/object_element.gif" style="height: 20px; width: 200px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_1" data-original-id="BLOGGER_object_1" /><br />

Version multi:
<img src="http://www.blogger.com/img/object_element.gif" style="height: 100px; width: 200px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_2" data-original-id="BLOGGER_object_2" />

Sólo hay que editar donde dice URL de la canción , debes poner la URL en formato mp3 teniendo en cuenta que el http:// no se pone, pues el código ya lo tiene como http%3A//

Si quisieras que el audio se reproduzca automáticamente entonces al final de la URL agrega esto:

&autoplay=1

Quedaría así:
http%3A//mimusica.com/cancion.mp3&autoplay=1

En la versión multi para agregar más canciones hay que agregar al final de cada URL lo siguiente más la URL de la canción:

|http%3A//

Por ejemplo:
http%3A//URL de la canción UNO.mp3|http%3A//URL de la canción DOS.mp3|http%3A//URL de la canción TRES.mp3


El reproductor es muy sencillo, útil y funciona con todos los navegadores de Internet. Si quisieras cambiar los colores del reproductor, botones o incluso agregarle una imagen de fondo puedes hacerlo directo en la página del reprodcutor, sólo haz los cambios que quieras y copia el código que pegarás en tu blog.

Efecto ampliar imagen.

Bueno este codigo consiste en que al aplicarlo en nuestras webs, se ampliara la imagen al tamaño que se desee con un solo clic y sin salir de la pagina.Agreguen este primero este codigo en algun lugar dentro de BODY.

<script type='text/javascript'> var nW,nH,oH,oW; function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){ oW=whichImage.style.width;oH=whichImage.style.height; if((oW==iWideLarge)||(oH==iHighLarge)){ nW=iWideSmall;nH=iHighSmall; }else{ nW=iWideLarge;nH=iHighLarge; } whichImage.style.width=nW;whichImage.style.height=nH; } </script>

Luego donde quieran mostrar la imagen, agreguen este otro code:

<img src="URL_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);" />

Donde ancho1 y alto1 son el tamaño de la imagen inicial, la que vemos en la página y ancho2 y alto2 son el tamaño de la imagen ampliada, la que veremos al hacer click en la imagen.
La función puede usarse en cualquier imagen y en varias en la misma página.

Codigo paginacion.

Codigo Paginación (Editar Links #) Código:

<style type="text/css"> /*Credits: Dynamic Drive CSS Library */ .pagination{ padding: 2px; } .pagination ul{ margin: 0; padding: 0; text-align: left; /*Set to "right" to right align pagination interface*/ font-size: 16px; } .pagination li{ list-style-type: none; display: inline; padding-bottom: 1px; } .pagination a, .pagination a:visited{ padding: 0 5px; border: 1px solid #9aafe5; text-decoration: none; color: #2e6ab1; } .pagination a:hover, .pagination a:active{ border: 1px solid #2b66a5; color: #000; background-color: #FFFF80; } .pagination a.currentpage{ background-color: #2e6ab1; color: #FFF !important; border-color: #2b66a5; font-weight: bold; cursor: default; } .pagination a.disablelink, .pagination a.disablelink:hover{ background-color: white; cursor: default; color: #929292; border-color: #929292; font-weight: normal !important; } .pagination a.prevnext{ font-weight: bold; } </style> Codigo Paginación (Editar Links #) Código: <div class="pagination"><ul><li><a href="#" _fcksavedurl="#" class="prevnext disablelink">« previous</a></li> <li><a href="#" _fcksavedurl="#" class="currentpage">1</a></li> <li><a href="#" _fcksavedurl="#">2</a></li> <li><a href="#" _fcksavedurl="#">3</a></li> <li><a href="#" _fcksavedurl="#">4</a></li> <li><a href="#" _fcksavedurl="#">5</a></li> <li><a href="#" _fcksavedurl="#">6</a></li> <li><a href="#" _fcksavedurl="#">7</a></li> <li><a href="#" _fcksavedurl="#">8</a></li> <li><a href="#" _fcksavedurl="#">9</a>...</li> <li><a href="#" _fcksavedurl="#">15</a></li> <li><a href="#" _fcksavedurl="#">16</a></li> <li><a href="#" _fcksavedurl="#" class="prevnext">next »</a></li> </ul></div>

Quedaria asi:

« previous 1 2 3 4 5 6 7 8 9 ... 15 16 next »

Cursos de HTML.

Aqui les dejo algunos enlaces hacia cursos de html gratuitos que he encontrado:

http://www.canalhtml.com/
http://www.etsit.upm.es/~alvaro/manual/manual.html http://www.ldc.usb.ve/~vtheok/webmaestro/
http://aprender-html.html.deeuropa.net/
http://www.ciudadfutura.com/cursohtml/
http://www.chez.com/samram/aprender.htm
http://www.fortunecity.es/help/html.shtml
http://html.conclase.net/
http://www.w3schools.com/html/
http://www.htmlcodetutorial.com/
http://www.2kweb.net/html-tutorial/

Logo para correo.

Si te gusta recibir correos electrónicos y quieres llamar la atención de tus lectores, tener una imagen atractiva te puede ayudar.
Es el típico botón que usan algunos blogs para mostrar la dirección de la casilla de su creador.
Si tienes tu correo en Yahoo! o Hotmail, obtener imágenes como esta es muy sencillo: sólo debes E-Mail Icon Generator y escoger la versión que corresponde.
Otras webs que ofrecen este tipo de servicio son : Mailonpix ; Hidetext ; Mask Email Image Generato; Gmail Signature Generator y E-mail Sigs (los ejemplos siguientes han sido realizados con ellos).




Para lograr que estos íconos lleven directamente al cibernauta a comunicarse contigo, debes insertar el código HTML correspondiente:

<a href="mailto:tumail@casilla.com"><br /> <br /> <img src="http://gsig.brightdev.com/3/mimail.jpg" /><br /> <br /> </a></br>



Donde dice tumail@casilla.com debes cambiarlo por tu casilla de email y en img src="" pones la URL que te entregará el sitio generador del logo, respectivamente. No es tan complicado. Si hasta yo lo logré en dos minutos.

Efecto buenisimo! Raspa para ver la imagen.

Este código sirve para poner una imagen oculta detrás de otra. Para verla, solo tienes que pasar el cursor sobre la imagen muchas veces, raspando, y verás la que hay detrás.
Coloca el código donde quieras que aparezca la imagen a cuadros para raspar
<script language="Javascript">image_width = ANCHODEIMAGEN;image_heigth = ALTODEIMAGEN;function scratch(){for(i = 0; i < (image_heigth/5); i++){for(j = 0; j < (image_width/5); j++){document.write("<img src="URL" style="position:absolute;top:" onmouseover="this.style.visibility="" onmouseout="this.style.visibility="" />")}}}</script><script language="Javascript">document.write('<div style="position:relative;width:'+image_width+';height:'+image_heigth+'"> ');document.write('<img src="URL DE IMAGEN" />')scratch();document.write('</div>');</script>