Aunque los caracteres en formato Unicode parezcan algo estrafalario, en cualquier plantilla de Blogger los vemos por varios lados. El más común es la comilla simple que en HTML se escribe ' pero hay otros, por ejemplo   para espacios forzosos, ¡ y ¿ para los signos de abren admiraciones o interrogaciones, etc.
En realidad, cualquier texto puede ser escrito de ese modo, hasta un simple HOLA:
HOLA
Siempre tienen el mismo formato, el caracter & seguido del caracter # y un número decimal que es el código Ascii pero que no está limitado a los 256 tradicionales sino que se extiende abarcando cientos de otros números aunque algunos de ellos no serán visibles o se verán mal.
Blogger también usa unas "flechas especiales", caracteres que, por ejemplo, se ven en el gadget de Archivos: ► y ▼:
◄▲►▼
Esta es una lista parcial de distintos caracteres de flechas que también pueden ser utilizados. Poniendo el cursor encima, se verá el formato requerido:
⇐⇑⇒⇓⇠⇡⇢⇣
⇚⤊⇛⤋⤌⤍⤎⤏
⇇⇈⇉⇊↢↤↥↦
↞↟↠↡⇦⇧⇨⇩
☜☝☞☟←↑→↓
Algunas no tienen las cuatro direcciones:
⇽⇾≪≫⇜⇝☚☛⧼⧽
Y otras sólo tienen una:
➩➪➫➬➭➮➯➱
➡⟿➔➜➝➞➟➠➡➢➣➤➧➨➲➵➺➻➼➽➾
Que alguna de las direcciones no exista como carácter individual no es problema ya que usando CSS podemos rotarlo en cualquier dirección; por ejemplo, si tomamos esta flecha hacia la derecha: ➜, lo transformamos en una flecha a la izquierda con:
Son muchos los que utilizan alguna clase de plantilla o tiene un sitio donde las entradas del home se muestran resumidas, adornadas con una imagen. También son muchos los que preguntan ¿cómo puedo hacer para que esas imágenes no se deformen?
La respuesta a eso es sencilla y no le gusta a nadie: no se puede.
No se puede porque si usamos etiquetas IMG y las re-dimensionamos, cosa que podemos hacer con width y height tanto en el CSS como con atributos en la misma etiqueta, la imagen se mostrará con esa dimensión; como una es más alta que ancha, el pobre patito "engordará".
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Para que una imagen se re-dimensione sin perder sus proporciones debemos establecer una y solo una de las dimensiones, dejando que la otra sea calculada por el navegador; en este caso, basta con eliminar height o colocar height: auto; pero, obviamente, con este método, toda la estructura se desquicia ya que habrá rectángulos mas altos que otros y si estamos dimensionando la altura del contenedor y usando overflow:hidden, se cortará.
height: auto | overflow:hidden | restaurar
¿Podemos hacer que la imagen del pato se muestre sin deformarse? Si pero no. Una forma de hacerlo es colocarla dentro de un contenedor, dimesionarlo y usar overflow; es decir, "cortar" lo que sobre; en lugar de:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Tampoco resuelve demasiado.
Si estamos buscando opciones sencillas, lo ideal es que las imágenes que vamos a utilizar mantengan siempre una proporción adecuada y listo; ese tipo de plantilla ha sido pensada para eso; caso contrario, deberíamos olvidarnos de lo que tenemos y pasar a alguna estructura de mosaico usando CSS3 lo que impedirá que se muestre correctamente en ciertos navegadores o agregando algún script que maneje ese tipo de solución.
Una alternativa intermedia es usar un poco de CSS que no resolverá el problema pero mitigará los efectos. Para esto, debemos olvidarnos de la etiqueta IMG y colocar la imagen como fondo. Otra vez, en lugar de:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
La imagen se cortará pero, podemos establecer donde; en el ejemplo, eso se hace con background-position y los valores 50% 50% indican que se coloque en el medio pero puede ser cualquier otro valor.
La otra propiedad que podemos usar es background-size aunque esta, sólo se aplicará en navegadores modernos y, básicamente, tiene tres valores:
background-size: contain | background-size: cover | background-size: auto
En resumen, no hay soluciones perfectas y por eso comencé diciendo que la respuesta a la pregunta es no, no se puede porque es imposible mantener las proporciones de una imagen si lo que estamos haciendo es cambiando esas proporciones. El problema, termina siendo una contradicción en si misma.
El atributo required es otra de las nuevas alternativas que se agregan al HTML5 y lo que hace es indicar que cierto campo debe ser "llenado" y evitar que un formulario se envíe sin contenido.
No tiene nada especial, basta ponerlo en la etiqueta INPUT:
y el navegador se encargará del resto mostrando un mensaje de advertencia aunque,como el resto de estas cosas, no funcionará en las versiones viejas de Internet Explorer:
Estos son dos ejemplos básicos; el primer formulario es "normal:
Y este otro posee el atributo required y como se ve, el navegador lo identifica agregándole una sombra de color:
En Firefox, el estilo de estos campos varía ya que se le agrega una sombra rojiza pero, así como muchos de los otros agregados del HTML5, esto también puede ser personalizado utilizando CSS y para eso, se utiliza la pseudo-clase :required. De este modo, le quitaríamos esa sombra:
:required { box-shadow:none;}
o de esta forma, los podríamos diseñar a gusto en cualquier navegador que acepte ese atributo, agregando cualquier propiedad:
Un artículo de speckyboy nos enseña a crear una caja de búsqueda con estilo; bueno, todas tiene estilo pero esta tiene ESTILO.
Como es un elemento muy común y que se usa en casi cualquier sitio, vamos a ver la manera de realizarla ya que podríamos emplearla incluso en Blogger aunque, claro está, como la mayoría de las cosas que usan CSS3 y HTML5, en las viejas versiones de Internet Explorer funcionará de modo parcial, mejor dicho, funcionará bien pero no se verán ciertos efectos.
El formulario es simple y podría tener más parámetros; la primera etiqueta INPUT usa los atributos placeholder y required que son optativos y el botón de envio, en lugar de estar en otra etiqueta INPUT, se encuentra en una etiqueta BUTTON; obviamente, a la etiqueta FORM se le deberán agregar los atributos extras que necesite según sea el sitio donde se agregue. Un ejemplo:
La etiqueta canvas es muy simple de agregar, sólo tiene tres atributos posibles, el ID con que la identificaremos, el ancho y el alto. Incluso estos dos últimos son opcionales y si no los ponemos, tendrá un tamaño por defecto de 300x150:
Puesta así no veremos absolutamente nada ya que es transparente aunque con CSS es posible agregarle algunas propiedades como márgenes, bordes, fondos, etc. Es que, en realidad, lo que hace la etiqueta no es otra cosa que crear un "lienzo", un espacio particular en donde podremos dibujar pixel por pixel utilizando JavaScript.
Como aún no todos los navegadores la soportan, es aconsejable colocar algún tipo de contenido alternativo, un texto, una imagen, algo que advierta que allí habrá algo; por ejemplo:
<canvas id="nombre" width="valor" height="valor"> ... aquí hay algo ... </canvas>
Una alternativa para que internet Exporer soporte esta etiqueta es agregar el scriptExplorerCanvas y es lo que está agregado en esta entrada así que el demo (en teoría) también debería verse en ese navegador.
El script lo descargamos y lo agregamos de manera condicional (más información):
Para empezar a manipular el contenido de nuestro canvas, debemos empezar a escribir scripts; lo elemental es poder identificarla y para eso está el ID:
var miCANVAS = document.getElementById("nombre"); if (miCANVAS.getContext) { var canvas = miCANVAS.getContext("2d"); // aquí lo manipularemos } else { // advertencia : el navegador no soporta canvas }
A partir de eso, usaremos la variable para darle órdenes y lo primero será colocarle un color de fondo.
var miCANVAS = document.getElementById("nombre"); if (miCANVAS.getContext) { var canvas = miCANVAS.getContext("2d"); canvas.fillStyle = "#FFF"; canvas.fillRect (0,0,300,200); } else { // advertencia : el navegador no soporta canvas }
Usamos dos funciones, fillStyle y fillRect() que son las elementales. Con la primera, definimos el color de lo que dibujaremos:
fillStyle = "color" donde el color puede escribirse en cualquier formato ( "white"; "#FFFFFF", "rgb(255,255,255)", "rgba(255,255,255,1)"
y con la segunda, dibujamos un rectángulo lleno:
fillRect(x,y,ancho,alto) donde x e y son las coordenadas de inicio
así que simplemente, hemos hecho que nuestro canvas sea de color blanco, dibujando un rectángulo lleno que es igual al tamaño total.
Los rectángulos son las formas más simples y tenemos dos opciones disponibles, rectángulos llenos como el anterior o rectángulos que sólo tengan un borde, para esto último usamos otra función:
strokeRect(x,y,ancho,alto)
Para estas cosas básicas, hay una función más que nos permite "borrar" (hacer que algo sea transparente):
clearRect(x,y,ancho,alto)
Todas esas funciones tienen los mismos parámetros, definimos dónde se dibujará (con x e y) y definimos su tamaño.
Algunos ejemplos para jugar.
Creo tres funciones; con una, inicializo el lienzo, con otra dibujo rectángulos llenos y con otra cuadrados sin fondo; nada espectacular pero, para quien nada sabe de esto (yo) es un paso comparable al primer viaje a la luna
<script type="text/javascript"> function iniCANVAS(cual){ var miCANVAS = document.getElementById(cual); if (miCANVAS.getContext) { var canvas=miCANVAS.getContext("2d"); canvas.fillStyle="#FFF"; canvas.fillRect (0,0,300,200); } } function drawSQUARES(cual,x1,y1,w,h,c) { var miCANVAS = document.getElementById(cual); if (miCANVAS.getContext) { var canvas=miCANVAS.getContext("2d"); canvas.fillStyle=c; canvas.fillRect(x1,y1,w,h); } } function drawRECS(cual,x1,y1,w,h,c) { var miCANVAS = document.getElementById(cual); if (miCANVAS.getContext) { var canvas=miCANVAS.getContext("2d"); canvas.fillStyle=c; canvas.strokeRect(x1,y1,w,h); } } </script>
En selfhtml5.org no sólo podemos ver algunos ejemplos más sino también nos ofrecen una hoja donde podemos ver la sintaxis de las principales funciones: HTML5 Canvas Cheat Sheet
Un ejemplo más, llenando todo con colores:
¿Qué pasa si ponemos el puntero del ratón sobre el canvas y hacemos click con el botón derecho? Aparecerá la opción de ... descargar la imagen ya que de eso se trata esto; aquello que "dibujamos" termina siendo una imagen (en formato PNG); una imagen creada de manera dinámica y que no sólo se limita a rectangulitos; con otras funciones, podemos dibujar cualquier tipo de forma, agregar textos,combinar imágenes externas e incluso, animarlas.
Canvas es una nueva etiqueta de HTML5 que permite generar gráficos de manera dinámica en una página y es soportada por Firefox, Opera, Safari e Internet Explorer 9 o superior.
Aunque por ahora es poco utilizada, se supone que será una de esas cosas que en un futuro cercano, transformarán la web.
Es una etiqueta vacía, un contenedor donde puede escribirse, dibujarse o agregarse imágenes que se controlan con JavaScript y por lo tanto, pueden ser modificados en tiempo real, creándose ilustraciones, animaciones, juegos ... casi cualquier cosa.
esto no funcionará en Internet Explorer
Hay muchos demos dando vueltas en la red; los diseñadores están experimentando y con esfuerzo, han conseguido cosas notables.
Por ejemplo, somethinghitme.com ha creado una réplica del viejo juegoSpace Invaders al que ha llamado Canvas Invaders y que podemos ver funcionando haciendo click en este enlace, ejecutándose aca mismo, en una ventana modal .
Ya que no es una etiqueta que soporten las viejas versiones de Internet Explorer, hay una serie de proyectos que intentan solucionar el tema aunque lo logran de manera parcial o limitada. Uno de los más difundidos es el llamado ExplorerCanvas que no es otra cosa que un script que podemos agregar de manera condicional.
Por ejemplo una aplicación como Canvas Painter que también esta agregada a esta entrada y se abre en una ventana modal, debería funcionar en Internet Explorer 8.
La mayor parte de estos experimentos pueden descargarse e incluirse en cualquier página web y hacer eso no tiene demasiados secretos, se agregan como cualquier otro script; por ejemplo, este es uno llamado canvascape que funcionará de manera errática en IE8:
Hasta ahí no hay mayores problemas, hacemos un copypaste de algo y listo pero me da la impresión que estas facilidades van a ir más allá porque no es demasiado difícil generar nuestros propios gráficos así que vamos a ver si por lo menos, logramos empezar a descubrir de qué se trata esta nueva etiqueta, cómo utilizarla y luego, como siempre, todo quedará en manos de nuestra paciencia e imaginación.
Agregar scripts es cosa de todos los días, hay que copiar, pegar y rogar que funcionen. En general, no hay problemas con eso pero, nunca está de más entender la sintaxis y, si es posible, mejorarla.
Es esto lo que nos recuerda un artículo de CSS Tricks y muestra las variantes que solemos encontrar en los distintos ejemplos que pululan en la web.
¿Cuál debemos usar? En realidad, casi cualquiera de ellos porque los navegadores las entienden todas y no se hacen problemas por los detalles que sólo quedan para ser discutidos por los puristas.
Lo cierto es que para agregar un script, basta poner la etiqueta y no es necesario ningún atributo extra aunque para la w3.org sigue siendo obligatorio excepto si se utiliza un documento de tipo HTML5:
<script> ....... el código ....... </script>
Si queremos ser prolijos, podemos agregar el atributo type aunque en realidad, este sólo es necesario cuando el código no es JavaScript cosa bastante inusual:
<script type="text/javascript"> ....... el código ....... </script>
Lo que no deberíamos usar más es el atributo language; es totalmente innecesario y es considerado obsoleto:
<script language="javascript"> ....... el código ....... </script>
<script type="text/javascript" language="javascript"> ....... el código ....... </script>
En las plantillas de Blogger, tenemos una restricción extra, como se trata de un documento de tipo XHTML, ciertos caracteres como < > y & están "prohibidos" cuando se utilizan fuera de ciertos contextos y por eso, debemos agregar CDATA, para evitar que el sistema nos marque un error o cambie las comillas por entities como ". Hacerlo de este modo, evitará que el código se "ensucie" o que, simplemente, no funcione:
<script type="text/javascript"> //<![CDATA[ ....... el código ....... //]]> </script>
Pero ... en Blogger siempre hay peros; esto sólo es válido en la plantilla misma, no lo es cuando se trata de elementos de tipo HTML o si agregamos scripts en las entradas.
Lo que lleva a recordar que no siempre es necesario que los scripts a utilizar estén en la plantilla; por el contrario, cuando se trata de cosas eventuales, efectos que usamos de tanto en tanto, podemos intentar agregarlas directamente en la entrada y de ese modo, ayudaremos a que nuestro sitio se abra con mayor velocidad ya que no se cargarán cosas innecesarias.
En un tiempo, esto era complicado porque había que escribir todo el script en una sola línea pero, en los nuevos editores de Blogger ese problema ya no existe y el script puede ser escrito de modo normal. Sin embargo, hay que ver caso por caso ya que hay ocasiones en que determinados caracteres como < siguen limitándonos ya que las reglas de Blogger son poco claras y las cambian cuando quieren.
Usar comentarios condicionales para eludir incompatibilidades con distintas versiones de Internet Explorer no es lo ideal porque lo ideal es resolverlas pero, tampoco es un pecado y es la forma más simple agrupar etiquetas específicas que sólo serán aplicadas a ese navegador y, sin duda, es un método mucho más flexible y seguro que utilizar hacks estrafalarios que no siempre dan resultados.
Este método permite agregar etiquetas de cualquier tipo, ya sean reglas de estilo específicas, como scripts o cualquier otra y las condiciones pueden ser utilizada tanto en el head de una página como en el body e incluso, dentro de una entrada de un blog.
El formato standard es el siguiente:
<!--[if IE]> ... acá ponemos las etiquetas que sólo se ejecutaran en Internet Explorer ... <![endif]-->
Una serie de variantes permiten establecer las versiones de IE donde se aplicarán:
<!--[if IE 7]> ... sólo en IE version 7 ... <![endif]-->
Con lt se indica menor que y con lte menor o igual que:
<!--[if lt IE 8]> ... versiones anteriores a la 8 ... <![endif]-->
<!--[if lte IE 8]> ... IE8 o inferior ... <![endif]-->
Con gt se indica mayor que y con gte mayor o igual que:
<!--[if gt IE 8]> ... versiones posteriores a la 8 ... <![endif]-->
<!--[if gte IE 8]> ... IE8 o superior ... <![endif]-->
También pueden usarse condiciones negativas con el carácter ! que indica NOT:
<![if !IE 7]> ... NO se está usando IE7 ... <![endif]>
Algunos preguntan si es posible usar estos condicionales para detectar el navegador y crear condicionales para otros. La respuestas es no pero, sin embargo, si es posible condicionar algo para que sólo se ejecute en navegadores que no sean Internet Explorer y hay una confusión respecto a esa sintaxis que debe ser escrita de este modo:
<![if !IE]> ... esto sólo se ejecutará en navegadores que no sean Internet Explorer ... <![endif]>
En este ejemplo, si se está utilizando IE se verá una imagen y en caso contrario, se verá otra:
k_nelita pregunta cómo poner los distintos botones que ofrecen Facebook, Twiiter y otros servicios, debajo de las entradas, que se vean en una línea y que no se descompagine todo. Muchas veces me preguntan lo mismo y lo cierto es que no hay una solución universal porque todo depende de qué tipo de cosas se agregan, de cuales son sus tamaños y propiedades, etc, etc.
Algunos, sólo son enlaces, otros, iframes, otros scripts, otros, códigos especiales como los de Facebook o Google. Hay tantas posibilidades como sitios y servicios existen y por lo tanto, cada caso es diferente pero la base es siempre la misma, debemos saber qué ponemos y qué hace eso que ponemos ¿es un bloque y por lo tanto se generará un salto de línea?, ¿flota?, ¿tiene bordes? Demasiadas preguntas.
Normalmente, basta con usar propiedades como float y margin para acomodarlos pero, eso no siempre resulta y entonces, debemos volver a las fuentes y usar una simple tabla para evitar dolores de cabeza (Ver Malditas Tablas: 1, 2, 3, 4, 5).
Una tabla es como una hoja cuadriculada donde hay filas y columnas. En este caso, sólo requerimos una fila y una cantidad indeterminada de columnas; básicamente, esto es una tabla con tres columnas:
<table> <tr> <td> la celda de la izquierda </td> <td> la celda del centro </td> <td> la celda de la derecha </td> </tr> </table>
¿Qué hace que usar estas etiquetas facilite las cosas? Que están pensadas para "acomodar" contenidos diversos y adaptarse a ellos.
En este ejemplo, voy a poner cinco contenidos diferentes:
Por defecto, la tabla tendrá la altura de la celda más alta y los contenidos quedarán alineado verticalmente en su parte superior (vertical-align:top); luego, corregimos esos detalles usando padding-top si quermos "moverlos" individualmente una cantidad de pixeles que dependerán del contenido o bien usamos vertical-align:middle para centrarlos.
Obviamente, no es la única solución porque jamás hay una sola solución pero es simple y no requiere andar peleando con propiedades CSS que tal vez, no comprendemos.
Las tablas son odiadas por algunos pero, son como las lentejas: si quieres las usas y si no, las dejas.
La teoría es la siguiente: por defecto, los navegadores crean un borde automático en toda etiqueta IMG que sea un enlace; ese borde tiene un pixel de ancho y es del mismo color que el texto de los enlaces y por lo tanto, si no queremos que se muestre ese borde, debenos agregar ese atributo.
Cuando subimos una imagen a Blogger, el código siempre es un enlace que permite abrir la imagen original y si bien nos muestra un código "excesivo", de todos modos, allí está el famoso atributo:
Entonces, ¿basta que pongamos border="0" para que una imagen no tenga borde?
Si pero no; esta es la misma imagen con el mismo código y sin embargo, tiene un borde:
¿Por que ocurre eso? Porque lentamente, los atributos de las etiquetas van siendo reemplazdos por el CSS y esto no es una moda; las regla de estilo, tienen prioridad sobre los atributos así que si agregamos una regla que diga que los enlaces tengan borde, el border="0" será ignorado.
En Blogger, todo eso suele estar definido al inicio; por ejemplo, en una plantilla minima dice esto:
Poner un enlace en una imagen, es algo muy sencillo, y podrás conseguir en dos o tres minutos.
Lo que necesitas
✔La URL de la imagen a la que te interesa añadir un enlace, puede ser en formato PNG, JPEG ó GIF, para ello tienes que subirla a Blogger por ejemplo, desde una entrada del blog u otro blog.
*El enlace de una entrada de tu blog lo consigues copiando la dirección que aparece en la barra de direcciones de tu navegador al estar "dentro" de el post que te interesa enlazar.
✔Y por supuesto, el código HTML.
Cómo hacerlo
Paso 1: Copia el código siguiente y pégalo en un sitio donde puedas trabajar con el, por ejemplo en una nota de tu computadora.
<a href="URL_de_la_pagina_o _de_la _entrada" target="_blank"><img alt="texto alternativo" src="URL_de_ la_imagen" title="texto que aparece al poner el puntero sobre la imagen"/></a>
Paso 2:Sustituye lo que esta marcado de azul, ojo: ten mucho cuidado de no borrar las comillas que estan al principio y al final de cada enlace o texto.
Notas:
El texto alternativo, es el texto que aparece en sustitución de la imagen cuando esta no puede ser mostrada por alguna razón por el navegador.
Si no quieres que se muestre ningún texto al poner el puntero sobre la imagen, elimina la parte que dice: title="texto que aparece al poner el puntero" y listo.
Paso 3: Ya que sustituiste los datos, ya puede usar la imagen donde quieras.
Listo, hemos terminado, ya puedes crear tu imagen y añadirle un enlace.
Sabías que...
Blogger cuenta con una opción que te permite añadir una imagen y también puedes agregar a esta un enlace si así lo quieres, para ello solo tienes que ir a:
Diseño ►Añadir un gadget, yseleccionar la opción de "Imagen"y subirla.
El problema ocurre cuando quieres usar un gif animado, y en ese caso, es mejor hacerlo poniendo nosotros mismos el código.
Actualizado tomando en cuenta la nueva Interfaz. 05-27-2012.
Agregar un enlace a un texto es una aplicación muy sencilla y fácil de entender y aunque ahora existen herramientas que te permiten agregarlo sin necesidad de escribir tú el código, es bueno saberlo para poderlo reconocer dentro de códigos mas complejos o simplemente para que sepas añadirlo, cuando el formato ó programa que uses no te de esa opción.
Es muy común que lo puedas usar al escribir un comentario en un blog al dejar el enlace de un sitio por ejemplo.
Lo que necesito:
✔ La URL o enlace de la página o sitio web al que quieres que se dirija el usuario al hacer click sobre el texto
✔El texto a mostrar
✔ El código HTML respectivo
Pasos
Paso 1.Copia el siguiente código y pégalo en un lugar donde puedas editarlo, por ejemplo una nota de notepad de tu computadora ó si prefieres colocalo directamente en el lugar donde lo quieres usar.
<a href="LA_ URL_DE_ LA_ PAGINA">El texto que se mostrará</a>
Paso 2.Sustituye el texto que dice:LA_ URL_DE_ LA_ PAGINA, por tu propio enlace, ojo: ten cuidado de no borrar las comillas al principio y al final de el enlace , y escribe el texto que se mostrará.
✓ A este tipo de Enlaces se le llama hipervínculos.
✓Blogger cuenta con una opción que te permite añadir enlaces sin necesidad de usar el código, para hacerlo, solo tienes que ir a:
►Agregar un gadget►Lista de Enlaces
✓Esta misma aplicación la utilizas al poner enlaces con el formato de g-mail, el editor de entradas de Blogger, en programas como Windows live writer etc., claro que ahí tú no escribes los códigos, el programa de cada uno de ellos lo hace por ti.
Ojalá te sea de utilidad. No dudes en comentar y/ó sugerir.
Por ejemplo, 
.
Por ejemplo una aplicación como 
En este ejemplo, si se está utilizando IE se verá una imagen y en caso contrario, se verá otra:
