B de Blogger

La bandera Nacional Mexicana en HTML

2011-10-04T13:50:00.000-07:00

Muy sencillo de realizar el siguiente truco y se lleva acabo por medio de una tabla:

Ejemplo:

<table border="2" width="350" height="200"><tr height="80">
<td width="200"  bgcolor="#009900">&nbsp;</td>
<td bgcolor="#FFFFFF"><img src="Url-de-tu-imagen" /></td>
<td width="200"  bgcolor="#FF0000">&nbsp;</td>
</table>

Observaste bien, es una imagen el escudo.
Solo cambia el valor 400 de la url de la imagen por 98:
http://2.bp.blogspot.com/-wb1XMc0xmL4/TotvakB29II/AAAAAAAAGdk/vVFSRk3pgKo/s98/579px-Coat_of_arms_of_Mexico_svg.png

Como vez los experimentos del HTML, sencillos o no!

Marcos CSS

2011-09-28T14:35:00.000-07:00

Los marcos son muy prácticos y encajan en donde sea.
Un ejemplo muy sencillo es el siguiente:

CSS:

<style type="text/css">
p {
  font:60px/90px Helvetica;
  color: #2E2E2E;
  text-align: center;
  border: 10px inset #FFFFFF;
  margin: 0 0 20px 0;
  }
  
.grid_4 { width:300px; }
.grid_8 { width:620px; }
.grid_12 { width:940px; }

.column {
 margin: 0 10px;
 overflow: hidden;
 float: left;
 display: inline;
}
.row {
 width: 960px;
 margin: 0 auto;
 overflow: hidden;
}
.row .row {
 margin: 0 -10px;
 width: auto;
 display: inline-block;
} 
</style>

HTML:

<div class="row">
<div class="column grid_12"><p>12</p></div>
</div>
<div class="row">
<div class="column grid_8"><p>6</p>
<div class="row">
<div class="column grid_4"><p>3</p></div>
<div class="column grid_4"><p>3</p></div>
</div>
</div>
<div class="column grid_4"><p style="line-height: 222px;">6</p></div>
</div>

Puedes generar muchos mas en este sitio...solo elige el tamaño de los marcos, lo descargas y listo:

Hacer figuras geométricas con HTML

2011-09-20T17:29:00.000-07:00

Experimentando con un poco de HTML me salieron una serie de figuras como son un triángulo, trapecio, cuadrado etc,. Bueno ustedes verán los ejemplos a continuación:

<div style="background-color: transparent; font-family: Stencil; height: 0px; width: 200px; font-size: 20px; position: absolute; border-left:50px solid transparent; border-right:50px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #FF0000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

<div style="background-color: transparent; font-family: Stencil; height: 0px; width: 200px; font-size: 20px; position: absolute; border-left:50px solid transparent; border-right:0px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #FF0000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

<div style="background-color: transparent; font-family: Stencil; height: 0px; width: 200px; font-size: 20px; position: absolute; border-left:0px solid transparent; border-right:0px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #FF0000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

<div style="background-color: transparent; font-family: Stencil; height: 0px; width: 100px; font-size: 20px; position: absolute; border-left:0px solid transparent; border-right:0px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #FF0000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

<div style="background-color: transparent; font-family: none; height: 0px; width: 0px; font-size: 0px; position: absolute; border-left:100px solid transparent; border-right:100px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #FF0000;"></div>

<div style="background-color: transparent; font-family: Stencil; height: 0px; width: 200px; font-size: 20px; position: absolute; border-left:50px solid transparent; border-right:50px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #FF0000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<br><br><br>
<div style="background-color: transparent; font-family: Stencil; height: 0px; width: 200px; font-size: 20px; position: absolute; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid #FF0000; border-bottom:0px solid transparent;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

<div style="background-color: transparent; font-family: none; height: 0px; width: 0px; font-size: 0px; position: absolute; border-left:100px solid transparent; border-right:100px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #FF0000;"></div>
<br><br><br>
<div style="background-color: transparent; font-family: none; height: 0px; width: 0px; font-size: 0px; position: absolute; border-left:100px solid transparent; border-right:100px solid transparent; border-top:100px solid #FF0000; border-bottom:0px solid transparent;"></div>

<div style="background-color: transparent; font-family: none; height: 100px; width: 200px; font-size: 0px; position: absolute; border-left:200 dotted #FF0000; border-right:100px solid transparent; border-top:0px solid transparent; border-bottom:60px dotted #FF0000;"></div>

Icono del Escudo Nacional Mexicano

2011-09-20T08:46:00.000-07:00

Con motivo del 201 aniversario de la independencia de México realice un icono del escudo de la bandera mexicana con forma de ficha. Sus medidas son de 256x256px y por supuesto en formato PNG.

Imagen efecto hover con CSS

2011-07-03T13:59:00.000-07:00

El efecto hover en una imagen genera el cambio de una imagen por otra al colocar el puntero.

2 ejemplos de muestra:

Si das clic en la imagen ya no se cambiara.
Este es el CSS:

h1 a {
display: block;
width: 100px; /* Ancho de la imagen hover */
height: 100px; /* Alto de la imagen hover */
}
h1 a:hover, h1 a:focus, h1 a:active {
background: transparent url(Url-de-imagen-2) no-repeat;
}
h1 a:hover img, h1 a:focus img, h1 a:active img {
background: transparent;
visibility: hidden;
}

Lo colocas antes de ]]></b:skin>.
Y el siguiente HTML lo colocas en una entrada.

<h1>
<a href="#">
<img src="Url-de-imagen-1" width="100" height="100" />
</a>
</h1>

Ancho y alto de la imagen visible: width="100" height="100"

Editas también la url de tus dos imagenes para que sean del mismo tamaño:

Por ejemplo cambias: http://4.bp.blogspot.com/-veORv1FEoE4/TebBrjdZ-sI/AAAAAAAAGIc/dOIbQAFI09I/s400/B%2Bde%2Bblogger%2Blogo.png

por: http://4.bp.blogspot.com/-veORv1FEoE4/TebBrjdZ-sI/AAAAAAAAGIc/dOIbQAFI09I/s100/B%2Bde%2Bblogger%2Blogo.png

Como ves es muy sencillo de relizarle efecto hover a las imagenes.

Texto perspectiva con CSS

2011-06-30T14:34:00.000-07:00

El siguiente ejemplo es una forma de cómo crear una perspectiva con CSS:

B de blogger
B de blogger
B de blogger
B de blogger
B de blogger
B de blogger
B de blogger
B de blogger
B de blogger
B de blogger
B de blogger

CSS:

#textoperspectiva {
  margin: auto;
  width: 40em;
  font-size: 70%;
  line-height: 2.9em;
  max-width: 90%;
  text-align: left;
}
#textoperspectiva p span {
  font-size: 1.1em;
}

HTML:

<div id="textoperspectiva"><p>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger</span></span></span></span></span></span></span></span></span></span></p></div>

Burbujas con imagenes

2011-06-28T18:29:00.000-07:00

Una manera muy sencilla de hacer mensajes de burbujas es por medio de imágenes con texto incrustado sobre ellas, por ejemplo:

✰ Mensaje

♫ Mensaje

♥ Mensaje

Este seria el codigo:

<div style="background-image:url(Url-de-tu-imagen); font-family: Script MT Bold; font-size: 23pt; color: #000000; padding-left: 45px; padding-right: 45px; padding-top: 45px; padding-bottom: 45px; height:60px; width:110px; text-align: center;">Mensaje</div>

Si deseas obtener mas burbujas como las de los ejemplos, las puedes descargar aquí.

Texto shadow con CSS

2011-06-28T17:43:00.000-07:00

Los textos con sombras usando CSS se ven muy bien y por eso hoy les quiero dejar un código para hacer textos shadows.

Ejemplo:

Este es un ejemplo de texto shadow hecho con CSS.Este es un ejemplo de texto shadow hecho con CSS.

CSS (colócalo antes de ]]></b:skin>):

#textoshadow {
font-family: Arial; /* Tipo de letra */
position: relative; 
margin: auto; 
width: 50em; /* Ancho del parrafo */
height: 13.2em; /* Alto del parrafo */
padding: 5%; 
}
#textoshadow h2 { 
position: absolute; 
font-size: 350%; /* Tama;o de todo el texto */ 
color: #FFCC00; /* Color del texto amarillo */
top: 2px; /* Desplaza parrafo hacia la derecha */
left: 2px; /* Desplaza parrafo hacia la izquierda */
}
#textoshadow h2 span {
position: absolute;
color: #006600; /* Color del texto naranja */
top: -2px; /* Desplaza texto naranja hacia arriba */
left: -2px; /* Desplaza texto naranja hacia la izquierda */
}

HTML (colócalo en una entrada):

<div id="textoshadow">
<h2>Este es un ejemplo de texto shadow hecho con CSS.<span>Este es un ejemplo de texto shadow hecho con CSS.</span></h2> 
</div>

Botones de twitter

2011-06-24T13:49:00.000-07:00

Me gustan los iconos por eso ahora me di a la tarea de realizar 18 iconos de botones alargados brillantes de twitter con medidas 128x128px y en formato PNG.

Descargar

Espero y te sirvan en algo.

Iconos de ojos

2011-06-22T14:26:00.000-07:00

En un rato libre me puse a realizar dos iconos de ojos, uno de gato en color rojo y el otro de un humano, mas o menos me salieron espero y les sean de su agrado.

Los iconos se encuentran con medidas 256x256px y en formato PNG.

Lápiz vs Fotografía

2011-06-20T07:28:00.000-07:00

Ben Heine es un artista autodidacta que realizo una estupenda serie de imágenes mezcladas entre dos disciplinas como son el: dibujo y la fotografía, mezcla de imaginación y realidad.

900x599px

900x593px

1000x1019px

1000x704px

602x900px

950x632px

850x829px

900x599px

1000x666px

1000x727px

850x723px

1000x932px

1000x691px

Aves robóticas

2011-06-20T07:22:00.000-07:00

Al presentar en una entrada anterior una galería de imágenes de animales robóticos, de ellos me inspire y me decidí por hacer dos aves con un poco de apariencia robótica.
798x1024px

1024x683px

Las imágenes originales pertenecen a Da 100 fotos y a Deeezingner bliss

Iconos de twitter

2011-06-18T14:58:00.000-07:00

Twibies, es un sitio donde Gopal raju reunió una galería de 84 iconos del famoso pájaro azul de twitter.

Los iconos se encuentran en formato ICO y PNG.

Sin embargo a partir de ahora cuenta con tres temas para twitter.

Ojala y te sirvan en algo.

Foto manipulaciones

2011-06-07T13:21:00.000-07:00

Las manipulaciones son impresionantes y en Dragons canvas, es un sitio donde Kevin lo demuestra con realizar una serie de creativas manipulaciones para tu inspiracion.
Espero y las disfrutes.

802x800px

900x721px

466x640px

997x768px

969x800px

1066x800px

473x800px

551x800px

602x800px

378x717px

483x800px

900x729px

560x800px

560x800px

700x476px

700x525px

700x536px

1066x800px

Fondos lineales

2011-06-02T15:32:00.000-07:00

Stripe backgrounds, es un sitio que nos permitirá generar fondos lineales de colores para embellecer nuestro blog, escritorio o teléfono móvil.

Para generar un fondo solo introduce los códigos hexadecimales de colores en cada línea, escoges la resolución que desees, le das en descargar y listo.

Iconos en pixeles

2011-06-02T13:54:00.000-07:00

En el sitio de Icojoy se dieron la tarea de realizar 75 iconos en pixeles con tamaños 9x9px, 18x18px, 28x28px, en formato PNG, GIF y con colores rojo, naranja, azul, verde y gris.

Podrás encontrar iconos de: rss, alimentación, correo, búsqueda, lente, el voto, buena, mala favoritos, amor, añadir a los favoritos, casa, carro de compras, añadir al carrito de compras, comprar, la clave, inicio de sesión, bloqueo, seguridad, el usuario, cuenta, etiquetas, eliminar, basura, visita, sí, bien, volver a cargar, calendario, editar, lápiz, detener, atención, descarga, equipo, monitor, calculadora, móvil, teléfono inteligente, iPhone, teléfono, llamada, de llamada, un comentario, adentro, afuera , el hombre, las opciones, poner en marcha, por stand, bandera, marca, añadir, más, menos, abrir, cerrar, carpeta, las preferencias, mapa del sitio, información, documento, archivo, adjuntar, clip, derecha, abajo, izquierda, arriba, flechas, play, stop, pausa, siguiente, anterior, foward, hacia atrás, grabar, de bala, el sonido en, apagado, aumentar el volumen, descenso, la escritura, una nueva ventana, restaurar abajo, la escala, maximizar, minimizar, cerrar.

Descargar desde el sitio del autor

Estos iconos son libres de utilizar en cualquier tipo de proyecto de veces ilimitado.

Generador de CSS para texto

2011-06-01T15:44:00.001-07:00

CSS type set, es una herramienta practica que consiste en escribir un texto, darle un formato y mostrarte dependiendo del formato que le des, el código CSS en línea.

El formato que le podrás realizar al texto será:
Tipo de letra
Tamaño de texto
Color de texto y color de fondo del texto
Letra negrita
Letra cursiva
Letra subrayada
Letra tachada
Letra mayúscula
Letra mayúscula chica
Texto alineado hacia la izquierda
Texto alineado hacia el centro
Texto alineado hacia la derecha
Texto justificado
Distancia de las letras
Distancia de las palabras
Alineación del texto verticalmente

Ejemplo:

Generador de meta tags

2011-05-31T13:27:00.000-07:00

Para muchos de nosotros es importante que nuestro blog sea encontrado por los motores de búsqueda.
Existe la opción de introducir la Url de tu blog en:

Bing
Google
Troglog
Baidu

Pero creo que hay una mejor forma que es por medio de meta etiquetas o meta tags.
A lo mejor piensas que te enlazare a un sitio que genere meta tags pero porque no hacemos nuestro propio generador.
A continuación te muestro como hacerlo:
Primero te transladas a tu plantilla y buscas(Ctrl+F) la etiqueta </head>.
Ya que la encontraste coloca arriba el siguiente código Javascript quien hará el trabajo necesario para generar los meta tags:

<!--Generador de meta tags-->  
<script type='text/javascript'>

//<![CDATA[

//Character count script
function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}


//Meta tag generator
<!-- hide the script
function create(form) {
  if (confirm("Estas seguro(a)?")) {
    form.story.value = "Coloca los meta tags " +
      "después de la etiqueta <head>.nn"; 
    if (form.input1.value != "") {
      form.story.value +="<META NAME="title" CONTENT="" + 
      form.input1.value + "" />n";
    }
    if (form.input2.value != "") {
      form.story.value +="<b:if cond='data:blog.url == data:blog.homepageUrl'>n<META  NAME="Description" CONTENT="" + 
      form.input2.value + "" />n</b:if>n";
    }
    if (form.input3.value != "") {
      form.story.value +="<META NAME="Keywords" CONTENT="" + 
      form.input3.value + "" />n";
    }
    if (form.input4.value != "") {
      form.story.value +="<META NAME="Author" CONTENT="" + 
      form.input4.value + "" />n";
    }
    if (form.input5.value != "") {
      form.story.value +="<META NAME="Robots" CONTENT="" + 
      form.input5.options[form.input5.selectedIndex].value + "" />n";
    }
  }
}

function about() {

   msg=open("about.html","DisplayWindow","toolbar=no,width=280,height=420,directories=no,status=no,scro llbars=yes,resize=no,menubar=no");
}

// end hiding contents from old browsers  -->


//]]>
</script>

Ahora vamos a elementos HTML/Javascript e incrustamos el siguiente código HTML quien le dará forma y color a los recuadros y botones:

<form><table><tr><td>
Titulo:
</td><td><input type="text" name="input1" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px  'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>
Descripción:
</td><td><input type="text" name="input2" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px  'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>     
Palabras clave:
</td><td><input type="text" name="input3" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px  'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>
Autor(Opcional):
</td><td><input type="text" name="input4" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px  'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>
Robots (Opcional):
</td><td><select type="text" name="input5" size="1" style="color: #000000; border:1px solid #009900; font-family: 12px  'trebuchet ms',helvetica,sans-serif;"><option value="All" selected />All<option value="none" />None<option value="Index" />Index<option value="No Index" />No Index<option value="Follow" />Follow<option value="No Follow" />No Follow</select>
</td></tr></table> 
<textarea wrap name="story" style="background-image:url(Url-de-tu-imagen); color: #000000; border:1px solid #009900; font-family: 12px  'trebuchet ms',helvetica,sans-serif; width: 590px; height: 200px;"></textarea>
<input type="button" value="Crear meta tags" onclick="create(this.form)" style="background-color:#007000; color: #FFFFFF; border:1px solid #009900; font-family: 12px  'trebuchet ms',helvetica,sans-serif;" /> <input type="reset" value="Limpiar" style="background-color:#007000; color: #FFFFFF; border:1px solid #009900; font-family: 12px  'trebuchet ms',helvetica,sans-serif;" />
</form>

Solo edita los valores como tu decidas para adaptarlo a tu propio blog.
Para verlo funcionar visita este blog de pruebas.
Recuerda que es una imagen de fondo la que tiene el recuadro, para ponerle en su lugar color solo cambia:background-image:url(Url-de-tu-imagen); por background-color:#007000;
Ya que generes tus meta tags introdúcelos despues de la etiqueta: <head>.
Espero y te sirva en algo..Hasta pronto!

Una Imagen

2011-05-26T14:08:00.000-07:00

Como todos sabemos que para incluir una imagen se utiliza la etiqueta <img>.

Ejemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<img src="Url-de-tu-imagen" alt="Texto" border="3" align="left" height="200" width="400" hspace="5" vspace="5" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Pero si observaron el ejemplo, la etiqueta cuenta con distintos parámetros:
src="Url-de-tu-imagen" |indica la dirección de la imagen
alt="Texto" |muestra el texto al pasar el cursor sobre la imagen
border="2" |establece un borde alrededor de la imagen
align="left" |especifica la alineación de la imagen

Estos son algunos valores:
left: alinea la imagen hacia la izquierda con texto hacia la derecha
right: alinea la imagen hacia la derecha con texto hacia la izquierda
top: alinea texto hacia arriba respecto de la imagen
bottom: alinea texto hacia abajo respecto de la imagen
absbottom: alinea texto hacia abajo mas junto respecto de la imagen
middle: alinea texto en el medio de la imagen
absmiddle: alinea texto aun mas en el medio de la imagen

height="200" |establece la altura de la imagen
width="400" |establece la anchura de la imagen
hspace="5" |indica el espacio horizontal entre la imagen y el texto
vspace="5" |indica el espacio vertical entre la imagen y el texto

Ahora si le incluimos un poco de CSS:
Veremos una imagen con un borde distinto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<img style="border:3px inset #FF8000;" src="Url-de-tu-imagen" alt="Texto" border="0" align="left" height="200" width="400" hspace="5" vspace="5" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Saliéndonos un poco de la <img> y colocando una imagen dentro de un <div>, veremos un texto sobre una imagen:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:200px; width:400px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

O que tal una imagen sobre otra y otra:

<div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:200px; width:400px;"><div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:100px; width:300px; margin:45px;"><div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:50px; width:250px; margin:20px;"></div></div></div>

Y como vez, también le podrás poner enlaces como tu quieras:
<a href="Url-de-tu-sitio">Abrir aqui mismo</a>
<a href="Url-de-tu-sitio" target="_blank">Abrir en una ventana nueva</a>

La imagen que se muestra en los ejemplos pertenece a Sareni

Un sitio dentro de otro

2011-05-25T13:43:00.000-07:00

Si necesitas un sitio incrustado dentro de otro en esta entrada sabrás como hacerlo.
Para ello es necesario utilizar la etiqueta <iframe>.
A continuación les muestro los siguientes ejemplos:

Sitio incrustado con bordes y barras de desplazamiento:

Para personalizarlo cambia el tamaño del borde, tipo y color, si lo quieres con barras de desplazamiento(yes/no), ancho y alto de la ventana y alineado hacia la izquierda(left) de un texto, dereche(right), hacia arriba(top), hacia abajo(bottom) o en medio(middle).

<iframe name="window" style="border:5px inset #009900;" src="Url-de-tu-sitio-o-imagen" scrolling="yes" width="300" height="100" align="left"></iframe>

Sitio incrustado sin bordes ni barras de desplazamiento:

Ahora ejemplos con imagenes:

Creación de listas

2011-05-22T14:18:00.000-07:00

Las listas son párrafos estructurados que contienen una serie de opciones.
A continuación te muestro los siguientes ejemplos de listas:
Lista con puntos redondos:

primer elemento de la lista
segundo elemento de la lista
tercer elemento de la lista

<ul>
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul>

Lista con circulos:

primer elemento de la lista
segundo elemento de la lista
tercer elemento de la lista

<ul type="circle">
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul>

Lista con cuadrados:

primer elemento de la lista
segundo elemento de la lista
tercer elemento de la lista

<ul type="square">
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul>

Lista numerada:

primer elemento de la lista
segundo elemento de la lista
tercer elemento de la lista

<ol>
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ol>

Lista de abecedario:

primer elemento de la lista
segundo elemento de la lista
tercer elemento de la lista

<ul type="a">
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul>

También puedes poner las letras en mayúscula cambiando type="a" por type="A".

Lista de numeración romana:

primer elemento de la lista
segundo elemento de la lista
tercer elemento de la lista

<ul type="i">
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul>

E igual en este ejemplo: puedes poner los números en mayúscula cambiando type="i" por type="I".

Listado con subrayado:

primer elemento de la lista
segundo elemento de la lista
tercer elemento de la lista

<ul style="text-decoration: underline">
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul>

Lista de glosario o definición:

1.-Término que se va a definir:: -definición del término uno; -definición del término dos; -definición del término tres

<dl>
<dt>1.-Término que se va a definir:</dt>
<dd>-definición del término uno</dd>
<dd>-definición del término dos</dd>
<dd>-definición del término tres</dd>
</dl>

Y por ultimo este listado diferente incluyendole un poco de CSS que podrás personalizar como tu decidas:

1.-Término que se va a definir:: -definición del término uno; -definición del término dos; -definición del término tres

<dl style="background-color:#FFCC00; color:#FFEE00; border:5px dashed #009900; font-family:Stencil; font-size:15pt; padding:10px;">
<dt>1.-Término que se va a definir:</dt>
<dd>-definición del término uno</dd>
<dd>-definición del término dos</dd>
<dd>-definición del término tres</dd>
</dl>

background-color:#FFCC00; = color de fondo de la lista o si te desides por una imagen solo coloca background-image:url(Url-de-tu-imagen);

1.-Término que se va a definir:: -definición del término uno; -definición del término dos; -definición del término tres

color:#FFEE00; = color de la lista
border:1px solid #bae2f0; = tamaño del borde, estilo y color
font-family:Stencil; = tipo de letra de la lista
font-size:15pt; = tamaño de la lista
padding:10px; = expacion del color de fondo

Espero y en algo te sea útil.

Probador de códigos HTML

2011-05-20T16:02:00.000-07:00

Para muchos de nosotros es importante probar los códigos HTML y editarlos antes de su publicación por eso hoy les enseño como realizar nuestro propio probador de códigos HTML en blogger.
Primero empezamos con ir a nuestra plantilla y buscar(Ctrl+F) la etiqueta </head>.
Ya que la encontraste insertas arriba el siguiente Javascript:

<!--Probador de codigos HTML-->
<script>
function probar(texto) {
 ventana = window.open('', 'popup', '');
 ventana.document.write(texto);
}
</script>

Ahora vamos a elementos HTML/Javascript e insertamos el siguiente HTML que le dara forma al recuadro y botones:

<form name="probador"><textarea name="texto" style="background-image:url(Url de tu imagen); color:#000000; border:1px solid #FFCC88; font-size:12px; font-family: helvetica,sans-serif; width:590px; height:200px;"></textarea><input type="button" onclick="probar(texto.value)" value="Convertir" style="background-color: #FFCC00; color: #000000; border:1px solid #FFCC88; font-size:12px; font-family: helvetica,sans-serif;"/><input name="Clear" value="Limpiar" type="reset" style="background-color:#FFCC00; color:#000000; border:1px solid #FFCC88; font-size:12px; font-family: helvetica,sans-serif;"/></form>

El ejemplo lo podrás ver funcionar en este blog de pruebas.
Como checaste el resultado te lo muestra en una ventana nueva.
Para editar el recuadro Y los botones, solo cambia el:

El color de fondo de los botones: background-image:url(Url de tu imagen);
El color de los textos: color:#000000;
El color de los bordes: border:1px solid #FFCC88;
Los tamaños y tipos de letra: font-family: helvetica,sans-serif;
Y lo ancho y alto del recuadro: width:590px; height:200px;

Si prefieres colocarle color de fondo en lugar de la imagen, solo cambias:
<textarea name="texto" style="background-image:url(Url-de-tu-imagen);
Por:
<textarea name="texto" style="background-color:#FFCC00;

Bueno eso seria todo..nos vemos en la próxima entrada.

Editor HTML y tabla de colores

2011-05-18T17:32:00.000-07:00

HTML edit, es un importante editor HTML que te brinda la posibilidad de editar tus códigos HTML y ver los resultados en línea ya que mientras escribes tu código en el recuadro de arriba te va mostrando el resultado en la parte de abajo.

Para ver un ejemplo copia el siguiente código y pégalo en el editor:

<p style='background-color:#FFCC00; font-family:Stencil; font-size:20pt; color:#006633; border:10px groove #006633;'><marquee>Este es un ejemplo</marquee></p>

Otra herramienta que quise incluir en esta entrada y que nos puede ser útil a todos es Web taller, una tabla de colores.

Solo selecciona el color que desees y en la parte de abajo te generara el código hexadecimal.
Bueno espero y les sean útiles.
Referencias:
Ciudad blogger

Barra de cargar pagina

2011-05-18T15:49:00.000-07:00

Si deseas ver cuando se termina de cargar el contenido de tu blog lo puedes hacer insertando una barra animada.

Ver el ejemplo en este blog de pruebas.
Solo vas a elementos HTML/Javascript e ingresas el siguiente código:

<script type='text/javascript'> 
window.onload = detectarCarga; 
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>
<div id='imgLOAD' style="text-align: center">
<b>Cargando</b>
<img src="Url-de-tu-gif">
</div>

También podrás incluir el código dentro de la misma plantilla.
Si deseas otros tipos de gifs, a continuación te presento los siguientes generadores:
Ajax load
Load info
Web script lab
Preloaders

Los puedes alojar en:
Free image hosting

Referencias:
Ayuda para el blog

Colocar música de fondo

2011-05-18T14:49:00.000-07:00

Tal vez para algunos es molesto ir a un blog y escuchar música sin pedirlo pero si tu deseas ponerle música de fondo que se escuche automáticamente, coloca después de la etiqueta <body> los siguientes códigos:
Escuchar la canción solo en IE:

<bgsound src="Url-de-tu-cancion-mp3" loop="-1"></bgsound>

La canción se repetira varias veces pero si quieres que se escuche una sola vez, coloca 0 en lugar de -1.
Escuchar la canción solo en firefox:

<embed src="Url-de-tu-cancion-mp3" width="0" height="0" autostart="true" loop="true" hidden="true"/>

Para alojar un archivo mp3 acude a dropbox, un servicio totalmente gratuito. El potro de ciudad blogger te explica con un video tutorial como utilizarlo.
Otro truco o manera de colocar musica de fondo es incluyendo una Url de un video de youtube dentro de un <iframe>:

<iframe frameborder='0' height='0' id='window' name='window' scrolling='no' src='Url-de-tu-video' width='0'/>

Escuchar una cancion en este blog de pruebas.

Crear imágenes tipográficas con texto

2011-05-15T18:16:00.000-07:00

Text image, es un sitio en línea que te permite convertir imágenes en tipografías con texto, caracteres o números.

La imagen ya convertida, claro que la puedes guardar haciendo una captura pero también te proporciona el código HTML de la imagen como?, dando clic derecho y seleccionas ver código fuente y otras dos opciones que tiene es que también la puedes convertir en código ASCII y efecto matrix.

Para convertir busca una imagen desde tu ordenador, coloca tus caracteres, elige si los quieres al azar o en secuencia, elige el tamaño de tu imagen, lo ancho, el color de fondo y contraste:

Una vez personalizada, das clic en convertir y listo.
Estos son algunos ejemplos:
Imágen normal:

Imagen tipográfica:

Imágen en código HTML
Imágen en código ASCII:

Imágen con efecto matrix:

Los formatos que acepta para convertir son: BMP,GIF, JPG Y PNG.
A pesar de que puedes convertirlas en el sitio, también te permite bajar un programa portable similar al del sitio para convertir:

Descargar desde el sitio del autor

La imagen que uso de ejemplo pertenece a Muri autor del mismo sitio.

Redireccionar a otra página

2011-05-15T16:38:00.000-07:00

Cuando estamos construyendo un blog o dándole un toque distinto, necesitamos colocar un aviso a nuestros usuarios para que sepan que el sitio se encuentra en construcción.
Lo que necesitamos es redireccionarlos a otro sitio como?, colocando alguno de los siguientes códigos después de la etiqueta <body>:

<script languaje="Javascript">
location.href='Url-del-blog-a-donde-quieres-redireccionar';
</script>

Si checas en este ejemplo: al dar clic veras una página y rápidamente te mandara a otra distinta.

Redireccionar en un tiempo determinado:

<meta http-equiv="refresh" content="Segundos;url=Url-del-blog-a-donde-quieres-redireccionar"/>

Colocas los segundos que desees que la pagina demore hasta redireccionarla a una nueva.
Ver ejemplo de 8 segundos.

Redireccionar colocando el puntero encima de una imagen.

<a onmouseover="parent.location='Url-del-blog-a-donde-quieres-redireccionar'"><img src="Url-de-tu-imagen" /></a>

Ver el siguiente ejemplo:

La imagen pertenece a Ricdiggle.

Imágenes animadas para el teléfono móvil

2011-05-11T15:11:00.000-07:00

En Fondos animados, han realizado una gran cantidad de imágenes animadas para tu teléfono móvil y por que no, para tu facebook.
Las encuentras en 13 categorías:
Amor y corazones
Animaciones divertidas
Naturaleza y lugares
Deportes
Miedo y misterio
Marcas comerciales etc.
Y hasta te proporcionan el código de cada una de ellas para incrustarlas en tu web/blog:

<a href="http://www.fondos-animados.com/images/wallpapers/Relampagos-307556.gif"><img src="http://www.fondos-animados.com/images/wallpapers/Relampagos-307556.gif" alt="Animacion de Relampago" /></a><a href="http://www.fondos-animados.com/">Fondos Animados</a>

Aquí unos ejemplos:

Ojala y te gusten.

Notas con fieldset y legend

2011-05-09T14:22:00.000-07:00

Son recuadros que suelen usarse para enmarcar una nota o un texto que uno quiera resaltar.
Para ello vamos a utilizar la etiqueta <fieldset> y <legend>.

Ejemplos con <fieldset>:

Aquí el texto que quieres enmarcar

<fieldset>
Aquí el texto que quieres enmarcar
</fieldset>

Texto con color y alineado al centro

<fieldset style='color: #FFCC00; text-align:center;'>
Texto con color y alineado al centro
</fieldset>

Texto con color y alineado a la izquierda

<fieldset style='color: #FFCC00; text-align:left;'>
Texto con color y alineado a la izquierda 
</fieldset>

Texto con color y alineado a la derecha

<fieldset style='color: #FFCC00; text-align:right;'>
Texto con color y alineado a la derecha
</fieldset>

Introduciendole algo de CSS lo personalizamos:

Aquí el texto que quieres enmarcar

<fieldset style='background-color: #222222; color: #FFCC00; border: 5px solid #FFFFFF; text-align:left; font-family:stencil; font-size:13px; padding:20px;'>
Aquí el texto que quieres enmarcar
</fieldset>

Ahora si, edita el código como tu gustes:

background-color: #222222;(color de fondo del recuadro)
color: #FFCC00;(color del texto)
border: 5px solid #FFFFFF;(grosor del borde, estilo y color)
text-align:left;(alineacion del texto)
font-family:stencil;(tipo de letra)
font-size:13px;(tama;o de letra)
padding:20px;(expandimiento del recuadro)

Ahora fusionaremos <fieldset> con <legend>.
Ejemplos:

Titulo
Aquí el texto que quieres enmarcar

<fieldset>
<legend>Titulo</legend>
Aquí el texto que quieres enmarcar
</fieldset>

Titulo alineado al centro
Texto con color y alineado al centro

<fieldset style='color: #FFCC00; text-align:center;'>
<legend style='color: #FF0000;' align="center">Titulo alineado al centro</legend>
Texto con color y alineado al centro
</fieldset>

Titulo alineado a la izquierda
Texto con color y alineado a la izquierda

<fieldset style='color: #FFCC00; text-align:left;'>
<legend style='color: #FF0000;' align="left">Titulo alineado a la izquierda</legend>
Texto con color y alineado a la izquierda
</fieldset>

Titulo alineado a la derecha
Texto con color y alineado a la derecha

<fieldset style='color: #FFCC00; text-align:right;'>
<legend style='color: #FF0000;' align="right">Titulo alineado a la derecha</legend>
Texto con color y alineado a la derecha
</fieldset>

Titulo
Aquí el texto que quieres enmarcar

<fieldset style='background-color: #222222; color: #FFCC00; border: 5px solid #FFFFFF; text-align:left; font-family:stencil; font-size:13px; padding:10px;'>
<legend style='background-color: #222222; color:#FF0000; border: 5px solid #FFFFFF; font-family:stencil; font-size:13px;' align= "left">Titulo</legend>
Aquí el texto que quieres enmarcar
</fieldset>

De igual manera lo editas:

background-color: #222222;(color de fondo del recuadro)
color: #FFCC00;(color del texto)
border: 5px solid #FFFFFF;(grosor del borde, estilo y color)
text-align:left;(alineacion del texto)
font-family:stencil;(tipo de letra)
font-size:13px;(tama;o de letra)
padding:10px;(expandimiento del recuadro)

Si te decides por ponerle una imagen de fondo en lugar del color, cambia:
background-color: #222222; por background-image:url(Url-de-tu-imagen);

Titulo
Aquí el texto que quieres enmarcar

Recuerda que la línea de código perteneciente a la etiqueta <fieldset> corresponde al último ejemplo de la misma.
Lo que editarías es la línea de la etiqueta <legend> que corresponde al titulo.

Espero y te hayan servido los ejemplos. Nos veremos en la próxima entrada.

Separadores con HTML

2011-05-09T13:56:00.000-07:00

Los separadores son líneas que se utilizan para separar contenidos de texto dándole una elegancia diferente.

A continuación te dejo los ejemplos:
Separador básico:

<hr>

Separador con anchura:

<hr width="50%"/>

Separador con anchura y alineado a la derecha:

Coloca en lugar de right, center si lo quieres al centro o left si es a la izquierda.

<hr width="50%" align="right"/>

Separador con tamaño:

<hr size="20"/>

Separador con color:

<hr color="#FF0000"/>

Separador con sombra:

<hr noshade="noshade"/>

También personalizándolo un poco más, le colocamos un poco de CSS:

Le podrás cambiar color de fondo del separador
El tamaño de cada uno de los bordes, estilos y colores
Lo alto del separador y lo ancho, así como la alineación del mismo.

<hr style="background-color:#333333; border-left:5px solid #009900; border-right:5px solid #FF0000; border-top:5px solid #FFCC00; border-bottom:5px solid #003366; height:10px; width:100%; align:center;" />

O si prefieres colocarle una imagen de fondo:

<hr style=" background-image:url(Url-de-tu-imagen); border-left:5px solid #003300; border-right:5px solid #FF0000; border-top:5px solid #FFCC00; border-bottom:5px solid #088A85; height:10px; width:100%; align:center;" />

Si necesitas otros estilos de bordes los puedes verlos en esta entrada.

Espero te sirvan en algo.

León y tigre con ojos y nariz metálica

2011-05-06T14:04:00.000-07:00

El león también conocido como el rey de la selva, es uno de los animales salvajes que más me gustan, por eso me propuse a buscar una imagen de este gran felino para darle un aspecto diferente, en especial en los ojos y la nariz y ahora quiero compartirla con ustedes.

978x858px

La imagen original corresponde a Steve aka Crispin Swan.

También otro de los felinos que me encantan, es el tigre y también en honor a el personalicé la siguiente imagen:

556x640px

La imagen original también corresponde a Steve aka Crispin Swan.

Espero y las hayan disfrutado. Nos vemos en la próxima entrada.

Personalizar el buscador de google en blogger y su lista de opciones

2011-05-02T14:09:00.000-07:00

En un rato libre me di a la tarea de configurar el cuadro de búsqueda de google y vaya que es sencillo de personalizar.

Para personalizar el buscador básico que tiene google en blogger:

Y que nos quede como este:

Se necesita implementar los siguientes códigos:

/* Eliminar con la tecnologia de google 
---------------------------- */
.gsc-branding-text, .gsc-branding-img-noclear {
display:none;
}

Como ves el código anterior, se le agrega display:none; para ocultar la imagen y el texto.

/* Configuración del botón del buscador 
---------------------------- */
input.gsc-search-button {
color: #FFFFFF; /* Color del texto del botón */
background-image: url(Url-de-tu-imagen); /* Imagen del fondo del botón */
border: 3px solid #2E2E2E; /* Grueso, tipo de borde y color */
}

Si prefirieras ponerle color de fondo en lugar de imagen, solo coloca en su lugar:
background-color: #FFCC00;

Aquí al revés, si prefirieras ponerle una imagen de fondo en lugar de color al cuadro, solo coloca en su lugar:
background-image: url(Url-de-tu-imagen);

/* Configuracion del cuadro del buscador 
---------------------------- */
input.gsc-input
{
float:right; /* Alinea a la derecha el cuadro */
width:200px !important; /* Establece el tamaño del cuadro */
color: #FFFFFF; /* Color del texto del cuadro */
background-color: #FFFFFF; /* Color de fondo del cuadro */
border: 2px solid #2E2E2E; /* Grueso, tipo de borde y color */
}

Una vez configurado el buscador y entrando con la lista de opciones para que nos quede como esta:

Es necesario ir a nuestra plantilla(guardar una copia antes de editarla) y expandir artilugios para buscar(con Ctrl+F) el siguiente código:

<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:<data:linkColor/>;
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:<data:visitedLinkColor/>;
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color: <data:dateColor/>;
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color: <data:urlColor/>;
}

#uds-searchControl .gsc-results {
border-color: <data:borderColor/>;
background-color: <data:backgroundColor/>;
}

#uds-searchControl .gsc-tabhActive {
border-color: <data:borderColor/>;
border-top-color: <data:activeBorderColor/>;
background-color: <data:backgroundColor/>;
color: <data:textColor/>;
}

#uds-searchControl .gsc-tabhInactive {
border-color: <data:borderColor/>;
background-color: transparent;
color: <data:linkColor/>;
}

#uds-searchClearResults {
border-color: <data:borderColor/>;
}

#uds-searchClearResults:hover {
border-color: <data:activeBorderColor/>;
}

#uds-searchControl .gsc-cursor-page {
color: <data:linkColor/>;
}

#uds-searchControl .gsc-cursor-current-page {
color: <data:textColor/>;
}
</style>

Ya que lo encontraste, lo reemplazas por este:

<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:#FFFFFF; /* Color de los titulos */
background: url(Url-de-tu-imagen); /* Imagen de fondo de los títulos */
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:#FFFFFF; 
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color:#2E2E2E; /* Color de las fechas */
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color:#2E2E2E; /* Color de la Url del blog */
}

#uds-searchControl .gsc-results {
border-color:#2E2E2E; /* Color del borde del cuadro */
background-color:#1C1C1C; /* Color del fondo del cuadro */
}

#uds-searchControl .gsc-tabhActive {
border-color:#2E2E2E; /* Color de los bordes laterales de la pestaña seleccionada */
border-top-color:#2E2E2E; /* Color del borde de arriba de la pestaña seleccionada */
background-color: #1C1C1C; /* Color del fondo de la pestaña seleccionada */
color:#BDBDBD; /* Color del texto de la pestaña seleccionada */
}

#uds-searchControl .gsc-tabhInactive {
border-color:#2E2E2E; 
background-color: transparent;
color:#BDBDBD; /* Color del texto de las pestañas no seleccionadas */
}

#uds-searchClearResults {
border-color:#2E2E2E; /* Color del borde del icono cerrar */
}

#uds-searchClearResults:hover {
border-color:#1C1C1C; 
}

#uds-searchControl .gsc-cursor-page {
color:#BDBDBD; /* Color de los números de paginación no seleccionados */
}

#uds-searchControl .gsc-cursor-current-page {
color:#BDBDBD; /* Color del numero de paginación seleccionado */
}
</style>

A continuación te dejo el código en partes para que lo personalices como tu desees:

color:#FFFFFF; /* Color de los titulos */

background: url(Url-de-tu-imagen); /* Imagen de fondo de los títulos */

color:#2E2E2E; /* Color de las fechas */

color:#2E2E2E; /* Color de la Url del blog */

border-color:#2E2E2E; /* Color del borde del cuadro */

background-color:#1C1C1C; /* Color del fondo del cuadro */

border-color:#2E2E2E; /* Color de los bordes laterales de la pestaña seleccionada */

border-top-color:#2E2E2E; /* Color del borde de arriba de la pestaña seleccionada */

background-color: #1C1C1C; /* Color del fondo de la pestaña seleccionada */

color:#BDBDBD; /* Color del texto de la pestaña seleccionada */

color:#BDBDBD; /* Color del texto de las pestañas no seleccionadas

border-color:#2E2E2E; /* Color del borde del icono cerrar */

color:#BDBDBD; /* Color de los números de paginación no seleccionados */

color:#BDBDBD; /* Color del numero de paginación seleccionado */

Y por ultimo si deseas que el buscador cargue con un gif en lugar del texto loadign, lo puedes hacer buscando:

<span class='cse-status'><data:loadingMsg/></span>

Y lo reemplazas por:
<img src="Url-de-tu-gif" />
Puedes ver los 2 ejemplos funcionando en este mismo blog.

Si gustas aquí puedes encontrar de diferentes tipos de gifs animados.
Eso seria todo, espero y este truco te sea útil. Nos vemos en la próxima entrada.

Traductor de banderitas para blogger

2011-05-02T13:01:00.000-07:00

Desde cuando quería publicar esta entrada para explicarte como colocar un traductor de banderitas en blogger.
Puedes ver el ejemplo en este blog de pruebas.
Si quisieras traducir tu blog del español al ingles, se implementaría el siguiente código:

<a href="javascript:var t=((window.getSelection&&window.getSelection())(document.getSelection&&document.getSelection())(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charsetdocument.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=esen&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=esen&tbb=1&ie='+e;};"><img src="Url-de-tu-icono"/></a>

Ahora es(español), es el identificador del idioma de tu blog.
Luego en(ingles), es el identificador del idioma al que quieres traducir.
Y coloca la Url de tu icono del idioma al que quieres traducir, en este caso al ingles.

Recuerda que el código anterior es de un solo idioma.
Para tener los idiomas que desees, solo copéalo y cámbiale el identificador de idioma al que quieres traducir y la Url de tu icono.

Estos son algunos identificadores de idiomas que te pueden servir:

Si quieres emplear las mismas banderitas de el ejemplo, las puedes descargar desde aquí.

Y lo ultimo que queda es colocar el código como elemento HTML/Javascript y listo.
Espero y te sea de utilidad.

Referencias:
Aqui estuve ayer

Desplazamientos de texto

2011-04-29T17:47:00.000-07:00

Los desplazamientos de texto nos pueden servir para darle un toque llamativo al blog.
Aunque pocos somos los que usamos estos efectos, es interesante saber como generarlos. Y es con la etiqueta <marquee>:

Este es un texto común desplazándose hacia la izquierda:
Texto que se desplaza hacia la izquierda

<marquee direction="left">
Texto que se desplaza hacia la izquierda
</marquee>

En este ejemplo es lo mismo, solo varía la cantidad de espacio que quieras que aparezca el texto:
Texto que se desplaza hacia la izquierda con espacio

<marquee direction="left" width="350">
Texto que se desplaza hacia la izquierda con espacio
</marquee>

Y a este ejemplo le podrás variar la velocidad a la que quieres que se desplace el texto:
Texto que se desplaza hacia la izquierda con velocidad

<marquee scrollamount="10" direction="left">
Texto que se desplaza hacia la izquierda con velocidad
</marquee>

O le podrás colocar un enlace:
Texto que se desplaza hacia la izquierda con enlace

<marquee direction="left"><a href="Url-de-tu-blog">
Texto que se desplaza hacia la izquierda con enlace
</a></marquee>

También introduciendo un poco de CSS le podrás colocar un tamaño de letra:
Texto que se desplaza hacia la izquierda con tamaño de letra

<marquee style="font-size:20pt;" direction="left">
Texto que se desplaza hacia la izquierda con tamaño de letra
</marquee>

Un tipo de letra:
Texto que se desplaza hacia la izquierda con tipo de letra

<marquee style="font-family:Engravers mt;" direction="left">
Texto que se desplaza hacia la izquierda con tipo de letra
</marquee>

Un color de texto:
Texto que se desplaza hacia la izquierda con color

<marquee style="color:#FF8000;" direction="left">
Texto que se desplaza hacia la izquierda con color
</marquee>

Un borde:
Texto que se desplaza hacia la izquierda con borde

<marquee style="border:2px solid #FFCC00;" direction="left">
Texto que se desplaza hacia la izquierda con borde
</marquee>

Un borde hacia la izquierda y derecha:
Texto que se desplaza hacia la izquierda con borde hacia la izquierda y derecha

<marquee style="border-left:2px solid #FFCC00; border-right:2px solid #FFCC00;" direction="left">
Texto que se desplaza hacia la izquierda con borde hacia la izquierda y derecha
</marquee>

Un borde hacia arriba y abajo:
Texto que se desplaza hacia la izquierda con borde hacia arriba y abajo

<marquee style="border-top:2px solid #FFCC00; border-bottom:2px solid #FFCC00;" direction="left">
Texto que se desplaza hacia la izquierda con borde hacia arriba y abajo
</marquee>

Pero que tal una imagen de fondo:
Texto que se desplaza hacia la izquierda con imagen de fondo

<marquee style="background-image:url(Url-de-tu-imagen);" direction="left">
Texto que se desplaza hacia la izquierda con imagen de fondo
</marquee>

O un color de fondo ya saliendo del CSS:
Texto que se desplaza hacia la izquierda con color de fondo

<marquee bgcolor="#770000" direction="left">
Texto que se desplaza hacia la izquierda con color de fondo
</marquee>

Lo mismo puedes hacer si quieres que el texto se desplace hacia la derecha cambiando la propiedad left por right:

<marquee direction="left">
Texto que se desplaza hacia la izquierda
</marquee>

Texto que se desplaza hacia arriba
Ahora si checas el ejemplo anterior, el texto se desplaza hacia arriba, para desplazarlo hacia abajo cambia up por down e igual le puedes agregar espacio, velocidad, un enlace, borde, un color de fondo, etc.

<marquee direction="up" height="80">
Texto que se desplaza hacia arriba
</marquee>

Texto que se desplaza alternadamente
A este texto le podrás cambiar el espacio hasta donde quieres que se desplace alternadamente:

<marquee behavior="alternate" width="350">
Texto que se desplaza alternadamente
</marquee>

Pero agregándole un poco de Javascript, también podrás agregarle dos links hacia donde quieres que se desplace el texto ya sea hacia la izquierda, derecha, arriba o hacia abajo:

<marquee id="ejemplo" direction="left">
Texto que quieras que se desplace hacia la izquierda o derecha, arriba o hacia abajo
</marquee>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='left';">
Hacia la izquierda
</a>    
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='right';">
Hacia la derecha
</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">
Hacia arriba
</a>    
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">
Hacia abajo
</a>

Los dos ejemplos los puedes ver funcionando en este blog de pruebas.

E igual podrás desplazar imágenes, tablas, videos, etc.
Si es una imagen cambia el texto por:

<img src="Url-de-tu-imagen" />

Una tabla:

Titulo
1
2
3

O por un video:

Casi todos los ejemplos los podrás colocar en una entrada o como elemento HTML/Javascript, a excepción de el último que solo lo podrás colocar como elemento HTML/Javascript.

Espero y te puedan ser de utilidad.

Iconos del sistema solar

2011-04-29T16:03:00.000-07:00

Navegando por la red me tope con tre conjuntos de iconos del sistema solar en alta calidad. Y ahora se los comparto para que los puedan descargar.

Este primer paquete fue hecho por Iconka y dentro de el se encuentran 10 iconos de 9 planetas y un satélite.
Sus medidas son: 128x128px y 64x64px.
Los formatos en que se encuentran son: ICO, BIN Y PNG.

Descargar desde el sitio del autor

Este fue hecho por Dan Wiersema.
Son 13 iconos del Sistema Solar inspirados en los objetos en la Vía Láctea.
Contiene el Sol, la Luna, 8 planetas y 3 planetas enanos.

Descargar desde la pagina de autor

Y este tercer paquete fue hecho por WebTrance y se encuentran con medidas 256x256px, 128x128px, 96x96px y 64x64px y en formato PNG.
Los iconos son: Mercurio, Venus, Tierra, Marte, Júpiter, Saturno, Urano, Neptuno y Plutón. y además 4 extras del satélite lunar.

Descargar desde la pagina de autor

Ojala y te sean de gran utilidad.

Imágenes de Sin Cara

2011-04-29T14:50:00.000-07:00

Capture algunas imagenes del espectacular luchador mexicano que esta caparando la atencion de todo Mexico y todo el Universo de la WWE, si se trata de Sin Cara. Las lleve al editor y ahora se las comparto a todos ustedes.
Espero y las disfruten:

721x425px

719x402px

721x438px

721x459px

720x457px

Recuerda que las imagenes se encuentran editadas.
El tatuaje del logo de la WWE que tiene en el pecho, realmente no lo tiene.

Tablas con HTML

2011-04-29T14:21:00.001-07:00

Las tablas son muy importantes cuando queremos colocar una lista o serie de opciones de cualquier tema. Por eso a continuación te presento algunos ejemplos de ellas que te podrán ser de ayuda:

Esta tabla es simple y sencillamente básica con una sola columna:

Titulo
1
2
3

<table bordercolordark="#FFFFFF" bordercolorlight="#FFFFFF" border="1" cellpadding="10" width="80%">
<tr bgcolor="#" align="center"><th>Titulo</th></tr>
<tr bgcolor="#" align="center"><td>1</td></tr>
<tr bgcolor="#" align="center"><td>2</td></tr>
<tr bgcolor="#" align="center"><td>3</td></tr>
</table>

Esta tabla es simple pero con dos columnas:

Titulo 1	Titulo 2
1	1
2	2
3	3

<table bordercolordark="#FFFFFF" bordercolorlight="#FFFFFF" border="1" cellpadding="10" width="80%">
<tr bgcolor="#" align="center"><th>Titulo 1</th><th>Titulo 2</th></tr>
<tr bgcolor="#" align="center"><td>1</td><td>1</td></tr>
<tr bgcolor="#" align="center"><td>2</td><td>2</td></tr>
<tr bgcolor="#" align="center"><td>3</td><td>3</td></tr>
</table>

Y así sucesivamente, agrégale una tercera o las que necesites:

Titulo 1	Titulo 2	Titulo 3
1	1	1
2	2	2
3	3	3

<table bordercolordark="#FFFFFF" bordercolorlight="#FFFFFF" border="1" cellpadding="10" width="80%">
<tr bgcolor="#" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>

Pero en vez de colocar varios títulos te gustaría solo uno con varios subtítulos, lo puedes realizar con la propiedad colspan:

Titulo
Subtitulo 1	Subtitulo 2	Subtitulo 3
1	1	1
2	2	2

<table bordercolordark="#FFFFFF" bordercolorlight="#FFFFFF" border="1" cellpadding="10" width="80%">
<tr bgcolor="#" align="center"><th colspan="3">Titulo</th></tr>
<tr bgcolor="#" align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr bgcolor="#" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#" align="center"><td>2</td><td>2</td><td>2</td></tr>
</table>

Otra forma que existe es colocando un mensaje al lado izquierdo de la tabla y los tres títulos a la derecha. Lo podrás conseguir con la propiedad rowspan:


Titulo 1	Titulo 2	Titulo 3
1	1	1
2	2	2
3	3	3

<table bordercolordark="#FFFFFF" bordercolorlight="#FFFFFF" border="1" cellpadding="10" width="80%">
<tr bgcolor="#" align="center"><th rowspan="5">Mensaje</th></tr>
<tr bgcolor="#" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>

Llevando el ejemplo cuatro, también podrás colocarle un mensaje a la izquierda:

Titulo
Subtitulo 1	Subtitulo 2	Subtitulo 3
1	1	1
2	2	2

<table bordercolordark="#FFFFFF" bordercolorlight="#FFFFFF" border="1" cellpadding="10" width="80%">
<tr bgcolor="#" align="center"><th rowspan="5">Mensaje</th><th colspan="4">Titulo</th></tr>
<tr bgcolor="#" align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr bgcolor="#" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#" align="center"><td>2</td><td>2</td><td>2</td></tr>
</table>

Igual que en ejemplo anterior, solo reduce el valor para tener este ejemplo:

Mensaje	Titulo
Mensaje	1	1	1
1	2	2	2
2	3	3	3

<table bordercolordark="#FFFFFF" bordercolorlight="#FFFFFF" border="1" cellpadding="10" width="80%">
<tr bgcolor="#" align="center"><th rowspan="2">Mensaje</th><th colspan="3">Titulo</th></tr>
<tr bgcolor="#" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#" align="center"><td>1</td><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#" align="center"><td>2</td><td>3</td><td>3</td><td>3</td></tr>
</table>

