Tras ver una entrada en CSS-tricks donde se exponía básicamente esto, pero con jQuery y para toda la página (lo que causa bastantes problemas con logos,etc), he «rehecho» la función para que se pueda usar viablemente en blogger sólo en los artículos.
Para usar este truco y que sea compatible con todos los navegadores tendréis que reemplazar en Diseño > Edición de HTML <div class='post-body hentry-content'> con <article class='post-body' ...>, y su correspondiente cierre </div> por </article>. Si no queréis molestaros por cómo se ve en versiones de IE anteriores a la 9 usad un código alternativo que podréis encontrar más abajo (no hace falta realizar este cambio).
Actualización: Lo estoy usando ahora mismo experimentalmente. Si por alguna razón lo dejo de usar, podéis seguir haciendo click en el enlace para ver el efecto.
Actualización 10/09/2012: Sigo usándolo en el blog, pero si dejo de usarlo y queréis verlo no funcionará el botón. Usad el fiddle.
El código
Tenéis que pegarlo entre etiquetas <script></script>, bien sea encima de </head> o encima de </body>:
(function(){
function getDomain(url) {
return url.match(/:\/\/(.[^\/\?]+)/)[1];
}
function forEach( collection, fn ){
for (var i = 0, len = collection.length; i < len ; i++){
fn.call( null, collection[i], i)
}
}
function externalFavicon(){
var posts = document.getElementsByTagName('article'),
links = [],
notInThisHost = new RegExp(window.location.hostname),
href;
forEach(posts,function(post){
// Concatenar (imposible usar [].slice.call por IE)
forEach(post.getElementsByTagName('a'), function(link){links.push(link)})
})
// Ejecutamos la "magia"
forEach(links, function(link){
href = link.href;
// Comprobamos que es un link externo (si empieza por http y no está en este dominio), y si no tiene o apunta a una imagen
if( /^(http|\/\/)/.test(href)
&& ! notInThisHost.test(href)
&& ! /\.(jpe?g|png|gif)/i.test(href)
&& (link.firstChild
&& link.firstChild.tagName !== "IMG" )
){
// Usamos el favicon como fondo y añadimos un padding para visibilidad
//link.style.background = "url(http://" + getDomain(href) +
// "/favicon.ico) no-repeat 1px center";
link.style.background = "url(http://www.google.com/s2/favicons?domain=" +
getDomain(href) +
") no-repeat 1px center";
link.style.backgroundSize = "16px"
link.style.paddingLeft = "18px"
}
})
}
// Ejecutamos la función tras terminar la carga de la página para que no consuma recursos innecesarios durante la carga
window.addEventListener ?
window.addEventListener('load',externalFavicon,false):
window.attachEvent('onload',externalFavicon)
})()Con esto hallamos los links externos que no lleven a imágenes, y añadimos su favicon a la izquierda.
Código alternativo
Si os interesa al máximo reducir vuestra cantidad de código y no os importa esta característica para IE 7, podemos seleccionar los elementos con querySelectorAll para reducir un buen pedazo de código y evitar hacer el cambio en el html de la plantilla:
(function(){
if( ! document.querySelectorAll ){return;}
function getDomain(url) {
return url.match(/:\/\/(.[^\/\?]+)/)[1];
}
function forEach( collection, fn ){
for (var i = 0, len = collection.length; i < len ; i++){
fn.call( null, collection[i], i)
}
}
function externalFavicon(){
var links = document.querySelectorAll('.post-body a'),
notInThisHost = new RegExp(window.location.hostname),
href;
forEach(links, function(link){
href = link.href;
if( /^(http|\/\/)/.test(href)
&& ! notInThisHost.test(href)
&& ! /\.(jpe?g|png|gif)/i.test(href)
&& (link.firstChild
&& link.firstChild.tagName !== "IMG" )
){
// Usamos el favicon como fondo y añadimos un padding para visibilidad
//link.style.background = "url(http://" + getDomain(href) +
// "/favicon.ico) no-repeat 1px center";
link.style.background = "url(http://www.google.com/s2/favicons?domain=" +
getDomain(href) +
") no-repeat 1px center";
link.style.backgroundSize = "16px"
link.style.paddingLeft = "18px"
}
})
}
window.addEventListener('load',externalFavicon,false);
})()