JMiur [E]

Mostar el favicon de una página web para "adornar" los enlaces es fácil si ese sitio coloca la etiqueta adecuada, si la imagen es "normal" y si está alojada correctamente.

En principio, hay dos formas de hacerlo, la obvia es usar la dirección URL del sitio seguida del nombre del archivo que en este caso, debería ser favicon.ico y luego, colocar esa dirección en una etiqueta IMG al igual que hacemos con cualquier otra imagen; por ejemplo:
<img src="http://www.facebook.com/favicon.ico"/>

Claro que, esto no funcionará siempre; hay sitios que los bloquean así que no podemos acceder a esas imágenes o usan otros formatos o están en otro directorio interno, etc.

Un segundo método es usar un servicio de Google que nos permite postrar el favicon de cualquier sitio, en formato PNG; para eso, debemos usar una dirección URL como esta:

http://www.google.com/s2/favicons?domain=DOMINIO

e igual que en el caso anterior, la ponemos en una etiqueta IMG:
<img src="http://www.google.com/s2/favicons?domain=facebook.com" />

Cualquiera de ambos métodos podríamos aplicarlos a la lista de enlaces de Blogger y automatizar la tarea, para eso, bastaría modificar un poco el código del gadget pero, el primero de ellos es el más sencillo de implementar, sobre todo, ahora que Blogger nos permite agregar un favicon a las plantillas.

Así que, si la expandimos y buscamos el widget que deberá llamarse LinkList, veremos algo así:
<ul>
  <b:loop values='data:links' var='link'>
    <li><a expr:href='data:link.target'><data:link.name/></a></li>
  </b:loop>
</ul>
Es un bucle, que crea una lista donde la dirección URL es data:link.target y el texto visible es data:link.name así que podríamos re-armarlo agregándole otro dato:
<li>
  <a expr:href='data:link.target'>
    <img expr:src='data:link.target + &quot;favicon.ico&quot;' />
    <data:link.name/>
  </a>
</li>
Claro que que no todos serán accesibles y si son blogs de Blogger, muchos de ellos no habrán establecido el favicon así que se mostrará el que se usa por defecto.


Y un poco de CSS nos permitirá organizar ese gadget como se nos ocurra:
<style>
  #LinkList1 li {
    background-color: #303941;
    border-top: 2px solid #303941;
    border-bottom: 2px solid #303941;
    cursor: pointer;
    margin: 2px 0;
    padding: 3px 10px;
  }
  #LinkList1 li a {
    color: #FFF !important;
    font-weight: normal !important;
  }
  #LinkList1 li img {
    background: #FFF url(IMAGENxDEFECTO) no-repeat 0 0;
    display: inline-block;
    height: 16px;
    margin-right: 5px;
    vertical-align: top;
    width: 16px;
  }
  #LinkList1 li:hover {
    background-color: #101921;
    border-color: #606971;
  }
</style>

14 comentarios:

Beben Koben  

nice snippet master, but...
i think used vertical-align: middle; for better result ;) :D

Responder
Beben Koben  

i think on BlogList1 have automatic with favicon changes :D
ans any title too
here's...coded for favicon
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
xixixixi

Responder
Graciela  

Recién me doy cuenta que ha desaparecio :O
No tenía la terminación ico.

Responder
Oloman  

Me ha gustado este truco. No habría caído nunca en adornar la lista de enlaces de esa manera y tampoco recordaba lo del servicio de Google que ya explicaste hace tiempo. Un saludo.

Responder
JMiur  

Beben Koben:
I like vertical-align: top but anyone can use anything. There are not rules :-)
The BlogList gadget use an internal code but can't be used in others gadgets.

Graciela:
:D

Oloman:
Ese servicio funciona bastante bien, a decir verdad, yo tampoco lo recordaba :D

Responder
Artemisa  

Muy bueno JMiur, me gusta mucho este truco, seguramente lo ponga en mi blog.

Quería hacerte una pregunta que no tiene nada que ver con esto a ver si me puedes ayudar, En mi blog "El Templo de Artemisa" me he dado cuenta que en el gadget de entradas mas visitadas tanto en el titulo como en el resumen los renglones no se alinean, el primero queda mas a la izquierda que el resto y no se como hacer para que todos queden a la altura del primero. ¿Podrias decirme como hago para solucionar esto?

Responder
JMiur  

Artemisa:
Eso ocurre porque en tu plantilla, hay definida una separación horizontal entre líneas:

.sidebar li {
...
text-indent: -15px;
}

Eliminando eso, se resuelve el problema pero, deberás revisar todos los márgenes y paddings del resto de los gadgets de la sidebar por si es necesario ajustarlos.

Otra forma es que quites eso sólo en ese gadget, agregando esta regla:

.PopularPosts li { text-indent: 0; }

Y de ese modo, sólo deberás ajustar márgenes y paddings de ese gadget.

Responder
Artemisa  

Mil gracias JMiur, de nuevo un pequeño detalle que hace un cambio enorme en la forma en que se ve mi blog.

Responder
JMiur  

Oh si; esa propiedad hace que se modifiquen muchas cosas pero, es mejor que esté en cero así se evitan problemas y si es necesario, se aplcia a algo especial. Te resultará más fácil de editar en el futuro.

Responder
Artemisa  

La verdad es que si resulta mas facil, me sucedía lo mismo con los comentarios recientes y ahora lo he podido solucionar.

Por cierto, he puesto la lista de enlaces con el favicon dandole los mismos estilos que el ejemplo de tu post y me han quedado muy bien.

Muchas gracias por todo.

Responder
JMiur  

Me alegra que todo se resolviera, Artemisa :D

Responder
Karla  

:D jaja "adornan" me recordó al arbolito de navidad, que por cierto aún tengo en el garage, a ver si me animo a sacarlo ahora, ya quiero respirar ese espíritu navideño en mi casa.

:)) "Felices fiestas"

Responder
JMiur  

Karla: Usted se me adelanta mucho :D

Responder
Prof. Pereles  

Muchas gracias efectivamente lo que estaba buscando.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR