Pizcos Blog

Templay Icons

noreply@blogger.com (Pizcos) — Fri, 21 Aug 2009 13:12:17 PDT

Groject ImageSwitch JQuery

noreply@blogger.com (Pizcos) — Mon, 24 Aug 2009 10:28:48 PDT

En HieuUK he descubierto un plugin muy interesante para conseguir efectos llamativos para nuestras imágenes. Es muy ligero y os lo podéis descargar pulsando sobre el zip de ejemplos.

En su entrada explica varias formas de usarlo.

Veamos el ejemplo anterior, subimos el plugin a nuestra web de alojamiento y lo implementamos en nuestro plantilla.

Añadimos un elemento HTML y pegamos

En su pagina podéis encontrar todas las utilidades de este plugin, si encontráis alguna dificultad para implementar alguno podéis dejar vuestra consulta en esta entrada.

Eliminar comentarios anonimos. Nube de etiquetas.

noreply@blogger.com (Pizcos) — Tue, 25 Aug 2009 14:33:25 PDT

Hace algunos días MamaNunes me comentaba que no podía eliminar comentarios anónimos en una plantilla que había realizado y tenía el formulario de comentarios a continuación de las entradas.

Le pedí que me la mandara y pude comprobar que aparentemente no había ningún error en esa plantilla, pero no podía borrar comentarios anónimos. A mi compi Perem también le pasaba lo mismo así que decidí cargar una plantilla minima y constate que tampoco se podía eliminar los comentarios anónimos.

Este error de Blogger solo se produce si tenemos el formulario de comentarios a continuación de las entradas. Por el momento no he encontrado una solución a este problema pero si una forma de borrar los comentarios.

Para ello solo debemos cambiar momentáneamente la ubicación del formulario de comentarios, vamos a Configuración/Comentarios/Ubicación del formulario de comentarios y seleccionamos Pagina completa, guardamos los cambios y volvemos a la entrada donde se encuentra el comentario que queramos borrar. Ahí pulsamos sobre los comentarios, se nos abrirán en una ventana nueva y podremos borrar el comentario anónimo.

Luego solo tenemos que deshacer lo que hemos hecho volviendo a Configuración/Comentarios/Ubicación del formulario de comentarios y seleccionar Entrada incrustada a continuación.

Aprovecho también para deciros que Blogger ha incluido una novedad en el gadget Lista de Etiquetas, ahora permite mostrarlas como una nube.

Edito: Para los que ya lo tenéis instalado, para actualizarlo como nube será necesario eliminar el antiguo y añadirlo de nuevo, sino seguirá mostrándose como lista. Esta info nos la proporciono uhugalera.

Twitter Remote Widget de visitas de Twitter

noreply@blogger.com (Pizcos) — Wed, 26 Aug 2009 11:58:14 PDT

Con Twitter Remote podemos obtener un widget que nos mostrara el perfil de las visitas de Twitter a nuestro blog. Para ello solo debemos introducir nuestro nombre de usuario y elegir tamaño y colores del widget. Obtendremos un script que añadiremos a nuestra plantilla como elemento HTML.

Explicacion necesaria

noreply@blogger.com (Pizcos) — Fri, 28 Aug 2009 11:12:12 PDT

Desde hace unos días he estado recibiendo acusaciones de que robe la mascota de DeviantArt. Si recordáis hice un post cuando la mostré y empecé a usarla, indicando claramente de donde provenía y los cambios realizados.

Normalmente suelo leer y respetar las condiciones de uso de las imágenes, si alguna vez hago un uso indebido de alguna os puedo asegurar que en cuanto tenga noticias de ello la retirare como ha sido el caso. No consigo recordar si en este caso leí sus condiciones (muy raro en mi) y no encuentro ninguna explicación de porque no leí la condición en concreto que me salte (si tengo una explicación pero me parece poco ética e inconcebible que ocurriera), el resultado de todas formas es que hice un uso indebido de esa imagen. Por lo tanto decidí retirarla y pido disculpas por su mal uso. Mi culpa fue modificarla.

Una vez aclarado esto voy a lo que realmente me molesta de todo esto, en ningún momento, antes de publicar esto, nadie del grupo de DeviantArts de donde partió la "noticia" se puso en contacto privadamente conmigo para advertirme, me entere de ello por Twitter y un día después por un comentario dejado en mi blog.

Entiendo que no tienen obligación de comunicarme en privado nada pero no me han dado en ningún momento la opción de explicarme o rectificar, directamente me acusaron de robo y hoy la noticia es "quien robo la mascota la ha retirado".

En ningún momento hacen mención a la entrada que realice ni a su rectificación, solo que robe y un enlace a mi blog, hoy con captura de pantalla incluida.

Creo que si hubiesen tenido algún interés en que pudiera hacerlo se habrían dado cuenta que procuro aplicar esas reglas éticas de la blogosfera, sobre las que publico, cualquiera puede equivocarse antes de proceder a esas acusaciones sin ni siquiera un triste mail de aviso.

Todo esto me lleva a pensar, ¿que es mas importante? que haya hecho un mal uso de una imagen o sacar entradas acusatorias para ganar... ¿que?

Esto empieza a aburrirme y como se que me leen, lo repito "no me gustan las personas que actúan sin informarse".

Y repito SI, HICE UN MAL USO DE LA IMAGEN Y PIDO DISCULPAS POR ELLO.

Templates by Bie templates

noreply@blogger.com (Pizcos) — Fri, 28 Aug 2009 12:38:43 PDT

Hasta que algun operador quiera

noreply@blogger.com (Pizcos) — Sun, 30 Aug 2009 10:10:30 PDT

Como ya sabéis me he mudado definitivamente a mi nueva casa, por desgracia, en pleno siglo XXI, Telefónica no puede darme servicio Adsl en mi nueva dirección.

Ya me he puesto en contacto con otros operadores que afirman que pueden darme el servicio, como uno con la edad se convierte en un incrédulo, no se cuando volveré a estar online.

Agradeceros a todos, vuestras visitas y comentarios diarios, os prometo que no dejare de intentar estar online lo mas rápido posible.

Mientras tanto he decidido cerrar el blog a comentarios y contactos por mail, no quiero parecer descortés al no contestar a futuros comentarios o consultas y no todos los futuros visitantes estarán informados de mi problema con los operadores y sus servicios.

Un abrazo a la blogosfera. Hasta que algún operador quiera...

Y un operador quiso...

noreply@blogger.com (Pizcos) — Sun, 04 Oct 2009 11:11:36 PDT

Bueno ha costado un poco pero ya tengo conexión al "mundo" gracias a Ya.com. Por el momento funciona bastante bien.

He de ponerme al día pero en pocos días espero poder volver a publicar normalmente.

Gracias a todos por seguir visitandome.

Fairshare. Conoce quien te copia.

noreply@blogger.com (Pizcos) — Mon, 19 Oct 2009 14:00:31 PDT

Hace algunos meses que uso Fairshare para conocer el uso que se da de mis entradas, si alguien las copia completamente o en parte.

Se búsqueda de contenido copiado se basa en los feeds, si encuentra algún feed que contenga cierto numero de palabras copiadas te envía un mail informándote del porcentaje de palabras copiadas, si te han linkeado, te da la url y si contiene publicidad.

Realmente muy simple pero muy efectivo, solo debes introducir el feed de tu blog y recibirás las notificaciones a través de tu lector de feed.

Boton de compartir en Blogger

noreply@blogger.com (Pizcos) — Fri, 23 Oct 2009 10:45:58 PDT

Como todos sabréis, hace algún tiempo que Blogger (intentando darle alguna utilidad a su navbar) incluyo un botón de compartir en su barra de navegación.

Realmente es una buena iniciativa si no fuese por lo antiestética y molesta que resulta esa barra de navegación, aunque me entero por Rosa que han incluido algún nuevo formato.

La mayoría de nosotros lo primero que hacemos es suprimirla (realmente solo podemos esconderla) por lo que se pierde la utilidad del nuevo botón de compartir implementado en ella.

Sin embargo no tenemos porque no aprovecharnos de esa nueva función, yo la he incluido en los marcadores que tengo debajo de cada entrada.

En esta entrada os explicaba como implementar los marcadores hispanos, solo deberéis cambiar un poco el CSS. Donde ponga technorati cambiarlo por blogger y sustituir la imagen en

.cat-bitacoras, .cat-bitacoras:hover,.cat-delicious, .cat-delicious:hover,.cat-facebook, .cat-facebook:hover, .cat-meneame ,.cat-meneame:hover, .cat-blogger, .cat-blogger:hover, .cat-twitter, .cat-twitter:hover, .cat-wikio, .cat-wikio:hover {
background:url(URL ALOJAMIENTO IMAGEN) no-repeat !important;
}

Cambiamos el marcador de Technorati en el HTML

<li class='cat-technorati'><a alt='Technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Technorati'/></li>

lo sustituimos por

<li class='cat-blogger'><a alt='Blogger' expr:href='"http://www.blogger.com/share-post-menu.g?blogID=NUMERO DE ID DE TU BLOG"' target='_blank' title='Blogger'/></li>

El NUMERO DE ID DE TU BLOG es ese numero tan largo que aparece en la barra de nuestro navegador cuando editamos nuestra plantilla.

Para aquellos que no lo tengan implementado pueden hacerlo simplemente añadiendo una imagen con la url arriba indicada

En otra entrada os mostrare varias formas de implementar este botón en diferentes partes de la entrada.

Expandir imagenes onMousehover

noreply@blogger.com (Pizcos) — Sat, 24 Oct 2009 03:49:12 PDT

En DynamicDrive he encontrado un script que permite ampliar las imágenes al paso del mouse, su uso es muy simple y el efecto bastante atractivo.

Para implementarlo añadimos antes de </body>

Para usarlo en las entradas añadimos una imagen de la manera habitual y deberemos añadirle la clase "expando" y reducir el tamaño de la imagen

Este es el código habitual (tamaño de imagen medio para Blogger)

<a href="http://4.bp.blogspot.com/_xxxxxxxxxx/yyyyyyyyyy/zzzzzzzzz/vvvvvvvv/s1600-h/imagen.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 310px; height: 320px;" src="http://4.bp.blogspot.com/_xxxxxxxxxx/yyyyyyyyyy/zzzzzzzzz/vvvvvvvv/s1600-h/imagen.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5375131081222434130" /></a>

Añadimos la clase y modificamos un poco el tamaño

<a href="http://4.bp.blogspot.com/_xxxxxxxxxx/yyyyyyyyyy/zzzzzzzzz/vvvvvvvv/s1600-h/imagen.jpg"><img class="expando" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 210px; height: 220px;" src="http://4.bp.blogspot.com/_xxxxxxxxxx/yyyyyyyyyy/zzzzzzzzz/vvvvvvvv/s1600-h/imagen.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5375131081222434130" /></a>

Halloween Icons

noreply@blogger.com (Pizcos) — Sat, 24 Oct 2009 10:28:26 PDT

Free Templates Blogger Dante Araujo

noreply@blogger.com (Pizcos) — Sun, 25 Oct 2009 12:37:41 PDT

Realmente interesantes y novedosas estas plantillas realizadas por Dante Araujo

Live Banner Maker

noreply@blogger.com (Pizcos) — Mon, 26 Oct 2009 11:27:51 PDT

Live Banner Maker es un generador de banner online, bastante simple de usar, que nos facilita la labor de generar uno para nuestro blog.