Y al último edita las tablas como desees:
Varia el valor del borde
El tamaño en general de la tabla
El ancho de la tabla
El color del borde de la tabla
El color de fondo de la tabla y la alineación del texto. Si observas en todos los ejemplos, se encuentran alineados en el centro pero los puedes alinear a la izquierda(left) o ala derecha(right).

Mensaje	Titulo
Mensaje	1	1	1
1	2	2	2
2	3	3	3

<table bordercolordark="#006699" bordercolorlight="#FFCC00" border="5" cellpadding="5" width="50%">
<tr bgcolor="#006633" align="center"><th rowspan="2">Mensaje</th><th colspan="3">Titulo</th></tr>
<tr bgcolor="#880000" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#880000" align="center"><td>1</td><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#880000" align="center"><td>2</td><td>3</td><td>3</td><td>3</td></tr>
</table>

Si decidieras cambiarle el color de texto puedes colocar:
<font color="#">Titulo</font>
Ojala y te puedan servir en algo. Nos vemos en la próxima entrada.

Iconos esferas

2011-04-18T13:59:00.000-07:00

Por primera vez me inspire y decidí realizar algunos iconos para el diseño de tu blog/sitio web.
Este conjunto contiene 42 iconos tipo esferas en color azul y gris y se encuentran con medidas 100x100px y en formato PNG.
Puedes sentirte libre de utilizarlos y redistribuirlos siempre y cuando redirecciones a los usuarios a este blog para su descarga.

Descargar

Que los disfrutes!

Ventanas pop up

2011-04-18T13:41:00.000-07:00

A menudo, las ventanas emergentes o pop up las llegamos a utilizar con el objetivo de mostrar un aviso publicitario de manera intrusiva.

Si tienes pensado mostrar una imagen, blog o un video de youtube en una ventana pop up, lo puedes hacer como en los siguientes ejemplos:
Ver imagen
En este ejemplo como ves, te muestra una imagen en la ventana:

<a href="Url-de-tu-imagen" target="_blank" onclick="window.open(this.href, this.target, 'top=350, left=480, width=400, height=200, toolbar=NO, Menubar=NO'); return false;">
Ver imagen
</a>

Ver blog o sitio web
Y en este otro si observas, se utiliza el mismo código pero ahora para incluir un blog o sitio web:

<a href="Url-de-tu-blog-o-sitio-web" onclick="window.open(this.href, this.target, 'top=350, left=250, width=900, height=800, toolbar=NO, Menubar=NO'); return false;">
Ver blog o sitio web
</a>

Ver video
Y ahora como pudiste ver en este ultimo ejemplo, aparece un video en la ventana:

<a href="javascript:void(0);" onclick="window.open('Url-de-tu-video', 'popup', 'top=350, left=480, width=400, height=300, toolbar=NO, Menubar=NO')">
Ver video
</a>

La url para que incluyas un video de youtube será como esta:
http://www.youtube.com/watch?v=rIpD7hfffQo

Para que funcione incluye despues de watch esto _popup:
Ejemplo: http://www.youtube.com/watch_popup?v=rIpD7hfffQo

Si en lugar de texto en los links te decidieras por una imagen, lo puedes llevar a cabo colocando en lugar de los links el siguiente código:
<img src="Url-de-tu-imagen" />

Ejemplos:

Y al final, configuras los códigos como tu decidas:
top=# (es la posición de la ventana, en este caso hacia arriba)
left=# (también es la posición de la ventana, en este caso a la izquierda)
width=# (es lo ancho de la ventana)
height=# (es lo alto de la ventana)
toolbar=No (le pregunta si quiere que aparezca la barra de herramientas, Yes o No)
Menubar=No (le pregunta si quiere que aparezca la barra de menús) Espero y te sean útil en algo.

2 Columnas de texto

2011-04-15T12:13:00.000-07:00

De vez en cuando queremos ver elegante nuestro texto en dos columnas y hasta con imagenes. Y de verdad, se miran elegantes para los que tienen un blog de historia, poemas o cuentos y para los que no también.

2 columnas de texto alineado a la izquierda:

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="float: left; width: 45%; text-align: left;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: left;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

2 columnas de texto alineado a la derecha:

<div style="float: left; width: 45%; text-align: right;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: right;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

2 columnas de texto alineado al centro:

<div style="float: left; width: 45%; text-align: center;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: center;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

2 columnas de texto justificado:

<div style="float: left; width: 45%; border: 0px solid #00529B; text-align: justify;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: justify;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

Ahora 2 columnas de texto justificado pero con imagenes a la izquierda incluyendole la propiedad float:

1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="float: left; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

Ahora 2 columnas de texto justificado pero con imagenes hacia a la derecha:

<div style="float: left; width: 45%; text-align: justify;">
<img style="float: right;" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: justify;">
<img style="float: right;" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

También le puedes colocar a las 2 columnas un color de fondo:

<div style="background-color: #770000; float: left; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="background-color: #770000; float: right; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

O también que te parece, una imagen:

<div style="background-image: url(Url-de-tu-imagen); float: left; width: 45%; text-align: justify;">
<img style="float: left;" src="http://4.bp.blogspot.com/-qX8Pd2RBo2A/TaiYLh6HcsI/AAAAAAAAFtI/Q_lfWj9ZDHA/s80/Carretera%2Brodeando%2Ba%2Bla%2Btierra.jpg" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="background-image: url(Url-de-tu-imagen); float: right; width: 45%; text-align: justify;">
<img style="float: left;" src="http://4.bp.blogspot.com/-qX8Pd2RBo2A/TaiYLh6HcsI/AAAAAAAAFtI/Q_lfWj9ZDHA/s80/Carretera%2Brodeando%2Ba%2Bla%2Btierra.jpg" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

Al ultimo si prefieres, le podras poner un color de texto, tamaño, asi como tipo de letra y un borde ya sea en las columnas o a las imagenes:

<div style="background-image: url(Url-de-tu-imagen); float: left; color: #CCCCCC; border: 2px solid #006699; font-family:Broadway; font-size: 14pt; width: 45%; text-align: justify;">
<img style="float: left; border: 2px solid #006699" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="background-image: url(Url-de-tu-imagen); float: right; color: #CCCCCC; border: 2px solid #006699; font-family:Broadway; font-size: 14pt; width: 45%; text-align: justify;">
<img style="float: left; border: 2px solid #006699" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

Espero y te ayude en algo.

Mensajes con CSS

2011-04-14T17:22:00.000-07:00

De vez en cuando, llegamos a necesitar mensajes de información para prevenir o avisar a los usuarios de algún problema.

Si llegaras a necesitar alguno, esta es la entrada ideal, para ello vamos a ver los siguientes ejemplos:

Mensaje de información

CSS:

/* Mensaje de información */
.informacion{
background-color: #BDE5F8;
color: #00529B;
font-family:Arial;
font-size:16px;
border: 1px solid #00529B;
margin: 10px 0px;
padding:15px 10px 15px 50px;
}

HTML:

<div class="informacion mensajes"><img style="float: left;" src="Url-de-tu-icono" />
Mensaje de información
</div>

Mensaje de éxito

CSS:

/* Mensaje de éxito */
.exito{
background-color: #DFF2BF;
color: #4F8A10;
font-family:Arial;
font-size:16px;
border: 1px solid #4F8A10;
margin: 10px 0px;
padding:15px 10px 15px 50px;
}

HTML:

<div class="exito mensajes"><img style="float: left;" src="Url-de-tu-icono" />
Mensaje de éxito
</div>

Mensaje de alerta

CSS:

/* Mensaje de alerta */
.alerta{
background-color: #FEEFB3;
color: #9F6000;
font-family:Arial;
font-size:16px;
border: 1px solid #9F6000;
margin: 10px 0px;
padding:15px 10px 15px 50px;
}

HTML:

<div class="alerta mensajes"><img style="float: left;" src="Url-de-tu-icono" />
Mensaje de alerta
</div>

Mensaje de error

CSS:

/* Mensaje de error */
.error{
background-color: #FFBABA;
color: #D8000C;
font-family:Arial;
font-size:16px;
border: 1px solid #D8000C;
margin: 10px 0px;
padding:15px 10px 15px 50px;
}

HTML:

<div class="error mensajes"><img style="float: left;" src="Url-de-tu-icono" />
Mensaje de error
</div>

Pero si en lugar del color del fondo prefieres una imagen, también lo puedes realizar:

Mensaje de información

CSS:

/* Mensaje de información */
.informacion{
background-image: url(Url-de-tu-imagen);
color: #00529B;
font-family:Arial;
font-size:16px;
border: 1px solid #00529B;
margin: 10px 0px;
padding:15px 10px 15px 50px;
}

Por ultimo llevando a cabo el primer ejemplo, edita los valores del CSS como gustes:
Cambiale el color del fondo, el color del texto, el tipo de texto, el tamaño del texto, el tamaño, estilo y color del borde, el margen del texto y el expandimiento:

background-color: #BDE5F8;
color: #00529B;
font-family:Arial;
font-size:16px;
border: 1px solid #00529B;
margin: 10px 0px;
padding:15px 10px 15px 50px;

