Link automático

En un comentario me hicieron una pregunta curiosa, ¿había alguna forma para un link se abriera automáticamente simplemente pasando el mouse por encima de éste? La verdad, no se me había ocurrido, pero indagando encontré la respuesta en un foro.

Sí es posible conseguirlo y además es muy sencillo. Bastará con poner esto:

<a href="URL" onmouseover="window.location=this.href">Aqui-nombre-enlace</a>

Donde cambiamos URL por la dirección de la página a la que queremos enlazar y cambiamos Aqui-nombre-enlace por el nombre que deseemos ponerle al enlace.

El resultado:

Wikipedia

► Y si deseas personalizar el enlace, mira este post

Las imágenes en Blogger

Hay algunas preguntas que recibo con frecuencia sobre las imágenes que suben a blogger. Y las preguntas más frecuentes (aunque hay más) son estas dos: cómo quitar el enlace de la imagen y cómo hacer para que la imagen enlace a alguna web en especial.

Aquí las respuestas:

Las imágenes que subimos a blogger tienen esta estructura, claro que cambiará algunos datos numerícos o el nombre de la imagen, pero en general tienen esta estructura:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_yVKhLCZjGOI/SjbB5Efw2-I/AAAAAAAAA2I/9-dVkep7I1s/s1600-h/el-delfin-poster-diversas-jessica.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 280px; height: 400px;" src="http://1.bp.blogspot.com/_yVKhLCZjGOI/SjbB5Efw2-I/AAAAAAAAA2I/9-dVkep7I1s/s400/el-delfin-poster-diversas-jessica.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5347674793752714210" /></a>

Ahora empecemos a resolver las preguntas:

CÓMO QUITAR EL ENLACE DE UNA IMAGEN

En el código de la imagen (antes mencionado) borraremos las siguientes partes resaltadas:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_yVKhLCZjGOI/SjbB5Efw2-I/AAAAAAAAA2I/9-dVkep7I1s/s1600-h/el-delfin-poster-diversas-jessica.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 280px; height: 400px;" src="http://1.bp.blogspot.com/_yVKhLCZjGOI/SjbB5Efw2-I/AAAAAAAAA2I/9-dVkep7I1s/s400/el-delfin-poster-diversas-jessica.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5347674793752714210" /></a>

Resultado:



CÓMO HACER PARA QUE LA IMAGEN ENLACE ALGUNA WEB

Para hacer que la imagen enlace alguna página en especil, cambiaremos lo resaltado en naranja por la URL del enlace que deseemos

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_yVKhLCZjGOI/SjbB5Efw2-I/AAAAAAAAA2I/9-dVkep7I1s/s1600-h/el-delfin-poster-diversas-jessica.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 280px; height: 400px;" src="http://1.bp.blogspot.com/_yVKhLCZjGOI/SjbB5Efw2-I/AAAAAAAAA2I/9-dVkep7I1s/s400/el-delfin-poster-diversas-jessica.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5347674793752714210" /></a>

Resultado:



Como dije al principio hay varias preguntas que se hacen con frecuencia sobre las imágenes que subimos a blogger y las resolveremo en post siguientes.

Puzzle-jirafa

Con un poco de ingenio y mucha paciencia podrás armar este puzzle:

IMAGEN ORIGINAL:



ÁRMALO:



Consejo: sigue el orden de los números

► Referencia: pic2puz

De vuelta...

Estuve ausente este fin de semana, como les dije en mi post anterior mi computadora se llenó de virus...En fin, el técnico ya solucionó el problema, borrando la información del disco C e instalando otra vez los programas.

Bien, estamos de vuelta con más fuerza para seguir publicando más post, ayudando a quienes lo necesiten...

Virus en mi PC

Había oído que les ha pasado a otras personas...Pero bueno, no pensé que me pasara a mí.

Me encuentro escribiendo este post desde una cabina pública; la razón que no use mi computadora: un virus que entró a mi compu.

Cómo entró el virus? fue mediante un correo, un correo donde el título decía: Ayúdame con mi blog, por fa.
Lo abrí confiadamente, como abro los mensajes que recibo con consultas verdaderas. Traía un mensaje adjunto, que supuestamente era la plantilla del blog, pero no era éso. Era un virus que entró a mi compu, y el antivirus no pudo hacer nada.



Con ese problema estoy estos días; no puedo usar mi compu. Este fin de semana, voy a borrar todos los datos de mi compu y a empezar, no queda otra salida.

Por eso, no responderé estos días los comentarios, porque no puedo usar la compu de mi casa y porque voy a estar algo ocupada. Ya el lunes todo volverá a la normalidad (espero).

Deluxe Templates

Deluxe Templates es una muy buena página de plantillas gratuitas, con diseños muy elegantes, pero al mismo tiempo combina un estilo moderno.

Aquí, una pequeña muestra:



► Deluxe Templates

Escribiendo texto tachado

Iba a publicar una nota sobre un menú...Pero la escribiré después, porque estuve leyendo un mensaje del mail donde me preguntaban como lograr que el texto esté así,tachado..

Para el amigo que me envió el mail y para quien también quiera saber cómo lograr un texto tachado, aquí va la rspuesta. Es bastante sencillo, bastará agregar <strike> y </strike> al texto, de la siguiente forma:

<strike>AQUITEXTO-EJEMPLO</strike>

Resultado:

AQUITEXTO-EJEMPLO

MyFlashFetish » videos en tu blog

Si te gustó Mixpod, entonces no te puedes perder MyFlashFetish.

Es un producto parecido a Mixpod, pero es exlclusivo para videos. Es muy sencillo de usar y no requiere registro. Para crear tu reproductor de videos sigue los siguientes pasos:

♠ Del menú, has click en "Video Playlist"
♠ Se abrirá la página del editor; donde podrás escoger el tamaño del video (con small, med, large); además en la menú lateral podrás escoger los colores (color),el tipo de reproductor (skins), estilos (styles) y decidir si será público (setings).
♠ Donde dice "Video search" colocas el nombre del video que deseas buscar. Si haces click en "Preview" tendrás una vista previa del video, para ver si decides agregarlo; si sucede esto último, has click en "Add to playlist".
♠ En la parte final de la página, podrás escoger si deseas que tu reproductor este en Autoplay y para modo aleatorio ( Shuffle)
♠ Finalmente, cuando tengas todo listo, da click a "Save (get code)" y obtendrás el código del reproductor de video que pogarás en tu blog como nuevo elemento HTML.



Muy sencillo de usar y una forma muy original de mostrar nuestros videos; además esta herramienta nos permite personalizar nuestro reproductor de video.

Los widgets o gadgets

Siguiendo con la terminología blogger de uso frecuente, hoy veremos que es un "widget" o "gadget", términos que podríamos usarlos como sinónimos.

Vemoas que es un widget, para ello tomaré la definición que nos proporciona Wikipedia:

En informática, un widget es una pequeña aplicación o programa, usualmente presentado en archivos o ficheros pequeños que son ejecutados por un motor de widgets o Widget Engine. Entre sus objetivos están los de dar fácil acceso a funciones frecuentemente usadas y proveer de información visual. Sin embargo los widgets pueden hacer todo lo que la imaginación desee e interactuar con servicios e información distribuida en Internet; pueden ser vistosos relojes en pantalla, notas, calculadoras, calendarios, agendas, juegos, ventanas con información del tiempo en su ciudad, etcétera.

Los widgets de escritorio también se conocen como gadgets, una nueva categoría de mini aplicaciones, diseñadas para proveer de información o mejorar una aplicación o servicios de un ordenador o computadora, o bien cualquier tipo de interacción a través del World Wide Web, por ejemplo una extensión de alguna aplicación de negocios, que nos provea información en tiempo real del estatus del negocio u organización.

Una característica común a los widgets, es que son de distribución gratuita a través de Internet.

En otras palabras, son las pequeñas aplicaciones (aunque hay excepciones) que generalmente adornan nuestra sidebar o nos sirvan de utilidad, como los calendarios, relojes, etc.

» Ahora, si deseas encontrar gadgets para tu blog, puedes visitar estas etiquetas: Accesorios y Recursos

BloggerThemes.net » plantillas para blogger

Descubro BloggerThemes.net, un sitio web donde encontraremos plantillas muy elegantes y sofisticadas para nuestro blog; aquí, una pequeñísima muestra.



► BloggerThemes.net

Sobre enlaces o links (1): lo básico

Vamos a ver todo lo referido a los enlaces o links; cómo crear un enlace simple, una imagen que sirva de enlace, efectos (hover, visited,etc) y otros...Claro que veremos todo esto poco a poco.

Hoy hablaremos de algunas cosas simples pero muy básicas.

► Para crear un enlace (que podremos usar an algún menú, entrada o en la sidebar) deberemos de usar la etiqueta anchor ( <a> </a> ) y el atributo href; bueno dejándonos de tecnisismos, para crear un enlace deberemos de poner lo siguiente:

<a href="URL">EL-NOMBRE-DEL-ENLACE</a>

Ejemplo: Diversas & Variadas

► Esa es la base, usaremos esta "estructura " cada vez que querramos agregar un enlace...¿Y qué pasa si queremos que en vez de texto sea una imagen la que nos sirva de enlace? Es otra pregunta frecuente que me hacen; parece que debería de haber algún "script especial", pero no es así.
Debemos usar la estructura anterior, pero sustituir el texto por una imagen de esta forma:

<a href="URL"><img src="URL-DE-LA-IMAGEN"></a>

Ejemplo:



► Y si queremos que el enlace se abra en una nueva página? Solo agregaremos a nuestra estructura base el atributo target, no importa si el enlace será con texto o con imagen, de la siguiente forma:

<a href="URL" target="_blank">EL-NOMBRE-DEL-ENLACE</a>

Ejemplos en texto e imagen:

Diversas & Variadas



► También, si queremos podemos usar texto e imagen al mismo tiempo en un enlace...Y ya deben de saber cómo hacerlo, pero de todas formas pongo como quedaría la estructura.

<a href="URL">EL-NOMBRE-DEL-ENLACE<img src="URL-DE-LA-IMAGEN"></a>

Diversas & Variadas

► Creo que éso sería todo por hoy, lo básico, hay todavía mucho que hablar sobre los enlaces y muchas formas de personalizarlos. Pero antes de irme, los dejo con la estructura de un enlace a correo electrónico:

<a href="mailto:aquitucorreo@electrónico">EL-NOMBRE-DEL-ENLACE</a>

Ejemplo:

Contacto

Escucha música según tu humor con YouLicense

Buscando música por internet encontré YouLicense una web muy particular que nos ofrece oír música según nuestro estado de ánimo.
Hay ocho categorías: Happy, Sad, Hypnotic, Romantic, Mysterious, Doubtful, Cool, Angry. Dbdo click en cualquiera de ellas escucharemos música alegre si estamos alegres o podemos escuchar música tristes si nos encontramos tristes. Como dije, una web muy peculiar.

TinyPic » alojar imágenes y videos

TinyPic es una web que nos ofrece alojamiento gratuito para nuestras imágenes y videos.
Es muy sencillo de usar, no requiere registrarse. Otra cosa interesante es que permite redimensionar las imágenes y, en el caso de los videos,nos permite elegir entra Standard definition o High definition.

Además, otro servicio que nos ofrece TinyPic es una galería de imágenes, íconos,fondos, avatares y videos...Es decir, un servicio muy completo.

Aplicar marca de agua con opacidad

Un efecto muy bonito y vistoso, que lo podemos usar para adornar una entrada o usarlo como pullquote o blockquote para resaltar alguna cita textual.
Bueno, para empezar diré que hay muchas formas de crear una marca de agua. En este caso, haremos una marca de agua usando opacidad, para que la imagen se vea como un fondo, como una marca de agua.

Lo único que tenemos que hacer es pegar el siguiente código en algún post o entrada:

<div style="width:300px;height:225px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(AQUÍ-URL-DE-LA-IMAGEN)">
</div>
<p style="width:290px;text-align:justify;position:relative;top:-225px;color:black;">Aquí pones tu texto o algún enlace</p>

♠ No es necesario que la imagen sea ya casi transparente, sólo basta que pongamos la URL de la imagen a "todo color" y el script que les di se encargará del resto.

♠ También es muy importante que adecuemos el ancho y el alto con la imagen que usamos. Por ejemplo , si la imagen que vamos a usar mide 200x300 px, entonces cambiamos los valores width:300px;height:225px; por width:200px;height:300px; claro que deberemos de buscar una imagen no muy grande.

♠ Con top:-225px; podrás centrar el texto que pongas sobre la marca de agua.

Ahora un ejemplo:

» La imagen original:



» La misma imagen que con el script se convertirá en marca de agua:

Este es un ejemplo: aquí
pones tu texto o algún enlace

Efecto pushbutton (botón-pulsar)

Un efecto muy ineteresante que se puede aplicar tanto a imágenes que sirvan de enlace como a simples enaces de texto.

El efecto provoca que el enlace parezca pulsado o como si se "hundiera". Pero, para saber de que trata el efecto pushbutton, aquí les dejo una muestra, pasad el mouse por encima del enlace:



Queréis hacerlo, es bastante sencillo:

♠ Para empezar, vamos a Diseño/ Edición de HTML.
♠ Con ayuda de CTRL+F buscamos ]]></b:skin> y antes de este pegamos:

.pushbutton a:hover{
position: relative;
top: 1px;
left: 1px;}

Luego de esto damos click a guardar plantilla.

♠ Ahora cada vez que querramos agregar un enlace con este efecto deberemos de hacerlo del siguiente modo:

<span class="pushbutton"><a href="AQUÍ-ENLACE-A-PÁGINA"><img src="URL-DEL-BOTÓN"></a></span>

Para agregar un enlace con texto y que tenga el efecto botón-pulsar deberemos de borrar <img src="URL-DEL-BOTÓN"> y en su lugar poner el texto.