JQuery y otras librerias.

noreply@blogger.com (Pizcos) — Thu, 29 Oct 2009 12:29:32 PDT

Leyendo la entrada Utiliza jQuery & Scriptaculous... simultáneamente de BanakaBanaka!! he recordado que es algo que tengo pendiente de explicar desde hace tiempo. Como usar JQuery con otras librerías.

Siempre hablamos de incompatibilidades entre librerías, yo siempre recomiendo decantarte por una y encontraras todo lo necesario con ella. Pero en que consiste realmente esas incompatibilidades es algo realmente sencillo de entender y relativamente fácil de corregir.

Pero primero entendamos para que usamos esas librerías y las diferencias entre CSS, HTML y JAVASCRIPT. Para que lo entendáis voy a usar una entrada de Chris Coyier en CSS-Tricks en la que me gusto mucho como define estas tres palabras que oímos habitualmente y cuyos conceptos nunca quedan claro:

HTML .- Debe servir para describir y mostrar el contenido de una pagina.

CSS .- Debe servir para el diseño de ese contenido.

JAVASCRIPT .- Debe usarse para darle funcionalidad al contenido.

Una vez tenemos claro cual es el uso que debe darse a cada cosa, volvamos a la cuestión que nos ocupa, las librerías de javascript. Las usamos para dar funcionalidad a los contenidos o elementos de nuestro blog, pero para ello debemos "llamar" a ese contenido o a esos elementos, esas "llamadas" usan selectores.

Ahí es donde aparecen las primeras incompatibilidades, si mas de una librería usa un mismo selector ($) y mezclamos el uso de esas librerías y de esos selectores, los navegadores no nos mostraran esas funcionalidades. Aparecen los "conflictos".

JQuery posee una opción que nos permite su uso con otras librerías como Scriptaculous, Mootools, etc. Simplemente nos da la posibilidad de modificar ese selector ($), lo que normalmente seria con JQuery

eso nos generaría conflictos, así que usando jQuery.noConflict lo evitamos

Añadiendo jQuery.noConflict(); y modificando el selector podremos usar otras librerías.

También podemos usarlo de otra forma, añadiendo una variable y usando esa variable en vez de sustituir el selector $ por JQuery podemos usar otro

Hay otras posibilidades pero tampoco se trata de mostrarlas todas sino que entendáis el concepto.

Sobre la cuestión de si las llamadas a las diferentes librerías deben hacerse en un orden predeterminado, en la página oficial de JQuery nos indican que podemos hacerlas en el orden que queramos.

Espero haberos dejado claro el porque de esos conflictos, como resolverlos, aunque sigo diciendo lo mismo... mejor decantarse por una.

Yahoo Media Player

noreply@blogger.com (Pizcos) — Sun, 01 Nov 2009 11:09:28 PST

Incluir música en tu blog es una tarea que muchas veces se vuelve difícil y tortuosa. Puedes usar los típicos sitios que te permiten subir tu música y te dan el código para insertarlo en tu blog, pero suelen llevar "anexo" publicidad y no se pueden adecuar a la estética de tu blog.

Otra posibilidad es insertar directamente un reproductor en tu blog, para ello debes encontrar alguno de libre disposición (no hay tantos), debes subirlo a alguna web de alojamiento y a la hora de usarlo, lo mas probable es que te pierdas entre tanto código a la hora de querer usarlo.

Yahoo Media Player me ha gustado mucho, realmente es un concepto novedoso para mí, con una simple línea de código, reconoce cualquier archivo de música que insertes en tu blog y le asocia un botón de reproducción. Al pulsarlo te aparece automáticamente el reproductor y empieza a reproducir el fichero de audio.

Para usarlo solo debéis añadir un elemento HTML y en el insertáis (también podéis insertarlo en vuestra plantilla antes de </body>)

Para usarlo solo debéis insertar los archivos de música de esta forma (como un simple enlace)