Y colocando en el HTML la Url de tu icono:

<div class="informacion mensajes"><img style="float: left;" src="Url-de-tu-icono" />
Mensaje de información
</div>

Te dejo los iconos para que los alojes a tu propio servidor:

Descargar desde el sitio del autor

Y nada mas coloca el código CSS antes de ]]></b:skin>(Buscandolo en tu plantilla con Ctrl+F) y el HTML en la entrada o como elemento HTML/Javascript.

Espero y te sirvan en algo.

Referencias:
Pazos blogger

Formato de texto

2011-04-14T15:44:00.000-07:00

Algunos de nosotros creemos que el formato de texto es básico, pero es fundamental para darle un toque distinto a nuestro texto, ya sea resaltando palabras con color, subrayado, tamaño, tipo de letra etc., para lo cual en esta entrada, vamos a ver diferentes ejemplos de formato de texto.

Texto teletipo

<tt>Texto teletipo</tt>

Texto especial

<var>Texto especial</var>

Si vemos el texto con fondo azul, es porque lo estoy utilizando para los codigos fuera del recuadro.

Texto normal^{Texto Superíndice}

Texto normal<b>Texto Superíndice</b>

Texto normal_{Texto Subíndice}

Texto normal<b>Texto Subíndice</b>

Texto en negrita

<b>Texto en negrita</b>

Texto en cursiva

<i>Texto en cursiva</i>

Texto subrayado

<u>Texto subrayado</u>

Texto con línea arriba
Este resultado generado, es por medio de la etiqueta <span>:

<span style="text-decoration: overline;">
Texto con línea arriba
</span>

Texto con línea arriba y abajo
Si checas, están fusionados los dos códigos anteriores, la etiqueta <u> con <span>:

<span style="text-decoration: overline;"><u>
Texto con línea arriba y abajo
</u></span>

~~Texto tachado~~

<s>Texto tachado</s>

El siguiente formato de texto se lleva a cabo con la etiqueta <h1,2,3,4,5,6>:

Texto

<h6>Texto</h6>

Texto

<h5>Texto</h5>

Texto

<h4>Texto</h4>

Este texto se mira asi por que es el que estoy utilizando en la sidebar el blog:

Texto

<h3>Texto</h3>

Texto

<h2>Texto</h2>

Texto

<h1>Texto</h1>

Ahora estos son con las etiquetas: <small>, <strong> y <big>:
Pequeñita

<small>Pequeñita</small>

Grande

<strong>Grande</strong>

Mas grande

<big>Mas grande</big>

Mas grande aun
Aquí se duplica el código anterior:

<big><big>Mas grande aun</big></big>

Pero no conformes necesitamos otro tipo de letra, con color y más grande, para ello a continuación te muestro los siguientes ejemplos hechos con la etiqueta <span>:
Texto mas grande.
En este ejemplo, solo modifica el
tamaño de la letra:

<span style=' font-size:30pt;'>Texto mas grande.</span>

Texto mas grande, con color.
Ahora el mismo ejemplo anterior pero con color:

<span style='font-size:30pt; color:#FFCC00;'>
Texto mas grande, con color.
</span>

Texto mas grande, con color y tipo de letra.
A este le sumamos el tipo de letra:

<span style=' font-family:Forte; font-size:30pt; color:#FFCC00;'>
Texto mas grande, con color y tipo de letra.
</span>

Texto mas grande, con color, tipo de letra y bordes.
y a este le sumamos un borde y colocamos la propiedad line-height para el segundo renglon:

<span style='font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>
Texto mas grande, con color, tipo de letra y bordes.
</span>

Texto mas grande, con color, tipo de letra, bordes y color de fondo:
Como ves en este ejemplo, le agregamos un color de fondo.

<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>
Texto mas grande, con color, tipo de letra, bordes y color de fondo.
</span>

Texto mas grande, con color, tipo de letra, bordes e imagen de fondo.
Para ponerle una imagen, solo cambia:

<span style=' background-image: url(Url-de-tu-imagen); font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>
Texto mas grande, con color, tipo de letra, bordes e imagen de fondo.
</span>

Te dejo un último ejemplo pero ahora con palabras, bordes, tipos de letra y fondos coloridos o con imágenes diferentes:
Textoconpalabras,bordes,tiposdeletrayfondoscoloridosoconimagenesdiferentes.
Este seria el código del ejemplo:

<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>Texto</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>con</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt;color:#CCCCCC;border: 2px solid #660000; line-height: 1.3em;'>palabras,</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00;border: 2px solid #006699; line-height: 1.3em;'>bordes,</span>
<span style='background-color:#003300; font-family:Stencil; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>tipos</span>
<span style='background-color:#003300; font-family:Stencil; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>de</span>
<span style='background-color:#003300; font-family:Stencil; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>letra</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>y</span>
<span style='background-color:#5a3100; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>fondos</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>coloridos</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>o</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>con</span>
<span style='background-image:url(Url-de-tu-imagen); font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>imagenes</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>diferentes.</span>

Lo único que queda, es personalizarlos a nuestro gusto.
Ojala y te sean de gran utilidad.

Estilos de bordes

2011-04-13T17:57:00.000-07:00

Siempre quise cambiar el estilo del borde solid por otro y lo logre con otros estilos diferentes.
Si quisieras cambiar el estilo de tu borde ¿por cual lo cambiarías?

A continuación te dejo unos ejemplos de ellos:

Borde estilo dotted

<p style="border: dotted 6px #006600;">Borde estilo dotted</p>

Borde estilo dashed

<p style="border: dashed 6px #FFCC00;">Borde estilo dashed</p>

Borde estilo double

<p style="border: double 6px #0000CC;">Borde estilo double</p>

Borde estilo groove

<p style="border: groove 6px #CC6600;">Borde estilo groove</p>

Borde estilo ridge

<p style="border: ridge 6px #CC00FF;">Borde estilo ridge</p>

Borde estilo inset

<p style="border: inset 6px #990000;">Borde estilo inset</p>

Borde estilo outset

<p style="border: outset 6px #333399;">Borde estilo outset</p>

Borde estilo solid

<p style="border: solid 6px #808080;">Borde estilo solid</p>

También podrás poner bordes de estilos distintos con colores distintos como en el siguiente ejemplo:

Bordes de estilos distintos con colores distintos

<p style="border-right: #990000 6px dotted; border-top: #FFCC00 6px dashed; border-left: #006600 6px double; border-bottom: #0000CC 6px groove;">
Bordes de estilos distintos con colores distintos
</p>

Y ahora lo mismo pero con: padding left, right, top y bottom:

Bordes de estilos distintos con colores distintos pero con paddings

<p style="border-right: #660000 6px dotted; padding-right: 45px; border-top: #006699 6px dashed; padding-left: 45px; padding-bottom: 45px; border-left: #660000 6px double; width: 200px; padding-top: 0px; border-bottom: #006699 6px groove; height: 30px; text-align: center">
Bordes de estilos distintos con colores distintos pero con paddings
</p>

Y por si fuera poco, le puedes poner un color de fondo:

Bordes de estilos distintos con colores distintos con imagen de fondo

<p style="border-right: #660000 6px dotted; padding-right: 45px; border-top: #006699 6px dashed; padding-left: 45px; padding-bottom: 45px; border-left: #660000 6px double; width: 200px; padding-top: 0px; border-bottom: #006699 6px groove; height: 40px; background-color: #CC3300; text-align: center">
Bordes de estilos distintos con colores distintos con imagen de fondo
</p>

O una imagen

Bordes de estilos distintos con colores distintos con imagen de fondo

<p style="border-right: #660000 6px dotted; padding-right: 45px; border-top: #006699 6px dashed; padding-left: 45px; padding-bottom: 45px; border-left: #660000 6px double; width: 200px; padding-top: 0px; border-bottom: #006699 6px groove; height: 30px; background-image: url(Url-de-tu-imagen); text-align: center">
Bordes de estilos distintos con colores distintos con imagen de fondo
</p>

Ojala y les sirvan en algo.

Párrafos con HTML

2011-04-13T14:09:00.000-07:00

A veces aunque casi nunca, tratamos de personalizar nuestros párrafos dándoles un toque distinto.
Para ello si tienes pensado hacerlo, te presento los siguientes ejemplos:

Este ejemplo como ves, se justifica el párrafo.
Si quieres distanciar un poco mas o un poco menos las palabras, solo varía la cifra del parámetro:

<div style="word-spacing: 30px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Ahora, las palabras del párrafo son las que se justifican.
Igual que en el ejemplo anterior, si quieres separar las letras, varía la cifra del parámetro:

<div style="letter-spacing: 5px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

3.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

y por ultimo, las palabras de este párrafo se ven amontonadas.
Si quieres juntar o separar las palabras, haces lo mismo variando la cifra:

<div style="line-height:15px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Pero si quieres, podrás colocarle un borde y un color de fondo a tus párrafos:

Este es el codigo:

<div style="background-color: #003300; border: 2px solid #660000; letter-spacing: 5px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Y ahora con borde e imagen de fondo:

Este seria el código:

<div style="background-image: url(Url-de-tu-imagen); border: 2px solid #660000; letter-spacing: 5px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Espero y te sean de utilidad.