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.

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!

---

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.

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:

<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:

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWs5zQ93py-0dfvSRh7DdN8U0MIAQKJ5DLq4I41dtLfUpx0kghHigTb0qBgHsFFNqXJ8f9MZl4049IKWz2RFmeoc_zq9lqN41_Mar62zgPDXxboG3n-GNbtm5Iy1DOlaF6YvnB3-6-83IP/s80/Carretera+rodeando+a+la+tierra.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWs5zQ93py-0dfvSRh7DdN8U0MIAQKJ5DLq4I41dtLfUpx0kghHigTb0qBgHsFFNqXJ8f9MZl4049IKWz2RFmeoc_zq9lqN41_Mar62zgPDXxboG3n-GNbtm5Iy1DOlaF6YvnB3-6-83IP/s80/Carretera+rodeando+a+la+tierra.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.

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.