<a href="URL ALOJAMIENTO ARCHIVO.mp3">Titulo 1</a>
<a href="URL ALOJAMIENTO ARCHIVO.mp3">Titulo 2</a>
<a href="URL ALOJAMIENTO ARCHIVO.mp3">Titulo 3</a>...

Podéis probarlo en su página pulsando en los enlaces que aparecen en C Play

Mostrar ejemplos externos en tu blog JQuery

noreply@blogger.com (Pizcos) — Sun, 01 Nov 2009 11:29:17 PST

Vile Works nos enseña como mostrar ejemplos o demos en nuestro blog con un inFrame. No soy partidario de ellos pero este caso es diferente, usando JQuery solo es necesario añadir una clase al enlace de la página con el ejemplo. Eso no es perjudicial para la página en cuestión si hablamos de posicionamiento. Respeta el enlace como tal.

DEMO

La forma de implementarlo es muy sencilla, añadimos antes de </body> (ya sabéis que debéis tener implementada la librería JQuery)

Para usarlo solo debemos añadir a cualquier enlace la clase inframe

<a class="inframe" href="URL ENLACE A LA PAGINA">NOMBRE DEL ENLACE</a>

Nuevos diseños

noreply@blogger.com (Pizcos) — Mon, 02 Nov 2009 13:57:18 PST

Como me han vuelto las ganas de diseñar alguna plantilla, me he puesto con el blog de mi compi Perem(The Best Music) para darle un nuevo aire.

Antes

Después

Aun me queda bastante trabajo pero creo que quedara bien.

No entiendo Facebook

noreply@blogger.com (Pizcos) — Tue, 03 Nov 2009 02:45:48 PST

¿No existen blogs de ayuda para entender Facebook? Cada vez que me acerco al mío, salgo corriendo.

Puede extrañaros esta afirmación pero es completamente cierta, no lo entiendo, no logro entender para que sirve ¿tal vez para contar cosas? ¿colgar fotos? ¿encontrar amigos?

A diario recibo invitaciones para seguir a gente y aunque las acepto, una veces salen bien y otras se me pierden en el limbo. Intento encontrar amigos que se que están ahí y nada. Me encuentran a mí y tampoco puedo unirme. Me dicen que x amigos han comentado mi ¿estado?

La sensación de impotencia aumenta a medida que lo intento. Todo esto me lleva a pensar, si yo me siento inútil ante Facebook y soy una persona habituada a navegar por la red, usar sus contenidos, etc. ¿Que ocurre con las personas que no lo están?

Si la función de Facebook es mostrar tu perfil, encontrar amigos, compartir cosas, etc ¿Porque lo hacen tan enrevesado? ¿Pueden simplificarlo, por favor? No entiendo su auge, la mayoría de los usuarios de Internet tienen dificultades en encontrar cosas a través del buscador ¿como pretenden que se encuentre algo con Facebook?

Llevo dos días intentando añadir un widget de fans a mi blog y no hay forma, he creado un blog, he creado algo que llaman insignia de perfil, he hecho mil cosas más y el resultado es el mismo, la nada más absoluta.

¿Será que conscientemente lo hacen así? ¿será que les interesa que veas toda la publi y demás ingresos que te meten?

Otra explicación no lo encuentro, si, tal vez una más, me estoy haciendo mayor. ¿Alguien puede ayudarme?

Marcadores sociales 2

noreply@blogger.com (Pizcos) — Thu, 05 Nov 2009 08:13:29 PST

Como ya sabéis ando estos días modificando el blog The Best Music, he implementado en el unos marcadores sociales usando unos iconos de Llow. Los he adaptado en tamaño y modificado alguno para usarlos en redes hispanas.

He realizado una imagen sprite para su uso y he generado los códigos necesarios.

Para implementarlos añadimos en nuestro CSS

div.marcadores {
height:55px;
position:relative;
width:480px;
}
div.marcadores ul.social {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:50px;
}
div.marcadores ul.social li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:50px !important;
width:50px !important;
cursor:pointer !important;
padding: 0 !important;
}
div.marcadores ul.social a {
display:block !important;
width:50px !important;
height:50px !important;
font-size:0 !important;
color:transparent !important;
}

.socialbitacoras, .socialblogger, .socialdelicious, .socialdigg, .socialfacebook, .socialmeneame, .socialtechnorati, .socialtwitter, .socialbitacoras:hover, .socialblogger:hover, .socialdelicious:hover, .socialdigg:hover, .socialfacebook:hover, .socialmeneame:hover, .socialtechnorati:hover, .socialtwitter:hover { background: url(URL ALOJAMIENTO IMAGEN SPRITE) no-repeat !important;
}

.socialbitacoras { background-position: 0 bottom !important; }
.socialblogger { background-position: -50px bottom !important; }
.socialdelicious { background-position: -100px bottom !important; }
.socialdigg { background-position: -150px bottom !important; }
.socialfacebook { background-position: -200px bottom !important; }
.socialmeneame { background-position: -250px bottom !important; }
.socialtechnorati { background-position: -300px bottom !important; }
.socialtwitter { background-position: -350px bottom !important; }
.socialbitacoras:hover { background-position: 0 top !important; }
.socialblogger:hover { background-position: -50px top !important; }
.socialdelicious:hover { background-position: -100px top !important; }
.socialdigg:hover { background-position: -150px top !important; }
.socialfacebook:hover { background-position: -200px top !important; }
.socialmeneame:hover { background-position: -250px top !important; }
.socialtechnorati:hover { background-position: -300px top !important; }

Expandimos nuestra plantilla, buscamos <div class='post-footer-line post-footer-line-3'> y añadimos a continuación el HTML

Fail

noreply@blogger.com (Pizcos) — Fri, 06 Nov 2009 05:08:07 PST

Nota: Imagenes recibidas en mi mail, desconozco su procedencia.

Algo esta cambiando en Blogger

noreply@blogger.com (Pizcos) — Sat, 07 Nov 2009 10:49:17 PST

Desde hace una semana tengo la sensación de que algo esta cambiando en Blogger, a raíz del problema de DNS sufrido en Europa.

Blogger estuvo inaccesible durante 10 horas pero en todo momento nos mantuvo informados a través de su timeline de Twitter. Fueron bastante transparentes durante ese tiempo, incluso se comprometieron a explicar lo ocurrido en Blogger Buzz, cosa que han cumplido.

En esa publicación muestran su intención de que cada vez que haya un problema similar, nos mantendrán informados en todo momento. Que en un plazo inferior a tres días publicaran los motivos de ese fallo, las medidas tomadas y las que tomaran en el futuro para evitarlo. También nos indican que si el acceso a esa información estuviera cortado, usaran el timeline de Twitter para tenernos informados.

En el caso del grave problema ocurrido hace una semana así lo han hecho, en Blogger Status explican que ha ocurrido y que medidas están tomando para evitarlo.

Otro hecho que me hace pensar que algo esta cambiando son las novedades incorporadas y el poner a nuestra disposición una página para ofrecer sugerencias. Al fin parece que quieren salir de sus despachos y escuchar a los que verdaderamente tenemos algo que decir, los usuarios de Blogger.

Pseudo-elementos CSS

noreply@blogger.com (Pizcos) — Mon, 09 Nov 2009 10:32:08 PST

Hay algunas propiedades en CSS poco usadas por ser desconocidas para la gran mayoría de nosotros. Me refiero a los pseudo-elementos que nos permiten añadir efectos a algunos selectores como los títulos de las entradas por ejemplo.

Básicamente hablamos de cuatro pseudo-elementos

:first-letter Añade estilo a la primera letra de un texto

:first-line Añade estilo a la primera fila de un texto

:after Añade contenido detrás de un elemento

:before Añade contenido delante de un elemento

La forma de implementarlos es muy fácil

selector:pseudo-elemento {propiedad:valor}

Veamos un ejemplo con los títulos de las entradas

.post h3:first-letter {font-size:50px;}

A los dos primeros pseudo-elementos podemos aplicarles todas las propiedades de las fuentes.

Los pseudo-elementos :after y :before pueden usarse para añadir una imagen detrás o delante de cualquier titulo, por ejemplo.

.post h3:after {content:url(URL ALOJAMIENTO IMAGEN);}

.post h3:before {content:url(URL ALOJAMIENTO IMAGEN);}

Os dejo ya a la habilidad de cada uno el fruto que podéis sacarle a estos pseudo-elementos, eso si no dejéis de enseñármelo.

Widget traductor de Microsoft

noreply@blogger.com (Pizcos) — Tue, 10 Nov 2009 06:00:06 PST

No conocía la posibilidad que nos da Microsoft de instalar un widget para traducir nuestro blog a otros idiomas. Hoy dándole una vuelta a Bing me he encontrado con ese widget.

Traducir esta páginaMicrosoft® Translator

Solo debéis ir a esta página, introducir la url de vuestro blog y os proporciona el código para insertarlo añadiendo un elemento HTML.

Selectores Atributos CSS

noreply@blogger.com (Pizcos) — Wed, 11 Nov 2009 04:43:08 PST

Hace un par de días veíamos los pseudo-elementos y posibles usos que podíamos darle. Veamos hoy otros selectores muy poco usados, que pueden ayudarnos a mejorar imágenes y links simplemente usando y rellenando la etiqueta "title" en un enlace o una imagen.

Cuando insertamos una imagen o un enlace a nuestro blog desde Blogger el código que normalmente nos encontramos es

Enlace

<a href="URL ENLACE" title="" alt="">Nombre del enlace</a>

Imagen

<img src="URL ALOJAMIENTO IMAGEN" title="" alt=""/>

Enlace con imagen

<a href="URL ENLACE" title="" alt=""><img src="URL ALOJAMIENTO IMAGEN" title="" alt=""/></a>

Habitualmente si queremos darle estilo creamos una clase en nuestro CSS y se la aplicamos al enlace o a la imagen.

.imagen { border: 2px dashed #000000 } Le pondríamos un borde a la imagen.

.enlace { color: #cccccc;} El enlace seria de color gris.

Lo aplicaríamos

Enlace

<a class="enlace" href="URL ENLACE" title="" alt="">Nombre del enlace</a>

Imagen

<img class="imagen" src="URL ALOJAMIENTO IMAGEN" title="" alt=""/>

Esa seria la forma clásica pero podemos hacerlo de otra forma usando la etiqueta "title" y según el nombre que le asignemos podemos darle una apariencia u otra.

Para ello añadimos a nuestro CSS

Para actuar sobre cualquier enlace que tenga la etiqueta "title"

[title]{color:#cccccc;}

Para actuar según el nombre que le demos a la etiqueta

[title=azul] {color:#cccccc;}

Podemos crear varios

[title=azul] {color:#330099;}
[title=rojo] {color:#ff0000;}
[title=naranja] {color:#ff9900;}

Y lo asignaríamos

<a href="URL ENLACE" title="azul" alt="">Nombre del enlace</a>

Enlace 1
Enlace 2
Enlace 3

Para las imágenes seria lo mismo

[title=tipo1] {border: 2px solid #cccccc;}
[title=tipo2] {border: 1px dashed #000000;}
[title=tipo3] {border: 5px solid #cc0000; background: #ffffff; padding: 10px 10px 30px 10px;}

<img src="URL ALOJAMIENTO IMAGEN" title="tipo3" alt=""/>

Existen algunos más pero creo que esto es realmente útil si queremos darle diferentes aspectos de forma fácil a nuestras imágenes y enlaces.